diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index c58db9c6..00000000
--- a/.eslintrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "root": true,
-  "extends": ["eslint:recommended"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "commonjs": true
-  }
-}
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..f23f786d
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    node: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: [],
+  rules: {},
+};
diff --git a/next/.eslintrc b/next/.eslintrc
deleted file mode 100644
index aa40f2a3..00000000
--- a/next/.eslintrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": ["../.eslintrc", "next", "@osn"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "rules": {
-    "@next/next/no-img-element": "off"
-  }
-}
diff --git a/next/.eslintrc.js b/next/.eslintrc.js
new file mode 100644
index 00000000..03e3f0da
--- /dev/null
+++ b/next/.eslintrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  extends: ["next/core-web-vitals", "@osn", "../.eslintrc.js"],
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve("next/babel")],
+    },
+  },
+  rules: {
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off",
+  },
+};
diff --git a/next/components/accordionPanel/fold/caret-down.svg b/next/components/accordionPanel/fold/caret-down.svg
index 8654094d..f525ac80 100644
--- a/next/components/accordionPanel/fold/caret-down.svg
+++ b/next/components/accordionPanel/fold/caret-down.svg
@@ -2,7 +2,7 @@
     <g clip-path="url(#clip0_8668_42171)">
         <path fill-rule="evenodd" clip-rule="evenodd"
               d="M7.84315 9.15685L6.34315 10.6569L12 16.3137L17.6569 10.6569L16.1569 9.15685L12 13.3137L7.84315 9.15685Z"
-              fill="#A1A8B3"/>
+              fill="var(--textTertiary, #A1A8B3)"/>
     </g>
     <defs>
         <clipPath id="clip0_8668_42171">
diff --git a/next/components/accordionPanel/fold/index.js b/next/components/accordionPanel/fold/index.js
index e2d422f1..4fd55890 100644
--- a/next/components/accordionPanel/fold/index.js
+++ b/next/components/accordionPanel/fold/index.js
@@ -10,7 +10,7 @@ const Wrapper = styled.span`
       transform: rotate(${(props) => (props.fold ? 180 : 0)}deg);
     }
     path {
-      fill: #506176;
+      fill: var(--textSecondary);
     }
   }
 `;
diff --git a/next/components/accordionPanel/panel.js b/next/components/accordionPanel/panel.js
index c16dc43e..99494737 100644
--- a/next/components/accordionPanel/panel.js
+++ b/next/components/accordionPanel/panel.js
@@ -9,7 +9,7 @@ const Header = styled.header`
   ${(p) =>
     !p.secondary &&
     css`
-      border-bottom: 1px solid #f0f3f8;
+      border-bottom: 1px solid var(--strokeBorderDefault);
       padding-bottom: 20px;
     `}
 
diff --git a/next/components/account.js b/next/components/account.js
index 23e8aeb7..9519fe41 100644
--- a/next/components/account.js
+++ b/next/components/account.js
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -10,8 +10,6 @@ import {
 import Avatar from "./avatar";
 import { p_14_medium } from "../styles/textStyles";
 import { ReactComponent as UserIcon } from "../public/imgs/icons/user.svg";
-import { shadow_200 } from "../styles/globalCss";
-import { useWindowSize } from "../frontedUtils/hooks";
 import ButtonPrimary from "@osn/common-ui/es/styled/Button";
 import {
   popUpConnect,
@@ -22,6 +20,7 @@ import {
 import { ChainIcon } from "@osn/common-ui";
 import IdentityOrAddr from "@/components/identityOrAddr";
 import { useMetaMaskEventHandlers } from "services/metamask";
+import { useOnClickOutside } from "frontedUtils/hooks";
 
 const ConnectModal = dynamic(() => import("./connect"), {
   ssr: false,
@@ -78,21 +77,18 @@ const AccountWrapper = styled.div`
 `;
 
 const AccountWrapperPC = styled(AccountWrapper)`
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
 
   :hover {
-    border: 1px solid #b7c0cc;
+    border: 1px solid var(--strokeActionActive);
   }
 
   ${(p) =>
     p.show &&
     css`
-      border: 1px solid #b7c0cc;
+      border: 1px solid var(--strokeActionActive);
     `}
   padding: 7px 15px;
-  @media screen and (max-width: 800px) {
-    display: none;
-  }
 `;
 
 const MenuWrapper = styled.div`
@@ -101,9 +97,9 @@ const MenuWrapper = styled.div`
   position: absolute;
   right: 0;
   top: 100%;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  ${shadow_200};
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardHover);
   padding: 16px;
   padding-bottom: 8px;
   z-index: 1;
@@ -115,7 +111,6 @@ const MenuWrapper = styled.div`
     position: initial;
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: 20px solid white;
   }
 
   .connect {
@@ -130,7 +125,7 @@ const MenuItem = styled.div`
 
 const MenuDivider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
@@ -139,31 +134,26 @@ const LogoutWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
 
   :hover {
-    color: #1e2134;
-  }
-`;
-
-const DarkButton = styled(ButtonPrimary)`
-  @media screen and (max-width: 800px) {
-    padding: 8px 16px;
-    margin: auto;
-    width: 100%;
-    text-align: center;
+    color: var(--textPrimary);
   }
 `;
 
 function Account({ networks }) {
   const dispatch = useDispatch();
-  const windowSize = useWindowSize();
   const account = useSelector(loginAccountSelector);
   const showConnect = useSelector(showConnectSelector);
   const [pageMounted, setPageMounted] = useState(false);
   const address = useSelector(loginAddressSelector);
   const spaceSupportMultiChain = networks?.length > 1;
 
+  const menuRef = useRef();
+  useOnClickOutside(menuRef, () => {
+    dispatch(setShowHeaderMenu(false));
+  });
+
   useMetaMaskEventHandlers();
 
   const showMenu = useSelector(showHeaderMenuSelector);
@@ -184,24 +174,22 @@ function Account({ networks }) {
     dispatch(setShowHeaderMenu(false));
   };
 
-  const ConnectWalletButton = (
-    <div className="connect">
-      {!account && (
-        <DarkButton
-          primary
-          onClick={() => dispatch(popUpConnect())}
-          className="button"
-        >
-          Connect Wallet
-        </DarkButton>
-      )}
-    </div>
+  const ConnectWalletButton = !account && (
+    <ButtonPrimary
+      primary
+      onClick={() => {
+        dispatch(popUpConnect());
+      }}
+      className="w-full"
+    >
+      Connect Wallet
+    </ButtonPrimary>
   );
 
   const Menu = (
-    <MenuWrapper onClick={(e) => e.stopPropagation()}>
+    <MenuWrapper ref={menuRef} onClick={(e) => e.stopPropagation()}>
       {/*The dark connect button For Mobile only*/}
-      {!account && windowSize.width <= 800 && ConnectWalletButton}
+      {!account && ConnectWalletButton}
       {/*The dark connect button For Mobile only*/}
       {address && (
         <>
@@ -237,11 +225,6 @@ function Account({ networks }) {
     </MenuWrapper>
   );
 
-  // show ConnectModal on first priority if  showConnect = true
-  if (showConnect) {
-    return <ConnectModal networks={networks} />;
-  }
-
   // if already connected, show address on right top corner
   if (address && pageMounted) {
     return (
@@ -270,13 +253,13 @@ function Account({ networks }) {
   }
 
   // if no address connected, show ConnectButton on right top corner(PC only)
-  if (windowSize.width > 800 && !account) {
-    return ConnectWalletButton;
-  }
-
-  // show dropdown menu (Mobile only)
-  if (showMenu) {
-    return <Wrapper>{Menu}</Wrapper>;
+  if (!account) {
+    return (
+      <div className="flex w-full">
+        {ConnectWalletButton}
+        {showConnect && <ConnectModal networks={networks} />}
+      </div>
+    );
   }
 
   return null;
diff --git a/next/components/accountItem.js b/next/components/accountItem.js
index 6b740bee..617a5518 100644
--- a/next/components/accountItem.js
+++ b/next/components/accountItem.js
@@ -8,18 +8,17 @@ import encodeAddressByChain from "../frontedUtils/chain/addr";
 
 const Text = styled.p`
   ${p_16_semibold};
-  color: #1e2134;
+  color: var(--textPrimary);
   margin: 0;
 `;
 
 const TextMinor = styled(Text)`
   ${p_14_normal};
-  color: #9da9bb;
+  color: var(--textTertiary);
 `;
 
 const ItemWrapper = styled.div`
   height: 64px;
-  padding: 8px 16px;
   display: flex;
   align-items: center;
   & > div:first-child {
diff --git a/next/components/accountSelector.js b/next/components/accountSelector.js
index cfc64a47..3f54bd4b 100644
--- a/next/components/accountSelector.js
+++ b/next/components/accountSelector.js
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import StyledDropdown from "@/components/styled/dropdown";
 import AccountItem from "./accountItem";
+import { DropdownSelector } from "@osn/common-ui";
 
 const Wrapper = styled.div``;
 
 const DropdownWrapper = styled.div`
   position: relative;
-  z-index: 9;
   height: 64px;
 `;
 
@@ -32,18 +31,11 @@ const AccountSelector = ({ accounts, chain, onSelect = () => {} }) => {
   return (
     <Wrapper>
       <DropdownWrapper>
-        <StyledDropdown
-          selection
+        <DropdownSelector
+          className="!h-16"
           options={options}
-          onChange={(_, { value }) => {
-            setSelectedIndex(value);
-          }}
-        />
-        <AccountItem
-          accountName={accounts?.[selectedIndex]?.meta?.name}
-          accountAddress={accounts?.[selectedIndex]?.address}
-          chain={chain.network}
-          header
+          value={selectedIndex}
+          onSelect={setSelectedIndex}
         />
       </DropdownWrapper>
     </Wrapper>
diff --git a/next/components/assetList.js b/next/components/assetList.js
index dcbd229d..f55ed256 100644
--- a/next/components/assetList.js
+++ b/next/components/assetList.js
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { p_14_medium, p_12_normal } from "../styles/textStyles";
 import { ChainIcon, FlexBetween } from "@osn/common-ui";
-import Tooltip from "./tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
@@ -34,7 +34,7 @@ const AssetIconContainer = styled.div`
 
 const DelegationText = styled.span`
   ${p_12_normal}
-  color: #A1A8B3;
+  color: var(--textTertiary);
   text-transform: capitalize;
 `;
 
diff --git a/next/components/author.js b/next/components/author.js
index 080d77d6..15d69485 100644
--- a/next/components/author.js
+++ b/next/components/author.js
@@ -7,7 +7,7 @@ import IdentityOrAddr from "@/components/identityOrAddr";
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  color: #2e343d;
+  color: var(--textPrimary);
   > :not(:first-child) {
     margin-left: 4px;
   }
diff --git a/next/components/avatar.js b/next/components/avatar.js
index 82d11d1a..31b6cf0a 100644
--- a/next/components/avatar.js
+++ b/next/components/avatar.js
@@ -10,7 +10,7 @@ const Wrapper = styled.span`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: ${(props) => props.size / 2}px;
-  background: #f0f3f8; ;
+  background-color: var(--fillBgTertiary); ;
 `;
 
 const ImgWrapper = styled.img`
diff --git a/next/components/chainSelector.js b/next/components/chainSelector.js
index 01d8508e..5d183f99 100644
--- a/next/components/chainSelector.js
+++ b/next/components/chainSelector.js
@@ -11,7 +11,7 @@ const Wrapper = styled.div`
 const Text = styled.p`
   ${p_14_medium};
   text-transform: capitalize;
-  color: #1e2134;
+  color: var(--textPrimary);
   margin: 0;
 `;
 
diff --git a/next/components/connect/styled.js b/next/components/connect/styled.js
index c731dd91..40b93758 100644
--- a/next/components/connect/styled.js
+++ b/next/components/connect/styled.js
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Modal } from "semantic-ui-react";
+import { Modal } from "@osn/common-ui";
 import {
   p_14_normal,
   p_16_semibold,
@@ -23,7 +23,7 @@ export const CloseBar = styled.div`
   flex-direction: row-reverse;
 
   > svg path {
-    fill: #9da9bb;
+    fill: var(--textTertiary);
   }
 
   cursor: pointer;
@@ -31,18 +31,18 @@ export const CloseBar = styled.div`
 
 export const StyledTitle = styled.header`
   ${p_20_semibold};
-  color: #1e2134;
+  color: var(--textPrimary);
   margin-bottom: 8px;
 `;
 
 export const StyledText = styled.p`
   ${p_16_semibold};
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export const StyledDescription = styled.p`
   ${p_14_normal};
-  color: #ee4444;
+  color: var(--textFeedbackError);
 `;
 
 export const ActionBar = styled.div`
diff --git a/next/components/datePicker.js b/next/components/datePicker.js
index b19bf6d7..e283b321 100644
--- a/next/components/datePicker.js
+++ b/next/components/datePicker.js
@@ -8,14 +8,13 @@ import { useOnClickOutside } from "frontedUtils/hooks";
 import { ReactComponent as CaretRight } from "/public/imgs/icons/caret-right.svg";
 import { ReactComponent as ArrowLeft } from "/public/imgs/icons/arrow-left.svg";
 import { ReactComponent as ArrowRight } from "/public/imgs/icons/arrow-right.svg";
-import Button from "@osn/common-ui/es/styled/Button";
 import {
   p_14_medium,
   p_14_normal,
   p_16_normal,
   p_16_semibold,
 } from "../styles/textStyles";
-import { Flex, FlexBetween } from "@osn/common-ui";
+import { Flex, FlexBetween, Button } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   position: relative;
@@ -25,9 +24,9 @@ const DateTimeWrapper = styled.div``;
 
 const DateButton = styled.div`
   padding: 12px 16px;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
   :hover {
-    border-color: #b7c0cc;
+    border-color: var(--strokeActionActive);
   }
   display: flex;
   cursor: pointer;
@@ -35,19 +34,19 @@ const DateButton = styled.div`
   font-size: 14px;
   line-height: 24px;
   .placeholder {
-    color: #9da9bb;
+    color: var(--textTertiary);
   }
   > div {
     flex-grow: 1;
   }
   > svg {
     flex: 0 0 24px;
-    fill: #506176;
+    fill: var(--textSecondary);
   }
   ${(p) =>
     p.active &&
     css`
-      border-color: #b7c0cc;
+      border-color: var(--strokeActionActive);
     `}
 `;
 
@@ -56,9 +55,8 @@ const DateWrapper = styled.div`
   z-index: 1;
   right: 0;
   padding: 24px;
-  background: #ffffff;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.06),
-    0px 0.751293px 8px rgba(26, 33, 44, 0.04);
+  background: var(--fillBgPrimary);
+  box-shadow: var(--shadowPopup);
 
   .react-datepicker__header {
     background: transparent;
@@ -68,10 +66,10 @@ const DateWrapper = styled.div`
 
   .react-datepicker__day-name {
     width: 40px;
-    font-family: Inter, sans-serif;
+    font-family: var(--font-inter), sans-serif;
     ${p_14_medium};
     text-align: center;
-    color: #506176;
+    color: var(--textSecondary);
     margin: 0 !important;
   }
 
@@ -82,6 +80,7 @@ const DateWrapper = styled.div`
   .react-datepicker {
     border-radius: 0;
     border: none;
+    background: transparent;
   }
 
   .react-datepicker__month {
@@ -91,30 +90,30 @@ const DateWrapper = styled.div`
   .react-datepicker__day {
     width: 40px;
     height: 40px;
-    font-family: Inter, sans-serif;
+    font-family: var(--font-inter), sans-serif;
     ${p_14_normal};
-    color: #1e2134;
+    color: var(--textPrimary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0;
     margin: 0 !important;
     :hover {
-      background: #f0f3f8;
+      background-color: var(--fillBgTertiary);
     }
   }
 
   .react-datepicker__day--today {
     font-weight: 600;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--strokeActionDefault);
   }
 
   .react-datepicker__day--selected {
-    background: #f0f3f8;
+    background-color: var(--fillBgTertiary);
   }
 
   .react-datepicker__day--outside-month {
-    color: #9da9bb;
+    color: var(--textTertiary);
   }
 
   .react-datepicker__day--keyboard-selected {
@@ -122,7 +121,7 @@ const DateWrapper = styled.div`
   }
 
   .react-datepicker__day--disabled {
-    color: #9da9bb;
+    color: var(--textTertiary);
     cursor: not-allowed;
     &:hover {
       background: none;
@@ -132,23 +131,23 @@ const DateWrapper = styled.div`
 
 const DateHeader = styled(Flex)`
   > div {
-    font-family: Inter, sans-serif;
+    font-family: var(--font-inter), sans-serif;
     ${p_16_semibold};
     text-align: center;
-    color: #1e2134;
+    color: var(--textPrimary);
     flex: 1 1 auto;
   }
   > svg {
     cursor: pointer;
     path {
-      fill: #506176;
+      fill: var(--textSecondary);
     }
   }
 `;
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 16px 0;
 `;
 
@@ -165,9 +164,8 @@ const TimeWrapper = styled.div`
   position: absolute;
   right: 0;
   padding: 24px;
-  background: #ffffff;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.06),
-    0px 0.751293px 8px rgba(26, 33, 44, 0.04);
+  background: var(--fillBgPrimary);
+  box-shadow: var(--shadowPopup);
 `;
 
 const TimeHeaderWrapper = styled(FlexBetween)`
@@ -175,10 +173,10 @@ const TimeHeaderWrapper = styled(FlexBetween)`
   white-space: nowrap;
   > :first-child {
     font-weight: 600;
-    color: #1e2134;
+    color: var(--textPrimary);
   }
   > :last-child {
-    color: #9da9bb;
+    color: var(--textTertiary);
     font-size: 14px;
   }
 `;
@@ -188,9 +186,9 @@ const TimeInputWrapper = styled(FlexBetween)`
   padding: 12px 4px;
   width: 280px;
   height: 48px;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--strokeActionDefault);
   ${p_14_normal};
-  background: #fbfcfe;
+  background: var(--fillBgSecondary);
 `;
 
 const TimeInput = styled.input`
diff --git a/next/components/datetime.js b/next/components/datetime.js
index 29eb208f..bb315645 100644
--- a/next/components/datetime.js
+++ b/next/components/datetime.js
@@ -7,8 +7,8 @@ const Wrapper = styled.div`
   gap: 8px;
   align-items: center;
   padding: 12px 16px;
-  background: #fbfcfe;
-  border: 1px solid #e2e8f0;
+  background: var(--fillBgSecondary);
+  border: 1px solid var(--strokeActionDefault);
   ${p_14_normal};
 `;
 
diff --git a/next/components/header.js b/next/components/header.js
index 3926df0d..9a67f46d 100644
--- a/next/components/header.js
+++ b/next/components/header.js
@@ -1,50 +1,25 @@
 import styled from "styled-components";
-import { useRef } from "react";
 import Link from "next/link";
-import { useOnClickOutside } from "frontedUtils/hooks";
 import Account from "./account";
-import {
-  p_12_normal,
-  p_16_semibold,
-  p_18_semibold,
-} from "../styles/textStyles";
+import { p_12_normal, p_18_semibold } from "../styles/textStyles";
 import { useRouter } from "next/router";
-import { useDispatch, useSelector } from "react-redux";
-import {
-  setShowHeaderMenu,
-  showHeaderMenuSelector,
-} from "../store/reducers/showConnectSlice";
 import { Header as OsnHeader } from "@osn/common-ui";
-import { ReactComponent as Plus } from "../public/imgs/icons/plus.svg";
-import { ReactComponent as Discussions } from "../public/imgs/icons/discussions.svg";
-import { Flex } from "@osn/common-ui";
-import Menu from "@/components/menu";
 import NotificationBell from "./notification/bell";
 import { ReactComponent as CaretRight } from "/public/imgs/icons/caret-right-s.svg";
+import { SystemApps } from "@osn/icons/opensquare";
+import LogoProductVotingLight from "@osn/icons/src/opensquare/logoProductVotingLight.png";
+import LogoProductVotingDark from "@osn/icons/src/opensquare/logoProductVotingDark.png";
+import { cn } from "@osn/common-ui";
 
 const CaretRightIcon = styled(CaretRight)`
   margin-left: 16px;
 `;
 
-const ContentWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  > svg {
-    margin: 20px -20px;
-    @media screen and (min-width: 800px) {
-      display: none;
-    }
-  }
-`;
-
 const AppWrapper = styled.div`
   display: flex;
   align-items: center;
   ${p_18_semibold};
-  height: 36px;
+  /* height: 36px; */
 
   cursor: pointer;
 
@@ -53,14 +28,6 @@ const AppWrapper = styled.div`
       display: flex;
       flex-wrap: wrap;
     }
-    .onHoverReverse {
-      transform: rotate(180deg);
-    }
-  }
-
-  > img {
-    width: 24px;
-    margin-right: 8px;
   }
 
   span {
@@ -80,9 +47,7 @@ const HoverMenu = styled.div`
   z-index: 1;
   top: 60px;
   width: 360px;
-  box-shadow: 0 4px 31px rgba(26, 33, 44, 0.06),
-    0px 0.751293px 8px rgba(26, 33, 44, 0.04);
-  background: white;
+  background-color: var(--fillBgPrimary);
 `;
 
 const MenuItem = styled.a`
@@ -101,106 +66,27 @@ const MenuItem = styled.a`
   }
   span {
     ${p_12_normal};
-    color: #a1a8b3;
-  }
-`;
-
-const HeaderItemWrapper = styled.div`
-  display: flex;
-  gap: 32px;
-
-  @media screen and (max-width: 800px) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100vw;
-    z-index: 1;
-    position: absolute;
-    top: 68px;
-    left: 0;
-    right: 0;
-  }
-  background-color: white;
-`;
-
-const SecondaryHeaderItemWrapper = styled(HeaderItemWrapper)`
-  @media screen and (min-width: 800px) {
-    display: none;
+    color: var(--textTertiary);
   }
 `;
 
-const IconWrapper = styled.div`
-  display: none;
-  @media screen and (max-width: 800px) {
-    display: flex;
-    cursor: pointer;
-  }
-`;
-
-const ExternalLinkWrapper = styled(Flex)`
-  gap: 32px;
-  @media screen and (max-width: 800px) {
-    display: none;
-  }
-`;
-
-const ExternalLink = styled.a`
-  ${p_16_semibold};
-  color: #506176;
-  display: none;
-  @media screen and (min-width: 800px) {
-    display: flex;
-  }
-  cursor: pointer;
-
-  svg {
-    margin-right: 8px;
-  }
-
-  &:hover {
-    color: #506176;
-  }
-`;
-
-const InternalLink = ExternalLink;
-
-const AccountAndBell = styled.div`
-  display: flex;
-  gap: 16px;
-`;
-
 export default function Header({ networks }) {
-  const dispatch = useDispatch();
-  const showMenu = useSelector(showHeaderMenuSelector);
-
-  const ref = useRef();
-  useOnClickOutside(ref, (event) => {
-    // connect modal is at body level, doesn't contained in the <Header/>, so exclude manually
-    if (document?.querySelector(".modals")?.contains(event.target)) {
-      return;
-    }
-    dispatch(setShowHeaderMenu(false));
-  });
   const router = useRouter();
   const isHomePage = router.pathname === "/";
 
   return (
     <OsnHeader
-      logoRender={(logo) => (
-        <Link href="/" passHref>
-          {logo}
-        </Link>
-      )}
-    >
-      <ContentWrapper ref={ref}>
+      className="z-50"
+      prefix={
         <AppWrapper>
-          <span>Voting</span>
+          <SystemApps className="text-textSecondary mr-4" />
+          <img src={LogoProductVotingLight.src} className="dark:hidden h-10" />
           <img
-            className="onHoverReverse"
-            src="/imgs/icons/caret-down-s.svg"
-            alt=""
+            src={LogoProductVotingDark.src}
+            className="hidden dark:block h-10"
           />
-          <HoverMenu className="hoverMenu">
+
+          <HoverMenu className="hoverMenu shadow-shadowPopup">
             <MenuItem href="/">
               <img src="/imgs/icons/voting.svg" alt="" />
               <p>Off-chain Voting</p>
@@ -218,45 +104,39 @@ export default function Header({ networks }) {
             </MenuItem>
           </HoverMenu>
         </AppWrapper>
-        <IconWrapper
-          onClick={() => {
-            dispatch(setShowHeaderMenu(!showMenu));
-          }}
-        >
-          <img
-            src={showMenu ? "/imgs/icons/close.svg" : "/imgs/icons/menu.svg"}
-            alt=""
-          />
-        </IconWrapper>
-        <HeaderItemWrapper>
-          {isHomePage && (
-            <ExternalLinkWrapper>
-              <Link href="/space/new" passHref legacyBehavior>
-                <InternalLink>
-                  <Plus />
-                  Add a Space
-                </InternalLink>
-              </Link>
-              <ExternalLink
-                target="_blank"
-                href="https://github.com/opensquare-network/collaboration/discussions"
-              >
-                <Discussions />
-                Discussions
-              </ExternalLink>
-            </ExternalLinkWrapper>
+      }
+      logoRender={(logo) => (
+        <Link href="/" passHref>
+          {logo}
+        </Link>
+      )}
+      links={[
+        isHomePage && {
+          className: "max-lg:hidden max-sm:inline-block",
+          content: <Link href="/space/new">Add a Space</Link>,
+        },
+        {
+          content: (
+            <Link
+              target="_blank"
+              href="https://github.com/opensquare-network/collaboration/discussions"
+            >
+              Discussions
+            </Link>
+          ),
+        },
+      ].filter(Boolean)}
+      connectButton={
+        <div
+          className={cn(
+            "flex items-center gap-x-4",
+            "max-sm:w-full max-sm:flex-col",
           )}
-          <AccountAndBell>
-            <Account networks={networks} />
-            <NotificationBell />
-          </AccountAndBell>
-        </HeaderItemWrapper>
-        {showMenu && (
-          <SecondaryHeaderItemWrapper>
-            <Menu />
-          </SecondaryHeaderItemWrapper>
-        )}
-      </ContentWrapper>
-    </OsnHeader>
+        >
+          <Account networks={networks} />
+          <NotificationBell />
+        </div>
+      }
+    ></OsnHeader>
   );
 }
diff --git a/next/components/input.js b/next/components/input.js
index 41112e7a..a5b40383 100644
--- a/next/components/input.js
+++ b/next/components/input.js
@@ -4,18 +4,18 @@ import { p_14_normal } from "../styles/textStyles";
 const styledInput = styled.input`
   all: unset;
   padding: 12px 16px;
-  background: #fbfcfe;
-  border-bottom: 1px solid #e2e8f0;
+  background: var(--fillBgSecondary);
+  border-bottom: 1px solid var(--strokeActionDefault);
   :hover,
   :focus,
   :active {
-    border-color: #b7c0cc;
+    border-color: var(--strokeActionActive);
   }
   ${p_14_normal};
   display: block;
-  color: #1e2134;
+  color: var(--textPrimary);
   ::placeholder {
-    color: #9da9bb;
+    color: var(--textTertiary);
   }
   ::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
diff --git a/next/components/layout.js b/next/components/layout.js
index aa8bd4bd..db007f05 100644
--- a/next/components/layout.js
+++ b/next/components/layout.js
@@ -13,7 +13,6 @@ import NotificationMonitor from "./notification/monitor";
 
 const Wrapper = styled.div`
   min-height: 100vh;
-  width: 100vw;
   overflow: hidden;
   display: flex;
   flex-direction: column;
diff --git a/next/components/listInfo/details.js b/next/components/listInfo/details.js
index 478b50d1..a5a03eed 100644
--- a/next/components/listInfo/details.js
+++ b/next/components/listInfo/details.js
@@ -33,7 +33,7 @@ const LogoName = styled.div`
 
 const LogoSymbol = styled.div`
   ${p_14_normal};
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const DetailsWrapper = styled.div`
@@ -62,7 +62,7 @@ const DetailsItem = styled.div`
 
 const DetailsLabel = styled.span`
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 const DetailsValue = styled(FlexBetween)`
diff --git a/next/components/listInfo/index.js b/next/components/listInfo/index.js
index 16b3c79f..7a4da5e1 100644
--- a/next/components/listInfo/index.js
+++ b/next/components/listInfo/index.js
@@ -25,7 +25,7 @@ const LogoName = styled.div`
 
 const LogoSymbol = styled.div`
   ${p_14_normal};
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const AboutItem = styled.div`
@@ -52,25 +52,25 @@ const AboutName = styled.div`
 
 const AboutDetail = styled.div`
   ${p_14_normal};
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const StrategyAboutDetail = styled.span`
   ${p_14_normal};
-  color: #a1a8b3;
+  color: var(--textTertiary);
   max-width: 240px;
 `;
 
 const AboutDivider = styled.div`
   width: 1px;
   height: 16px;
-  background: #e2e8f0;
+  background: var(--fillBgBrandDisable);
   margin: 0 40px;
 `;
 
 const ChainIconsWrapper = styled.div`
   ${p_14_normal};
-  color: #a1a8b3;
+  color: var(--textTertiary);
   display: flex;
 `;
 
diff --git a/next/components/listTab.js b/next/components/listTab.js
index 40b0bda4..dd459cde 100644
--- a/next/components/listTab.js
+++ b/next/components/listTab.js
@@ -4,7 +4,7 @@ import { ReactComponent as QuestionMark } from "../public/imgs/icons/question-ma
 import { LIST_TAB_ITEMS } from "frontedUtils/constants";
 import { p_16_semibold } from "../styles/textStyles";
 import { useRouter } from "next/router";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import { Flex, FlexBetween } from "@osn/common-ui";
 
 const Wrapper = styled(FlexBetween)`
@@ -28,6 +28,9 @@ const Wrapper = styled(FlexBetween)`
 `;
 
 const Item = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
   @media screen and (max-width: 800px) {
     position: relative;
   }
@@ -41,19 +44,15 @@ const Item = styled.div`
   ${(p) =>
     p.active &&
     css`
-      border-bottom: 3px solid #04d2c5;
+      border-bottom: 3px solid var(--strokeBgBrandSecondary);
       padding-bottom: 17px;
     `}
-  > div:last-child {
-    margin-top: 4px;
-    margin-left: 4px;
-  }
 `;
 
 const NewPostLink = styled(Flex)`
   cursor: pointer;
   ${p_16_semibold};
-  color: #04d2c5;
+  color: var(--textBrandSecondary);
   margin-left: 40px;
   > img {
     width: 24px;
diff --git a/next/components/logoUploader/index.js b/next/components/logoUploader/index.js
index b322c11e..ef994a93 100644
--- a/next/components/logoUploader/index.js
+++ b/next/components/logoUploader/index.js
@@ -13,9 +13,9 @@ const Wrapper = styled.div`
   left: 0px;
   top: 0px;
 
-  background: #fbfcfe;
+  background: var(--fillBgSecondary);
 
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
   border-radius: 50%;
   overflow: hidden;
 `;
diff --git a/next/components/logoUploader/upload.svg b/next/components/logoUploader/upload.svg
index ecbe2e8c..f1457514 100644
--- a/next/components/logoUploader/upload.svg
+++ b/next/components/logoUploader/upload.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13752_58770)">
-<path d="M3 19H21V21H3V19ZM13 5.828V17H11V5.828L4.929 11.9L3.515 10.486L12 2L20.485 10.485L19.071 11.899L13 5.83V5.828Z" fill="#A1A8B3"/>
+<path d="M3 19H21V21H3V19ZM13 5.828V17H11V5.828L4.929 11.9L3.515 10.486L12 2L20.485 10.485L19.071 11.899L13 5.83V5.828Z" fill="var(--textTertiary, #A1A8B3)"/>
 </g>
 <defs>
 <clipPath id="clip0_13752_58770">
diff --git a/next/components/main.js b/next/components/main.js
index 0c089e6c..addb68e3 100644
--- a/next/components/main.js
+++ b/next/components/main.js
@@ -15,8 +15,8 @@ const Background = styled.div`
   top: 0;
   width: 100%;
   height: ${(p) => p.bgHeight};
-  background: #ffffff;
-  border-bottom: 1px solid #f0f3f8;
+  background: var(--fillBgPrimary);
+  border-bottom: 1px solid var(--strokeBorderDefault);
 `;
 
 const ChildrenWrapper = styled.div`
diff --git a/next/components/menu.js b/next/components/menu.js
index 235cd3d3..295e7e71 100644
--- a/next/components/menu.js
+++ b/next/components/menu.js
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { shadow_200 } from "../styles/globalCss";
 import { useSelector } from "react-redux";
 import { showHeaderMenuSelector } from "../store/reducers/showConnectSlice";
 import { p_14_medium } from "../styles/textStyles";
@@ -13,9 +12,9 @@ const MenuWrapper = styled.div`
   position: absolute;
   right: 0;
   top: 100%;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  ${shadow_200};
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardHover);
   padding: 20px;
   padding-bottom: 8px;
   z-index: 1;
@@ -27,7 +26,6 @@ const MenuWrapper = styled.div`
     position: initial;
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: 20px solid white;
   }
 `;
 
@@ -41,10 +39,10 @@ const ItemWrapper = styled.a`
   align-items: center;
   justify-content: space-between;
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
 
   :hover {
-    color: #1e2134;
+    color: var(--textPrimary);
   }
 `;
 
diff --git a/next/components/multiSelect/checked.svg b/next/components/multiSelect/checked.svg
index 15945fdc..98e9c89b 100644
--- a/next/components/multiSelect/checked.svg
+++ b/next/components/multiSelect/checked.svg
@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="16" height="16" fill="#04D2C5"/>
+<rect x="2" y="2" width="16" height="16" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 <path d="M15.1233 6.57617L8.56161 13.1379L5.28076 9.85702" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/next/components/multiSelect/drop.svg b/next/components/multiSelect/drop.svg
index d6c4148f..2a826da5 100644
--- a/next/components/multiSelect/drop.svg
+++ b/next/components/multiSelect/drop.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13769_103321)">
-<path d="M16.1565 14.8434L17.6565 13.3434L11.9996 7.68652L6.34277 13.3434L7.84277 14.8434L11.9996 10.6865L16.1565 14.8434Z" fill="#506176"/>
+<path d="M16.1565 14.8434L17.6565 13.3434L11.9996 7.68652L6.34277 13.3434L7.84277 14.8434L11.9996 10.6865L16.1565 14.8434Z" fill="var(--textSecondary)"/>
 </g>
 <defs>
 <clipPath id="clip0_13769_103321">
diff --git a/next/components/multiSelect/dropdownList.js b/next/components/multiSelect/dropdownList.js
index 2088e423..556732ec 100644
--- a/next/components/multiSelect/dropdownList.js
+++ b/next/components/multiSelect/dropdownList.js
@@ -10,10 +10,9 @@ const Wrapper = styled.div`
   align-items: flex-start;
   padding: 8px 0px;
 
-  background: #ffffff;
+  background: var(--fillBgPrimary);
 
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.06),
-    0px 0.751293px 8px rgba(26, 33, 44, 0.04);
+  box-shadow: var(--shadowCardDefault);
 `;
 
 export default function DropdownList({
diff --git a/next/components/multiSelect/dropdownOption.js b/next/components/multiSelect/dropdownOption.js
index 18e2e2ed..680d58fa 100644
--- a/next/components/multiSelect/dropdownOption.js
+++ b/next/components/multiSelect/dropdownOption.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   width: 100%;
 
   :hover {
-    background: #f0f3f8;
+    background-color: var(--fillBgTertiary);
   }
 `;
 
diff --git a/next/components/multiSelect/selectedItems.js b/next/components/multiSelect/selectedItems.js
index 61133e49..2feb08e5 100644
--- a/next/components/multiSelect/selectedItems.js
+++ b/next/components/multiSelect/selectedItems.js
@@ -7,8 +7,8 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: #ffffff;
-  border: 1px solid #b7c0cc;
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeActionActive);
   gap: 8px;
 `;
 
@@ -22,7 +22,7 @@ const Text = styled.span`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 const DropIcon = styled.div`
diff --git a/next/components/multiSelect/unchecked.svg b/next/components/multiSelect/unchecked.svg
index 05e9acc2..d873df12 100644
--- a/next/components/multiSelect/unchecked.svg
+++ b/next/components/multiSelect/unchecked.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="14" height="14" stroke="#A1A8B3" stroke-width="2"/>
+<rect x="3" y="3" width="14" height="14" stroke="var(--textTertiary, #A1A8B3)" stroke-width="2"/>
 </svg>
diff --git a/next/components/newSpace/backButton/back.svg b/next/components/newSpace/backButton/back.svg
index 7e098c2c..fd6a1799 100644
--- a/next/components/newSpace/backButton/back.svg
+++ b/next/components/newSpace/backButton/back.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13769_96379)">
-<path d="M6.828 11.0007H21V13.0007H6.828L12.192 18.3647L10.778 19.7787L3 12.0007L10.778 4.22266L12.192 5.63666L6.828 11.0007Z" fill="#1E2134"/>
+<path d="M6.828 11.0007H21V13.0007H6.828L12.192 18.3647L10.778 19.7787L3 12.0007L10.778 4.22266L12.192 5.63666L6.828 11.0007Z" fill="var(--textPrimary)"/>
 </g>
 <defs>
 <clipPath id="clip0_13769_96379">
diff --git a/next/components/newSpace/sider/assets.js b/next/components/newSpace/sider/assets.js
index 4bc70801..00c6912d 100644
--- a/next/components/newSpace/sider/assets.js
+++ b/next/components/newSpace/sider/assets.js
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Name, Value } from "./styled";
 import { ChainIcon } from "@osn/common-ui";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
@@ -23,7 +23,7 @@ const Description = styled.div`
   font-size: 14px;
   line-height: 24px;
 
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 const Threshold = styled.span`
@@ -32,7 +32,7 @@ const Threshold = styled.span`
   font-size: 14px;
   line-height: 24px;
 
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export default function Assets({ assets = [] }) {
diff --git a/next/components/newSpace/sider/index.js b/next/components/newSpace/sider/index.js
index e0ea6c90..0ce0643b 100644
--- a/next/components/newSpace/sider/index.js
+++ b/next/components/newSpace/sider/index.js
@@ -27,7 +27,7 @@ const SpaceName = styled.span`
   font-size: 18px;
   line-height: 24px;
   text-align: center;
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 const TokenSymbol = styled.span`
@@ -36,7 +36,7 @@ const TokenSymbol = styled.span`
   font-size: 14px;
   line-height: 24px;
   text-align: center;
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const FlexColumn = styled.div`
diff --git a/next/components/newSpace/sider/logo.js b/next/components/newSpace/sider/logo.js
index 58534663..b3c6495a 100644
--- a/next/components/newSpace/sider/logo.js
+++ b/next/components/newSpace/sider/logo.js
@@ -4,9 +4,9 @@ const Wrapper = styled.div`
   width: 64px;
   height: 64px;
 
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
   border-radius: 50%;
-  background: #fbfcfe;
+  background: var(--fillBgSecondary);
 
   overflow: hidden;
 `;
diff --git a/next/components/newSpace/sider/strategies.js b/next/components/newSpace/sider/strategies.js
index 27ca92d4..ec75d76a 100644
--- a/next/components/newSpace/sider/strategies.js
+++ b/next/components/newSpace/sider/strategies.js
@@ -12,7 +12,7 @@ const Text = styled.span`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 const Items = styled.div`
diff --git a/next/components/newSpace/sider/styled.js b/next/components/newSpace/sider/styled.js
index cbbe5141..e5b1008f 100644
--- a/next/components/newSpace/sider/styled.js
+++ b/next/components/newSpace/sider/styled.js
@@ -5,7 +5,7 @@ export const Name = styled.span`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 export const Value = styled.div`
@@ -13,5 +13,5 @@ export const Value = styled.div`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
diff --git a/next/components/newSpace/step2/asset/assetConfig.js b/next/components/newSpace/step2/asset/assetConfig.js
index 2b283758..160df185 100644
--- a/next/components/newSpace/step2/asset/assetConfig.js
+++ b/next/components/newSpace/step2/asset/assetConfig.js
@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { Flex, Input } from "@osn/common-ui";
 import { FieldWrapper, Title } from "./styled";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
@@ -17,7 +17,7 @@ const MyFieldWrapper = styled(FieldWrapper)`
     ${({ disabled }) =>
       disabled &&
       css`
-        background: #f0f3f8;
+        background-color: var(--fillBgTertiary);
       `}
   }
 `;
diff --git a/next/components/newSpace/step2/asset/assetDetail.js b/next/components/newSpace/step2/asset/assetDetail.js
index 5e1bdc6e..fb38fee9 100644
--- a/next/components/newSpace/step2/asset/assetDetail.js
+++ b/next/components/newSpace/step2/asset/assetDetail.js
@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   > * {
     flex-grow: 1;
     > div {
-      background: #f0f3f8;
+      background-color: var(--fillBgTertiary);
     }
   }
 `;
diff --git a/next/components/newSpace/step2/asset/index.js b/next/components/newSpace/step2/asset/index.js
index a3553f56..1f3caf02 100644
--- a/next/components/newSpace/step2/asset/index.js
+++ b/next/components/newSpace/step2/asset/index.js
@@ -24,7 +24,7 @@ const DeleteWrapper = styled.div`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #ee4444;
+  color: var(--textFeedbackError);
 `;
 
 const MyFieldWrapper = styled(FieldWrapper)`
diff --git a/next/components/newSpace/step2/asset/styled.js b/next/components/newSpace/step2/asset/styled.js
index 0251089f..0abf4682 100644
--- a/next/components/newSpace/step2/asset/styled.js
+++ b/next/components/newSpace/step2/asset/styled.js
@@ -7,13 +7,13 @@ export const FieldWrapper = styled.div`
 `;
 
 export const Title = styled.span`
-  font-family: "Inter";
+  font-family: var(--font-inter);
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
 
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export const Wrapper = styled.div`
diff --git a/next/components/newSpace/step2/newAssetButton/add.svg b/next/components/newSpace/step2/newAssetButton/add.svg
index 7b3b2714..d7b68ad0 100644
--- a/next/components/newSpace/step2/newAssetButton/add.svg
+++ b/next/components/newSpace/step2/newAssetButton/add.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13769_75650)">
-<path d="M10.8552 10.8555V4.26953H13.1448V10.8555H19.7307V13.1451H13.1448V19.731H10.8552V13.1451H4.26929V10.8555H10.8552Z" fill="#04D2C5"/>
+<path d="M10.8552 10.8555V4.26953H13.1448V10.8555H19.7307V13.1451H13.1448V19.731H10.8552V13.1451H4.26929V10.8555H10.8552Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 </g>
 <defs>
 <clipPath id="clip0_13769_75650">
diff --git a/next/components/newSpace/step2/newAssetButton/index.js b/next/components/newSpace/step2/newAssetButton/index.js
index bbb75a19..7748d588 100644
--- a/next/components/newSpace/step2/newAssetButton/index.js
+++ b/next/components/newSpace/step2/newAssetButton/index.js
@@ -13,7 +13,7 @@ const Text = styled.span`
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
-  color: #04d2c5;
+  color: var(--textBrandSecondary);
 `;
 
 export default function NewAssetButton({ onClick = noop }) {
diff --git a/next/components/newSpace/step3/proposalThreshold.js b/next/components/newSpace/step3/proposalThreshold.js
index 73cb96e6..426820ae 100644
--- a/next/components/newSpace/step3/proposalThreshold.js
+++ b/next/components/newSpace/step3/proposalThreshold.js
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { SectionTitle } from "../styled";
 import { Flex, Input } from "@osn/common-ui";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
diff --git a/next/components/newSpace/styled.js b/next/components/newSpace/styled.js
index 957f236a..d2126d8d 100644
--- a/next/components/newSpace/styled.js
+++ b/next/components/newSpace/styled.js
@@ -6,7 +6,7 @@ export const SectionTitle = styled.span`
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
-  color: #1e2134;
+  color: var(--textPrimary);
   margin-bottom: 16px;
 `;
 
@@ -15,7 +15,7 @@ export const Hint = styled.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
 
   > * {
     &::before {
diff --git a/next/components/notification/bell.js b/next/components/notification/bell.js
index c32a6315..d6984fc7 100644
--- a/next/components/notification/bell.js
+++ b/next/components/notification/bell.js
@@ -1,27 +1,12 @@
-import styled from "styled-components";
 import Link from "next/link";
 import { useSelector } from "react-redux";
 import { unreadSelector } from "store/reducers/notificationSlice";
-import { FlexCenter } from "@osn/common-ui";
-import { ReactComponent as NotificationSVG } from "./notification.svg";
-import { ReactComponent as UnreadNotificationSVG } from "./unread-notification.svg";
 import { loginAddressSelector } from "store/reducers/accountSlice";
-
-const Wrapper = styled(FlexCenter)`
-  width: 38px;
-  height: 38px;
-  border: 1px solid #e2e8f0;
-
-  &:hover {
-    border-color: #b7c0cc;
-  }
-
-  cursor: pointer;
-
-  @media screen and (max-width: 800px) {
-    display: none;
-  }
-`;
+import { Button } from "@osn/common-ui";
+import {
+  SystemNotification,
+  SystemNotificationActive,
+} from "@osn/icons/opensquare";
 
 export default function NotificationBell() {
   const address = useSelector(loginAddressSelector);
@@ -32,10 +17,17 @@ export default function NotificationBell() {
   }
 
   return (
-    <Wrapper>
-      <Link href="/notifications" passHref>
-        {unread ? <UnreadNotificationSVG /> : <NotificationSVG />}
-      </Link>
-    </Wrapper>
+    <Link href="/notifications" className="max-sm:w-full">
+      <Button className="px-2 w-full max-sm:px-4">
+        <span className="w-full inline-flex items-center">
+          {unread ? (
+            <SystemNotificationActive className="text-textSecondary" />
+          ) : (
+            <SystemNotification className="text-textSecondary" />
+          )}
+          <span className="sm:hidden ml-2">Notification</span>
+        </span>
+      </Button>
+    </Link>
   );
 }
diff --git a/next/components/notification/listLoader.js b/next/components/notification/listLoader.js
deleted file mode 100644
index df2417c4..00000000
--- a/next/components/notification/listLoader.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import { useWindowSize } from "frontedUtils/hooks";
-import ContentLoader from "react-content-loader";
-import styled from "styled-components";
-
-const LoaderWrapper = styled.div`
-  svg {
-    background: white;
-    box-shadow: 0 4px 31px rgba(26, 33, 44, 0.04),
-      0 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
-    margin-bottom: 15px;
-  }
-`;
-
-const MyLoader = (props) => {
-  const windowSize = useWindowSize();
-  const padding = windowSize.width > 900 ? 64 : 32;
-  const loaderWidth =
-    windowSize.width > 1144 ? 1080 : windowSize.width - padding;
-
-  if (isNaN(loaderWidth)) {
-    return null;
-  }
-  return (
-    <ContentLoader
-      speed={2}
-      width="100%"
-      height={72}
-      viewBox={`0 0 ${loaderWidth} 72`}
-      backgroundColor="#f3f3f3"
-      foregroundColor="#EFF3F9"
-      {...props}
-    >
-      <rect
-        x="24"
-        y="28"
-        rx="3"
-        ry="3"
-        width={loaderWidth - padding * 1.5}
-        height="16"
-      />
-    </ContentLoader>
-  );
-};
-
-const ListLoader = ({ style = {} }) => {
-  return (
-    <LoaderWrapper style={style}>
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-      <MyLoader />
-    </LoaderWrapper>
-  );
-};
-
-export default ListLoader;
diff --git a/next/components/notification/notification.svg b/next/components/notification/notification.svg
deleted file mode 100644
index b46a88f7..00000000
--- a/next/components/notification/notification.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 17H22V19H2V17H4V10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10V17ZM18 17V10C18 8.4087 17.3679 6.88258 16.2426 5.75736C15.1174 4.63214 13.5913 4 12 4C10.4087 4 8.88258 4.63214 7.75736 5.75736C6.63214 6.88258 6 8.4087 6 10V17H18ZM9 21H15V23H9V21Z" fill="#506176"/>
-</svg>
diff --git a/next/components/notification/notificationItem.js b/next/components/notification/notificationItem.js
index d1d8b733..2559c897 100644
--- a/next/components/notification/notificationItem.js
+++ b/next/components/notification/notificationItem.js
@@ -34,10 +34,9 @@ const Head = styled(Flex)`
   padding: 24px;
   gap: 24px;
 
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
-    0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
 
   @media screen and (max-width: ${MOBILE_SIZE}px) {
     display: block;
diff --git a/next/components/notification/notificationTabs.js b/next/components/notification/notificationTabs.js
index cfab4f69..27924053 100644
--- a/next/components/notification/notificationTabs.js
+++ b/next/components/notification/notificationTabs.js
@@ -1,12 +1,12 @@
 // copied from qa
 
 import styled from "styled-components";
-import { Tabs, Container } from "@osn/common-ui";
+import { Tabs } from "@osn/common-ui";
 import { MOBILE_SIZE } from "@osn/constants";
 import { netural_grey_200 } from "@osn/common-ui/es/styles/colors";
 
 const TabsWrapper = styled.div`
-  background-color: #fff;
+  background-color: var(--fillBgPrimary);
   padding-top: 40px;
   border-bottom: 1px solid ${netural_grey_200};
   @media screen and (max-width: ${MOBILE_SIZE}px) {
@@ -20,9 +20,7 @@ const TabsWrapper = styled.div`
 export default function NotificationTabs({ items, extra, value, setValue }) {
   return (
     <TabsWrapper>
-      <Container>
-        <Tabs items={items} value={value} setValue={setValue} extra={extra} />
-      </Container>
+      <Tabs items={items} value={value} setValue={setValue} extra={extra} />
     </TabsWrapper>
   );
 }
diff --git a/next/components/notification/unread-notification.svg b/next/components/notification/unread-notification.svg
deleted file mode 100644
index 6351add2..00000000
--- a/next/components/notification/unread-notification.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 10.917V17H22V19H2V17H4V10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C12.5764 2 13.1465 2.06221 13.7011 2.18292C13.3887 2.76932 13.1708 3.4137 13.0677 4.09574C12.7177 4.03245 12.3605 4 12 4C10.4087 4 8.88258 4.63214 7.75736 5.75736C6.63214 6.88258 6 8.4087 6 10V17H18V10.917C18.3252 10.9716 18.6593 11 19 11C19.3407 11 19.6748 10.9716 20 10.917Z" fill="#A1A8B3"/>
-<path d="M15 23V21H9V23H15Z" fill="#A1A8B3"/>
-<path d="M22 5C22 6.65685 20.6569 8 19 8C17.3431 8 16 6.65685 16 5C16 3.34315 17.3431 2 19 2C20.6569 2 22 3.34315 22 5Z" fill="#EE4444"/>
-</svg>
diff --git a/next/components/option.js b/next/components/option.js
index a815c8a4..832b7eb7 100644
--- a/next/components/option.js
+++ b/next/components/option.js
@@ -1,44 +1,24 @@
-import styled from "styled-components";
-import { Button as OsnButton, Flex } from "@osn/common-ui";
-import { css } from "styled-components";
-import { p_14_medium } from "@osn/common-ui/es/styles/textStyles";
-import {
-  primary_purple_500,
-  text_dark_accessory,
-} from "@osn/common-ui/es/styles/colors";
-
-const Button = styled(OsnButton)`
-  padding: 12px 24px;
-  ${(p) =>
-    p.active &&
-    css`
-      border-color: ${primary_purple_500} !important;
-      color: ${primary_purple_500};
-    `}
-`;
-
-const Content = styled(Flex)`
-  flex-grow: 1;
-  ${p_14_medium};
-  position: relative;
-  justify-content: center;
-  padding: 0 48px;
-  ${(p) => css`
-    ::before {
-      position: absolute;
-      left: 0;
-      content: "#${p.index}";
-      color: ${p.active ? primary_purple_500 : text_dark_accessory};
-    }
-  `}
-`;
+import { Button, cn } from "@osn/common-ui";
 
 function Option({ children, index, active, ...props }) {
   return (
-    <Button block active={active} {...props}>
-      <Content active={active} index={index}>
-        {children}
-      </Content>
+    <Button
+      block
+      className={cn(active && "border-textBrandPrimary text-textBrandPrimary")}
+      {...props}
+    >
+      <span className="w-full inline-flex items-center">
+        <span
+          className={cn(
+            "float-left",
+            "text-textTertiary",
+            active && "text-textBrandPrimary",
+          )}
+        >
+          #{index}
+        </span>
+        <span className="grow">{children}</span>
+      </span>
     </Button>
   );
 }
diff --git a/next/components/popup/index.js b/next/components/popup/index.js
index f9fc76bb..721fc059 100644
--- a/next/components/popup/index.js
+++ b/next/components/popup/index.js
@@ -18,13 +18,13 @@ const PopupWrapper = styled.div`
 
 const Pop = styled.div`
   position: relative;
-  background: #ffffff;
+  background: var(--fillBgPrimary);
   max-width: 320px;
   min-width: ${(p) => (p.noMinWidth ? "none" : "120px")};
   padding: 16px;
   font-size: 12px;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--textPrimaryContrast);
   word-wrap: break-word;
   text-align: left;
 `;
@@ -35,7 +35,7 @@ const Triangle = styled.div`
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid #ffffff;
+  border-top: 6px solid var(--fillBgPrimary);
   left: 50%;
   top: 100%;
   transform: translateX(-50%);
@@ -49,15 +49,13 @@ const ChildrenWrapper = styled.div`
       display: flex;
     }
   }
-  filter: drop-shadow(0px 4px 31px rgba(26, 33, 44, 0.06))
-    drop-shadow(0px 0.751293px 8px rgba(26, 33, 44, 0.04));
 `;
 
 const TitleWrapper = styled.div`
   font-weight: bold;
   font-size: 12px;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--textPrimary);
   white-space: nowrap;
 `;
 
@@ -67,7 +65,7 @@ export default function Popup({ content, children, title, noMinWidth }) {
       {children}
       {content && (
         <PopupWrapper>
-          <Pop noMinWidth={noMinWidth}>
+          <Pop noMinWidth={noMinWidth} className="shadow-shadowPopup">
             {title && <TitleWrapper>{title}</TitleWrapper>}
             {content}
             <Triangle />
diff --git a/next/components/post.js b/next/components/post.js
index d498b8e6..56222f83 100644
--- a/next/components/post.js
+++ b/next/components/post.js
@@ -4,7 +4,6 @@ import Author from "./author";
 import InternalLink from "components/internalLink";
 import HardLink from "components/hardLink";
 import { p_16_semibold } from "styles/textStyles";
-import { shadow_100, shadow_200 } from "styles/globalCss";
 import StatusTag from "./statusTag";
 import PostTime from "./postTime";
 import { p_24 } from "../styles/paddings";
@@ -17,15 +16,15 @@ import { p_14_medium } from "../styles/componentCss";
 import { getSpaceIconUrl } from "frontedUtils/space";
 
 const Wrapper = styled.div`
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  ${shadow_100}
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
   ${p_24};
 
   :hover {
-    border-color: #e2e8f0;
+    border-color: var(--strokeActionDefault);
 
-    ${shadow_200}
+    box-shadow: var(--shadowCardHover);
     .icon > svg {
       display: block;
     }
@@ -33,7 +32,7 @@ const Wrapper = styled.div`
 `;
 
 const Title = styled.h3`
-  font-family: Inter, serif;
+  font-family: var(--font-inter), serif;
   font-style: normal;
   display: inline-block;
   ${p_16_semibold};
@@ -42,7 +41,7 @@ const Title = styled.h3`
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 16px 0;
 `;
 
@@ -52,7 +51,7 @@ const InfoWrapper = styled(FlexBetween)`
 
 const LeftWrapper = styled(Flex)`
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
   flex-wrap: wrap;
 
   > :not(:first-child)::before {
@@ -71,7 +70,7 @@ const SpaceName = styled.a`
   text-transform: capitalize;
   margin-left: 6px;
   ${p_14_medium};
-  color: #1e2134 !important;
+  color: var(--textPrimary) !important;
 
   :hover {
     text-decoration-line: underline;
diff --git a/next/components/postAddress.js b/next/components/postAddress.js
index 4c6bb0eb..9a917a69 100644
--- a/next/components/postAddress.js
+++ b/next/components/postAddress.js
@@ -34,7 +34,7 @@ const FETCH_BALANCE_ERROR =
 
 const Wrapper = styled.div`
   padding: 20px;
-  background: #fbfcfe;
+  background: var(--fillBgSecondary);
   ${(p) =>
     p.size === "small" &&
     css`
@@ -77,15 +77,15 @@ const InputWrapper = styled.div`
 
 const Input = styled.input`
   all: unset;
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
+  background-color: var(--fillBgPrimary);
+  border: 1px solid var(--strokeActionDefault);
   padding: 23px 47px 23px 71px;
   ${p_14_normal};
   ::placeholder {
-    color: #a1a8b3;
+    color: var(--textTertiary);
   }
   :focus {
-    border-color: #b7c0cc;
+    border-color: var(--strokeActionActive);
   }
   ${(p) =>
     p.isLoading &&
@@ -105,8 +105,8 @@ const Input = styled.input`
 
 const ItemWrapper = styled(Flex)`
   padding: 11px 15px;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
+  border: 1px solid var(--strokeActionDefault);
+  background: var(--fillBgPrimary);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -131,7 +131,7 @@ const DetailWrapper = styled.div`
   > :last-child {
     font-size: 14px;
     line-height: 24px;
-    color: #506176;
+    color: var(--textSecondary);
   }
   ${(p) =>
     p.size === "small" &&
diff --git a/next/components/postCreate/BalanceRow.js b/next/components/postCreate/BalanceRow.js
index 1b06e052..5be8776e 100644
--- a/next/components/postCreate/BalanceRow.js
+++ b/next/components/postCreate/BalanceRow.js
@@ -1,6 +1,6 @@
 import { ReactComponent as Loading } from "../../public/imgs/icons/loading.svg";
 import Row from "@/components/row";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import { bigNumber2LocaleWithAbbr, toPrecision } from "../../frontedUtils";
 import { memo } from "react";
 import BigNumber from "bignumber.js";
diff --git a/next/components/postCreate/choice.js b/next/components/postCreate/choice.js
index 4102d4e6..70da83fa 100644
--- a/next/components/postCreate/choice.js
+++ b/next/components/postCreate/choice.js
@@ -7,15 +7,15 @@ import { FlexBetween } from "@osn/common-ui";
 
 const Wrapper = styled(FlexBetween)`
   padding: 12px 24px;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
   ${p_14_medium};
   :hover {
-    border-color: #b7c0cc;
+    border-color: var(--strokeActionActive);
   }
   ${(p) =>
     p.focus &&
     css`
-      border-color: #b7c0cc;
+      border-color: var(--strokeActionActive);
     `}
 `;
 
@@ -26,7 +26,7 @@ const Input = styled.input`
   min-width: 0;
   text-align: center;
   ${p_14_medium};
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 const SubstractButtonWrapper = styled.div`
@@ -37,9 +37,9 @@ const SubstractButtonWrapper = styled.div`
 const SubstractButton = styled(Substract)`
   flex: 0 0 auto;
   cursor: pointer;
-  fill: #9da9bb;
+  fill: var(--textTertiary);
   :hover {
-    fill: #2e343d;
+    fill: var(--textPrimary);
   }
 `;
 
diff --git a/next/components/postCreate/choices.js b/next/components/postCreate/choices.js
index e2c2c75c..8502124f 100644
--- a/next/components/postCreate/choices.js
+++ b/next/components/postCreate/choices.js
@@ -5,10 +5,9 @@ import { Button } from "@osn/common-ui";
 import { p_16_semibold } from "../../styles/textStyles";
 
 const Wrapper = styled.div`
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
-    0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
   padding: 32px;
   @media screen and (max-width: 800px) {
     padding: 20px;
diff --git a/next/components/postCreate/content.js b/next/components/postCreate/content.js
index 6ca64622..b7fd1655 100644
--- a/next/components/postCreate/content.js
+++ b/next/components/postCreate/content.js
@@ -5,10 +5,9 @@ import ToggleText from "@/components/uploadBanner/toggleText";
 import Uploader from "@/components/uploadBanner/uploader";
 
 const Wrapper = styled.div`
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
-    0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
   padding: 32px;
   @media screen and (max-width: 800px) {
     padding: 20px;
diff --git a/next/components/postCreate/information.js b/next/components/postCreate/information.js
index 1c842a0e..f32f34fb 100644
--- a/next/components/postCreate/information.js
+++ b/next/components/postCreate/information.js
@@ -22,7 +22,7 @@ import BalanceRow from "@/components/postCreate/BalanceRow";
 
 const Hint = styled.div`
   margin-top: 4px !important;
-  color: #ee4444;
+  color: var(--textFeedbackError);
 `;
 
 const ProxyVoteWrapper = styled.div`
diff --git a/next/components/postCreate/more.js b/next/components/postCreate/more.js
index a42f042a..b08bd789 100644
--- a/next/components/postCreate/more.js
+++ b/next/components/postCreate/more.js
@@ -22,10 +22,9 @@ import DropdownSelector from "@osn/common-ui/es/DropdownSelector";
 
 const Wrapper = styled.div`
   min-width: 302px;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
-    0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
   padding: 32px;
   @media screen and (max-width: 800px) {
     padding: 20px;
@@ -58,7 +57,7 @@ const DateWrapper = styled.div`
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
 `;
 
 const Snapshot = styled(FlexBetween)`
@@ -67,12 +66,12 @@ const Snapshot = styled(FlexBetween)`
 
 const NetworkName = styled.div`
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
   text-transform: capitalize;
 `;
 
 const TextGrey = styled.span`
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const ChoiceWrapper = styled.div`
@@ -80,7 +79,7 @@ const ChoiceWrapper = styled.div`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export default function More({ onPublish, space }) {
diff --git a/next/components/postDetail/appendants.js b/next/components/postDetail/appendants.js
index ff61078c..0e00623f 100644
--- a/next/components/postDetail/appendants.js
+++ b/next/components/postDetail/appendants.js
@@ -50,7 +50,7 @@ const StyledDividerWrapper = styled(DividerWrapper)`
     font-weight: 500;
   }
   > :nth-child(2) {
-    color: #a1a8b3;
+    color: var(--textTertiary);
   }
 `;
 
@@ -71,7 +71,7 @@ const AddButton = styled(FlexCenter)`
 const EditorWrapper = styled.div``;
 
 const Count = styled.div`
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const MarkdownPreviewWrapper = styled.div`
diff --git a/next/components/postDetail/biasedVotingItem.js b/next/components/postDetail/biasedVotingItem.js
index 8f20560a..bdcc4144 100644
--- a/next/components/postDetail/biasedVotingItem.js
+++ b/next/components/postDetail/biasedVotingItem.js
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import Tooltip from "../tooltip";
+import { Tooltip } from "@osn/common-ui";
 import ValueDisplay from "../valueDisplay";
 
 const Wrapper = styled.div`
@@ -10,7 +10,7 @@ const Wrapper = styled.div`
 `;
 
 const LabelWrapper = styled.div`
-  color: #506176;
+  color: var(--textSecondary);
   position: relative;
   display: flex;
   max-width: 55%;
diff --git a/next/components/postDetail/delegationInfo.js b/next/components/postDetail/delegationInfo.js
index ac2a854d..6a1dc8be 100644
--- a/next/components/postDetail/delegationInfo.js
+++ b/next/components/postDetail/delegationInfo.js
@@ -11,7 +11,7 @@ const Wrapper = styled.div`
   font-size: 14px;
   line-height: 24px;
 
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 export default function DelegationInfo({ delegatee, network }) {
diff --git a/next/components/postDetail/numberHeader.js b/next/components/postDetail/numberHeader.js
index d7e15519..31ab4b00 100644
--- a/next/components/postDetail/numberHeader.js
+++ b/next/components/postDetail/numberHeader.js
@@ -2,7 +2,6 @@ import styled from "styled-components";
 import { memo } from "react";
 
 const Wrapper = styled.h3`
-  font-family: Inter;
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
@@ -11,7 +10,7 @@ const Wrapper = styled.h3`
 
   span {
     margin-left: 4px;
-    color: #a1a8b3;
+    color: var(--textTertiary);
     font-weight: 500;
   }
 `;
diff --git a/next/components/postDetail/panel.js b/next/components/postDetail/panel.js
index 3542501d..004b6269 100644
--- a/next/components/postDetail/panel.js
+++ b/next/components/postDetail/panel.js
@@ -2,10 +2,9 @@ import styled from "styled-components";
 
 const Panel = styled.div`
   padding: 32px;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
-    0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
   @media screen and (max-width: 800px) {
     padding: 20px;
     margin: 0 -20px;
diff --git a/next/components/postDetail/postContent.js b/next/components/postDetail/postContent.js
index b14af15c..faaa37fd 100644
--- a/next/components/postDetail/postContent.js
+++ b/next/components/postDetail/postContent.js
@@ -35,7 +35,7 @@ const LeftWrapper = styled.div`
   display: flex;
   align-items: center;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
   flex-wrap: wrap;
   > :not(:first-child)::before {
     content: "·";
@@ -45,7 +45,7 @@ const LeftWrapper = styled.div`
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 20px 0;
   ${(p) =>
     p.margin &&
@@ -56,7 +56,7 @@ const Divider = styled.div`
 
 const Content = styled.div`
   ${p_14_normal};
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export default function PostContent({ data, space }) {
diff --git a/next/components/postDetail/postDiscussion.js b/next/components/postDetail/postDiscussion.js
index ddceffd4..ab914b35 100644
--- a/next/components/postDetail/postDiscussion.js
+++ b/next/components/postDetail/postDiscussion.js
@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useRouter } from "next/router";
@@ -15,7 +15,6 @@ import {
   removeToast,
 } from "store/reducers/toastSlice";
 import { timeDuration } from "frontedUtils";
-import ExternalLink from "@osn/common-ui/es/ExternalLink";
 import { findNetworkConfig } from "services/util";
 import HeaderWithNumber from "@/components/postDetail/numberHeader";
 import encodeAddressByChain from "../../frontedUtils/chain/addr";
@@ -27,7 +26,7 @@ import {
   MarkdownPreviewer,
   renderMentionIdentityUserPlugin,
 } from "@osn/previewer";
-import { MentionIdentityUser, RichEditor } from "@osn/common-ui";
+import { IpfsSquare, MentionIdentityUser, RichEditor } from "@osn/common-ui";
 import { useSuggestions } from "./suggestions";
 
 const Item = styled.div`
@@ -38,13 +37,12 @@ const DividerWrapper = styled.div`
   display: flex;
   align-items: center;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
   > :not(:first-child) {
     ::before {
       content: "·";
       font-size: 14px;
       line-height: 24px;
-      color: #e3e7ed;
       margin: 0 8px;
     }
   }
@@ -53,7 +51,7 @@ const DividerWrapper = styled.div`
 const ContentWrapper = styled.div`
   margin: 8px 0 0 28px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 `;
 
 const Content = styled.div`
@@ -73,23 +71,9 @@ const InfoWrapper = styled.div`
   justify-content: space-between;
 `;
 
-const Square = styled.div`
-  width: 20px;
-  height: 20px;
-  background: url("/imgs/icons/ipfs.svg");
-  ${(p) =>
-    !p.noHover &&
-    css`
-      cursor: pointer;
-      :hover {
-        background: url("/imgs/icons/ipfs-active.svg");
-      }
-    `}
-`;
-
 const NoCommentWrapper = styled.div`
   height: 104px;
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 
   > div {
     border: none;
@@ -194,15 +178,12 @@ export default function PostDiscussion({
               />
               <div>{timeDuration(item.createdAt)}</div>
             </DividerWrapper>
-            {item?.pinHash ? (
-              <ExternalLink
-                href={`${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${item.pinHash}`}
-              >
-                <Square />
-              </ExternalLink>
-            ) : (
-              <Square noHover={true} />
-            )}
+            <IpfsSquare
+              href={
+                item?.pinHash &&
+                `${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${item.pinHash}`
+              }
+            />
           </InfoWrapper>
           <ContentWrapper>
             <Content>
diff --git a/next/components/postDetail/postInfo.js b/next/components/postDetail/postInfo.js
index 5de60e5b..25cbf320 100644
--- a/next/components/postDetail/postInfo.js
+++ b/next/components/postDetail/postInfo.js
@@ -4,7 +4,7 @@ import moment from "moment";
 import ExternalLink from "@osn/common-ui/es/ExternalLink";
 import { capitalize, getExplorer } from "../../frontedUtils";
 import { ChainIcon } from "@osn/common-ui";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import Panel from "@/components/postDetail/panel";
 import SideSectionTitle from "@/components/sideBar/sideSectionTitle";
 import AssetList from "../assetList";
@@ -18,7 +18,7 @@ const Wrapper = styled(Panel)`
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
@@ -31,7 +31,7 @@ const InfoItem = styled.div`
   line-height: 24px;
 
   > :first-child {
-    color: #506176;
+    color: var(--textSecondary);
     margin-right: 8px;
   }
 
@@ -53,7 +53,7 @@ const TimestampItem = styled.div`
   line-height: 24px;
 
   > :first-child {
-    color: #506176;
+    color: var(--textSecondary);
   }
 
   span {
diff --git a/next/components/postDetail/postVote.js b/next/components/postDetail/postVote.js
index 17035bff..d8b36673 100644
--- a/next/components/postDetail/postVote.js
+++ b/next/components/postDetail/postVote.js
@@ -37,7 +37,7 @@ import isNil from "lodash.isnil";
 import { proposalStatus } from "../../frontedUtils/consts/proposal";
 import { extensionCancelled } from "../../frontedUtils/consts/extension";
 import { useTerminate } from "./terminate";
-import Tooltip from "../tooltip";
+import { Tooltip } from "@osn/common-ui";
 import VoteBalanceDetail from "./VoteBalanceDetail";
 import DelegationInfo from "./delegationInfo";
 
@@ -70,7 +70,7 @@ const Title = styled.div`
     font-size: 12px;
     line-height: 16px;
     text-align: right;
-    color: #a1a8b3;
+    color: var(--textTertiary);
     text-transform: capitalize;
   }
 `;
diff --git a/next/components/postDetail/postVotes.js b/next/components/postDetail/postVotes.js
index b48e06ce..d26be333 100644
--- a/next/components/postDetail/postVotes.js
+++ b/next/components/postDetail/postVotes.js
@@ -15,7 +15,7 @@ const PaginationWrapper = styled.div`
 
 const NoVoteWrapper = styled.div`
   height: 104px;
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 
   > div {
     border: none;
diff --git a/next/components/postDetail/postVotesItem.js b/next/components/postDetail/postVotesItem.js
index e792856f..ec5b980a 100644
--- a/next/components/postDetail/postVotesItem.js
+++ b/next/components/postDetail/postVotesItem.js
@@ -1,17 +1,16 @@
 import { Fragment } from "react";
-import styled, { css } from "styled-components";
-import ExternalLink from "@osn/common-ui/es/ExternalLink";
+import styled from "styled-components";
 import Ellipsis from "@/components/ellipsis";
-import { Flex } from "@osn/common-ui";
+import { Flex, IpfsSquare } from "@osn/common-ui";
 import ValueDisplay from "@/components/valueDisplay";
 import Voter from "@/components/role/voter";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import VoteBalanceDetail from "./VoteBalanceDetail";
 import { isZero } from "frontedUtils";
 
 const Item = styled.div`
   padding: 20px 0;
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 `;
 
 const InfoWrapper = styled.div`
@@ -37,7 +36,7 @@ const ContentWrapper = styled.div`
 
 const Content = styled.div`
   line-height: 24px;
-  color: rgba(80, 97, 118, 1);
+  color: var(--textSecondary);
 `;
 
 const BalanceWrapper = styled.div`
@@ -49,20 +48,6 @@ const BalanceWrapper = styled.div`
   }
 `;
 
-const Square = styled.div`
-  width: 20px;
-  height: 20px;
-  background: url("/imgs/icons/ipfs.svg");
-  ${(p) =>
-    !p.noHover &&
-    css`
-      cursor: pointer;
-      :hover {
-        background: url("/imgs/icons/ipfs-active.svg");
-      }
-    `}
-`;
-
 const EqualWrapper = styled.div`
   width: 33%;
   display: flex;
@@ -79,8 +64,8 @@ const EqualWrapper = styled.div`
 const MyVoteTag = styled.div`
   display: flex;
   align-items: center;
-  background: #f0f3f8;
-  color: #506176;
+  background-color: var(--fillBgTertiary);
+  color: var(--textSecondary);
   border-radius: 9px;
   padding: 2px 10px;
   font-weight: 600;
@@ -98,7 +83,7 @@ const DelegationTag = styled.div`
   align-items: center;
   padding: 2px 8px;
 
-  border: 1px solid #d2d9e2;
+  border: 1px solid var(--strokeActionDefault);
   border-radius: 9px;
 
   font-style: normal;
@@ -106,7 +91,7 @@ const DelegationTag = styled.div`
   font-size: 10px;
   line-height: 14px;
 
-  color: #a1a8b3;
+  color: var(--textTertiary);
 
   margin-top: 3px;
   margin-bottom: 3px;
@@ -215,15 +200,12 @@ export default function PostVotesItem({
                 ) : null
               }
             />
-            {data?.pinHash ? (
-              <ExternalLink
-                href={`${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${data.pinHash}`}
-              >
-                <Square />
-              </ExternalLink>
-            ) : (
-              <Square noHover={true} />
-            )}
+            <IpfsSquare
+              href={
+                data?.pinHash &&
+                `${process.env.NEXT_PUBLIC_API_END_POINT}api/ipfs/files/${data.pinHash}`
+              }
+            />
           </BalanceWrapper>
         </EqualWrapper>
       </InfoWrapper>
diff --git a/next/components/postDetail/strategyResult/common/optionList.js b/next/components/postDetail/strategyResult/common/optionList.js
index 6bf68229..6f15eb1f 100644
--- a/next/components/postDetail/strategyResult/common/optionList.js
+++ b/next/components/postDetail/strategyResult/common/optionList.js
@@ -1,4 +1,4 @@
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import {
   Divider,
   FlexAround,
diff --git a/next/components/postDetail/strategyResult/common/styled.js b/next/components/postDetail/strategyResult/common/styled.js
index adf7dcb9..2bdc0bba 100644
--- a/next/components/postDetail/strategyResult/common/styled.js
+++ b/next/components/postDetail/strategyResult/common/styled.js
@@ -3,7 +3,7 @@ import { p_14_medium } from "styles/textStyles";
 
 export const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
@@ -14,7 +14,7 @@ export const VoteItem = styled.div`
   ${p_14_medium};
 
   > :first-child {
-    color: #506176;
+    color: var(--textSecondary);
   }
 `;
 
@@ -29,7 +29,7 @@ export const ProgressItem = styled.div`
 export const ProgressBackground = styled.div`
   height: 6px;
   border-radius: 3px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   position: relative;
   overflow: hidden;
 `;
@@ -39,14 +39,14 @@ export const ProgressBar = styled.div`
   height: 6px;
   left: 0;
   top: 0;
-  background: #6848ff;
+  background: var(--fillBgBrandPrimary);
   width: ${(p) => p.percent};
 `;
 
 export const OptionIndex = styled.div`
   max-width: 118px;
   ${p_14_medium};
-  color: #a1a8b3;
+  color: var(--textTertiary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -71,14 +71,14 @@ export const ResultName = styled.span`
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export const StatusResultName = styled.span`
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 export const SubtitleWrapper = styled.div`
@@ -92,11 +92,11 @@ export const Subtitle = styled.div`
   justify-self: flex-start;
   margin-left: 8px;
   svg {
-    fill: #a1a8b3;
+    fill: var(--textTertiary);
   }
   :hover {
     svg {
-      fill: #506176;
+      fill: var(--textSecondary);
     }
   }
 `;
@@ -107,7 +107,7 @@ export const FlexAround = styled.div`
   justify-content: right;
 
   .quorum-value {
-    color: rgba(161, 168, 179, 1);
+    color: var(--textTertiary);
   }
 `;
 
@@ -135,6 +135,8 @@ export const StatusItem = styled.div`
   font-size: 14px;
   line-height: 100%;
   text-align: center;
-  color: ${(p) => (p.positive ? "#4CAF50" : "#EE4444")};
-  background: ${(p) => (p.positive ? "#EDF7ED" : "#FDECEC")};
+  color: ${(p) =>
+    p.positive ? "var(--textFeedbackSuccess)" : "var(--textFeedbackError)"};
+  background: ${(p) =>
+    p.positive ? "var(--accentGreen25a)" : "var(--accentRed25a)"};
 `;
diff --git a/next/components/postResult/index.js b/next/components/postResult/index.js
index 6b7da634..8cf7bc50 100644
--- a/next/components/postResult/index.js
+++ b/next/components/postResult/index.js
@@ -18,11 +18,11 @@ const IconWrapper = styled.div`
     display: none;
   }
   svg {
-    fill: #a1a8b3;
+    fill: var(--textTertiary);
   }
   :hover {
     svg {
-      fill: #506176;
+      fill: var(--textSecondary);
     }
   }
 `;
diff --git a/next/components/postResult/popup.js b/next/components/postResult/popup.js
index 4a604b6b..8b0680fd 100644
--- a/next/components/postResult/popup.js
+++ b/next/components/postResult/popup.js
@@ -11,9 +11,7 @@ import BigNumber from "bignumber.js";
 const ResultWrapper = styled.div`
   z-index: 999;
   position: absolute;
-  background: #ffffff;
-  filter: drop-shadow(0px 4px 31px rgba(26, 33, 44, 0.06))
-    drop-shadow(0px 0.751293px 8px rgba(26, 33, 44, 0.04));
+  background: var(--fillBgPrimary);
   padding: 24px;
   width: 300px;
   right: -24px;
@@ -35,19 +33,14 @@ const Triangle = styled.div`
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
-  border-top: 8px solid #ffffff;
+  border-top: 8px solid var(--fillBgPrimary);
   right: 24px;
   top: 100%;
 `;
 
-const TriangleTop = styled.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-bottom: 8px solid #ffffff;
-  right: 24px;
+const TriangleTop = styled(Triangle)`
+  border-top: 0;
+  border-bottom: 8px solid var(--fillBgPrimary);
   top: -8px;
 `;
 
@@ -60,7 +53,7 @@ const TitleWrapper = styled.div`
 
 const Divider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 16px 0;
 `;
 
@@ -71,7 +64,7 @@ const VoteItem = styled.div`
   ${p_14_medium};
 
   > :first-child {
-    color: #506176;
+    color: var(--textSecondary);
   }
 `;
 
@@ -83,7 +76,7 @@ const ProgressItem = styled.div`
 const ProgressBackground = styled.div`
   height: 6px;
   border-radius: 3px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   position: relative;
   overflow: hidden;
 `;
@@ -93,13 +86,13 @@ const ProgressBar = styled.div`
   height: 6px;
   left: 0;
   top: 0;
-  background: #6848ff;
+  background: var(--fillBgBrandPrimary);
   width: ${(p) => p.percent};
 `;
 
 const OptionIndex = styled.div`
   ${p_14_medium};
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const OptionChoice = styled.div`
@@ -175,7 +168,7 @@ export default function Popup({ data, space, isTop }) {
   }, [votes, data, dispatch]);
 
   return (
-    <ResultWrapper isTop={isTop}>
+    <ResultWrapper isTop={isTop} className="shadow-shadowPopup">
       <TitleWrapper>
         Results
         <img src="/imgs/icons/strategy.svg" alt="" />
diff --git a/next/components/role/voter.js b/next/components/role/voter.js
index 20d35b23..74008934 100644
--- a/next/components/role/voter.js
+++ b/next/components/role/voter.js
@@ -5,7 +5,7 @@ import { IdentityUser } from "@osn/common-ui";
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  color: #2e343d;
+  color: var(--textPrimary);
 
   > :not(:first-child) {
     margin-left: 4px;
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 const TextMinor = styled.span`
-  color: #506176;
+  color: var(--textSecondary);
   word-break: break-all;
 `;
 
@@ -21,7 +21,7 @@ const PopupCard = styled.div`
   display: flex;
   flex-wrap: wrap;
   width: 288px;
-  color: #1e2134;
+  color: var(--textPrimary);
   > div:first-child {
     display: flex;
     align-items: center;
@@ -34,7 +34,7 @@ const Divider = styled.div`
   margin-bottom: 12px;
   height: 1px;
   width: 100%;
-  background-color: #f0f3f8;
+  background-color: var(--fillBgTertiary);
 `;
 
 export default function Voter({
diff --git a/next/components/row.js b/next/components/row.js
index 9a073300..e352b90d 100644
--- a/next/components/row.js
+++ b/next/components/row.js
@@ -4,7 +4,7 @@ import { Flex, FlexBetween } from "@osn/common-ui";
 
 const Header = styled.div`
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
   flex-shrink: 1;
   white-space: nowrap;
 `;
@@ -12,7 +12,7 @@ const Content = styled(Flex)`
   width: 100%;
   flex-grow: 1;
   ${p_14_medium};
-  color: #1e2134;
+  color: var(--textPrimary);
   justify-content: right;
 `;
 
diff --git a/next/components/share/copy.svg b/next/components/share/copy.svg
index 724808e5..9a55c2a4 100644
--- a/next/components/share/copy.svg
+++ b/next/components/share/copy.svg
@@ -1,4 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="36" height="36" rx="18" fill="#F0F3F8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5832 21.5833V26.08H9.91992V14.4166H14.4165V9.92004H26.0799V21.5833H21.5832ZM16.0832 14.4166H21.5832V19.9167H24.4199V11.58H16.0832V14.4166ZM11.5799 16.0833V24.42H19.9165V16.0833H11.5799Z" fill="#A1A8B3"/>
+<rect width="36" height="36" rx="18" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5832 21.5833V26.08H9.91992V14.4166H14.4165V9.92004H26.0799V21.5833H21.5832ZM16.0832 14.4166H21.5832V19.9167H24.4199V11.58H16.0832V14.4166ZM11.5799 16.0833V24.42H19.9165V16.0833H11.5799Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/components/share/index.js b/next/components/share/index.js
index 1a15f374..b78b615b 100644
--- a/next/components/share/index.js
+++ b/next/components/share/index.js
@@ -3,7 +3,7 @@ import copy from "copy-to-clipboard";
 import styled from "styled-components";
 import { ReactComponent as Twitter } from "./twitter.svg";
 import { ReactComponent as CopySvg } from "./copy.svg";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
@@ -16,18 +16,18 @@ const ShareItem = styled.span`
   &:hover {
     .twitter {
       rect {
-        fill: #e6f4fe;
+        fill: var(--accentBlue25a);
       }
       path {
-        fill: #33a2f2;
+        fill: var(--accentBlue500a);
       }
     }
     .copy {
       rect {
-        fill: #edf7ed;
+        fill: var(--accentGreen25a);
       }
       path {
-        fill: #4caf50;
+        fill: var(--textFeedbackSuccess);
       }
     }
   }
diff --git a/next/components/share/twitter.svg b/next/components/share/twitter.svg
index 090ad0c9..f9d044ca 100644
--- a/next/components/share/twitter.svg
+++ b/next/components/share/twitter.svg
@@ -1,5 +1,5 @@
 <svg width="32" height="32" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="36" height="36" rx="18" fill="#F0F3F8"/>
+    <rect width="36" height="36" rx="18" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M27.375 12.2886C26.6963 12.6269 25.9327 12.796 25.1691 12.8806C25.9327 12.3732 26.5266 11.612 26.8659 10.7663C26.1024 11.1892 25.254 11.5275 24.4055 11.6966C22.9632 10.1743 20.5028 10.0898 18.9757 11.5275C17.9576 12.4578 17.5334 13.8109 17.8727 15.164C14.8184 14.9949 11.9338 13.5572 9.98247 11.1892C8.96437 12.9652 9.47342 15.164 11.1702 16.2635C10.5764 16.2635 9.98246 16.0943 9.38857 15.756C9.38857 15.756 9.38857 15.756 9.38857 15.8406C9.38857 17.7012 10.6612 19.2235 12.4429 19.5617C11.849 19.7309 11.2551 19.7309 10.746 19.6463C11.2551 21.1686 12.6974 22.268 14.3094 22.268C12.9519 23.3675 11.2551 23.8749 9.55826 23.8749C9.2189 23.8749 8.96437 23.8749 8.625 23.7903C13.7155 27.004 20.418 25.5663 23.642 20.492C24.7449 18.716 25.3388 16.6863 25.3388 14.6566C25.3388 14.4875 25.3388 14.3183 25.3388 14.1492C26.1872 13.7263 26.8659 13.0497 27.375 12.2886Z"
-          fill="#A1A8B3"/>
+          fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/components/sideBar/sideSectionTitle.js b/next/components/sideBar/sideSectionTitle.js
index 4bc5cb06..a5fcd697 100644
--- a/next/components/sideBar/sideSectionTitle.js
+++ b/next/components/sideBar/sideSectionTitle.js
@@ -3,7 +3,7 @@ import { p_16_semibold } from "../../styles/textStyles";
 import { memo } from "react";
 import { Flex, FlexBetween } from "@osn/common-ui";
 import SubTitle from "@osn/common-ui/es/styled/SubTitle";
-import Tooltip from "@/components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import { ReactComponent as QuestionMark } from "../../public/imgs/icons/question-mark.svg";
 
 const TitleWrapper = styled(FlexBetween)`
diff --git a/next/components/snapshotHeightPicker.js b/next/components/snapshotHeightPicker.js
index 5ed7ef45..aefda902 100644
--- a/next/components/snapshotHeightPicker.js
+++ b/next/components/snapshotHeightPicker.js
@@ -25,9 +25,8 @@ const DialogWrapper = styled.div`
   right: 0;
   padding: 24px;
   width: 328px;
-  background: #ffffff;
-  box-shadow: 0 4px 31px rgba(26, 33, 44, 0.06),
-    0 0.751293px 8px rgba(26, 33, 44, 0.04);
+  background: var(--fillBgPrimary);
+  box-shadow: var(--shadowCardDefault);
   input {
     margin-bottom: 8px;
   }
diff --git a/next/components/space.js b/next/components/space.js
index 7bed3de5..9fd433b2 100644
--- a/next/components/space.js
+++ b/next/components/space.js
@@ -45,7 +45,7 @@ const TitleWrapper = styled.div`
 const SpaceButton = styled.div`
   cursor: pointer;
   ${p_16_semibold};
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/next/components/spaceListItem/index.js b/next/components/spaceListItem/index.js
index 58c4e4df..4075b779 100644
--- a/next/components/spaceListItem/index.js
+++ b/next/components/spaceListItem/index.js
@@ -7,7 +7,7 @@ import {
   loginAddressSelector,
 } from "store/reducers/accountSlice";
 import InternalLink from "../internalLink";
-import { shadow_100, shadow_200, makeSquare } from "../../styles/globalCss";
+import { makeSquare } from "../../styles/globalCss";
 import { p_18_semibold } from "../../styles/textStyles";
 import SpaceLogo from "@/components/spaceLogo";
 import nextApi from "services/nextApi";
@@ -27,20 +27,20 @@ const Icon = styled.div`
 const Name = styled.div`
   white-space: nowrap;
   ${p_18_semibold};
-  color: #2e343d;
+  color: var(--textPrimary);
   text-transform: capitalize;
 `;
 
 const Symbol = styled.div`
   font-size: 14px;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const Divider = styled.div`
   min-width: 116px;
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
@@ -49,13 +49,13 @@ const ActiveWrapper = styled.div`
   align-items: center;
   font-size: 14px;
   line-height: 24px;
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 const ActiveCircle = styled.div`
   ${makeSquare(6)};
   border-radius: 50%;
-  background: #56ca2f;
+  background-color: var(--accentGreen500a);
   margin-right: 8px;
 `;
 
@@ -64,22 +64,22 @@ const Count = styled.span`
 `;
 
 const ActiveCount = styled(Count)`
-  color: #506176;
+  color: var(--textSecondary);
 `;
 
 const Wrapper = styled.div`
   position: relative;
   flex: 0 0 auto;
-  border: 1px solid #f0f3f8;
-  ${shadow_100};
-  background: #ffffff;
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardDefault);
+  background: var(--fillBgPrimary);
   padding: 24px;
   cursor: pointer;
   width: 200px;
 
   :hover {
-    border-color: #e2e8f0;
-    ${shadow_200}
+    border-color: var(--strokeActionDefault);
+    box-shadow: var(--shadowCardHover);
   }
 `;
 
diff --git a/next/components/spaceListItem/joinButton.js b/next/components/spaceListItem/joinButton.js
index 8aa9b389..8582d70e 100644
--- a/next/components/spaceListItem/joinButton.js
+++ b/next/components/spaceListItem/joinButton.js
@@ -1,20 +1,19 @@
 import styled from "styled-components";
-import Tooltip from "../tooltip";
+import { Tooltip } from "@osn/common-ui";
 import { ReactComponent as JoinedSVG } from "./joined.svg";
 import { ReactComponent as NotJoinedSVG } from "./not-joined.svg";
 
 const NotJoinedMark = styled(NotJoinedSVG)`
   &:hover {
     path {
-      fill: #B7C0CC;
+      fill: var(--strokeActionActive);
     }
   }
 `;
 
 const JoinedMark = styled(JoinedSVG)``;
 
-
-export default function JoinButton({ joined, onClick = ()=>{} }) {
+export default function JoinButton({ joined, onClick = () => {} }) {
   if (!joined) {
     return (
       <Tooltip content={"Join space"}>
diff --git a/next/components/spaceListItem/joined.svg b/next/components/spaceListItem/joined.svg
index 999214aa..fdc18853 100644
--- a/next/components/spaceListItem/joined.svg
+++ b/next/components/spaceListItem/joined.svg
@@ -2,8 +2,8 @@
 <path d="M1.16659 -0.333008H12.8333C13.0543 -0.333008 13.2662 -0.24521 13.4225 -0.0889302C13.5788 0.0673501 13.6666 0.279312 13.6666 0.500326V16.4528C13.6667 16.5273 13.6468 16.6005 13.609 16.6647C13.5712 16.7289 13.5169 16.7818 13.4517 16.8179C13.3865 16.854 13.3129 16.8719 13.2384 16.8699C13.1639 16.8678 13.0913 16.8458 13.0283 16.8062L6.99992 13.0253L0.971585 16.8053C0.908558 16.8449 0.836075 16.8669 0.76167 16.869C0.687266 16.8711 0.613657 16.8532 0.548498 16.8173C0.483339 16.7813 0.429008 16.7285 0.391154 16.6644C0.353301 16.6003 0.333307 16.5273 0.333252 16.4528V0.500326C0.333252 0.279312 0.421049 0.0673501 0.57733 -0.0889302C0.73361 -0.24521 0.945572 -0.333008 1.16659 -0.333008Z" fill="url(#paint0_linear_12774_63409)"/>
 <defs>
 <linearGradient id="paint0_linear_12774_63409" x1="13.6666" y1="-0.333006" x2="-2.99264" y2="12.5789" gradientUnits="userSpaceOnUse">
-<stop stop-color="#04D2C5"/>
-<stop offset="1" stop-color="#6848FF"/>
+<stop stop-color="var(--fillBgBrandSecondary, #04d2c5)"/>
+<stop offset="1" stop-color="var(--fillBgBrandPrimary, #6848FF)"/>
 </linearGradient>
 </defs>
 </svg>
diff --git a/next/components/spaceListItem/not-joined.svg b/next/components/spaceListItem/not-joined.svg
index 4148440b..8f03f12e 100644
--- a/next/components/spaceListItem/not-joined.svg
+++ b/next/components/spaceListItem/not-joined.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.16659 -0.333008H12.8333C13.0543 -0.333008 13.2662 -0.24521 13.4225 -0.0889302C13.5788 0.0673501 13.6666 0.279312 13.6666 0.500326V16.4528C13.6667 16.5273 13.6468 16.6005 13.609 16.6647C13.5712 16.7289 13.5169 16.7818 13.4517 16.8179C13.3865 16.854 13.3129 16.8719 13.2384 16.8699C13.1639 16.8678 13.0913 16.8458 13.0283 16.8062L6.99992 13.0253L0.971585 16.8053C0.908558 16.8449 0.836075 16.8669 0.76167 16.869C0.687266 16.8711 0.613657 16.8532 0.548498 16.8173C0.483339 16.7813 0.429008 16.7285 0.391154 16.6644C0.353301 16.6003 0.333307 16.5273 0.333252 16.4528V0.500326C0.333252 0.279312 0.421049 0.0673501 0.57733 -0.0889302C0.73361 -0.24521 0.945572 -0.333008 1.16659 -0.333008Z" fill="#E2E8F0"/>
+<path d="M1.16659 -0.333008H12.8333C13.0543 -0.333008 13.2662 -0.24521 13.4225 -0.0889302C13.5788 0.0673501 13.6666 0.279312 13.6666 0.500326V16.4528C13.6667 16.5273 13.6468 16.6005 13.609 16.6647C13.5712 16.7289 13.5169 16.7818 13.4517 16.8179C13.3865 16.854 13.3129 16.8719 13.2384 16.8699C13.1639 16.8678 13.0913 16.8458 13.0283 16.8062L6.99992 13.0253L0.971585 16.8053C0.908558 16.8449 0.836075 16.8669 0.76167 16.869C0.687266 16.8711 0.613657 16.8532 0.548498 16.8173C0.483339 16.7813 0.429008 16.7285 0.391154 16.6644C0.353301 16.6003 0.333307 16.5273 0.333252 16.4528V0.500326C0.333252 0.279312 0.421049 0.0673501 0.57733 -0.0889302C0.73361 -0.24521 0.945572 -0.333008 1.16659 -0.333008Z" fill="var(--strokeActionDefault)"/>
 </svg>
diff --git a/next/components/spaceLogo.js b/next/components/spaceLogo.js
index b584fcb5..ed5d8b37 100644
--- a/next/components/spaceLogo.js
+++ b/next/components/spaceLogo.js
@@ -4,7 +4,7 @@ import { getSpaceIconUrl } from "frontedUtils/space";
 
 const LogoImg = styled.img`
   ${makeSquare(64)};
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
   border-radius: 32px;
   margin-right: 24px;
 `;
diff --git a/next/components/steps/checked.svg b/next/components/steps/checked.svg
index 6fee5fe8..a4798eb7 100644
--- a/next/components/steps/checked.svg
+++ b/next/components/steps/checked.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13752_60399)">
-<path d="M9.52515 18.3637L20.8389 7.04996L19.4246 5.63574L9.52515 15.5352L4.57541 10.5855L3.16119 11.9997L9.52515 18.3637Z" fill="#04D2C5"/>
+<path d="M9.52515 18.3637L20.8389 7.04996L19.4246 5.63574L9.52515 15.5352L4.57541 10.5855L3.16119 11.9997L9.52515 18.3637Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 </g>
 <defs>
 <clipPath id="clip0_13752_60399">
diff --git a/next/components/steps/checkedIndex.js b/next/components/steps/checkedIndex.js
index 177a563d..2d4b198a 100644
--- a/next/components/steps/checkedIndex.js
+++ b/next/components/steps/checkedIndex.js
@@ -3,7 +3,7 @@ import { ReactComponent as CheckedSVG } from "./checked.svg";
 import { Index } from "./styled";
 
 const Wrapper = styled(Index)`
-  border-color: #04d2c5;
+  border-color: var(--strokeBgBrandSecondary);
 `;
 
 export default function CheckedIndex() {
diff --git a/next/components/steps/currentIndex.js b/next/components/steps/currentIndex.js
index b895997a..be04e217 100644
--- a/next/components/steps/currentIndex.js
+++ b/next/components/steps/currentIndex.js
@@ -2,9 +2,9 @@ import styled from "styled-components";
 import { Index } from "./styled";
 
 const Wrapper = styled(Index)`
-  background: #04d2c5;
-  color: #ffffff;
-  border-color: #04d2c5;
+  background: var(--fillBgBrandSecondary);
+  color: var(--textPrimaryContrast);
+  border-color: var(--strokeBgBrandSecondary);
 `;
 
 export default function CurrentIndex({ children }) {
diff --git a/next/components/steps/step.js b/next/components/steps/step.js
index 64497994..9e468633 100644
--- a/next/components/steps/step.js
+++ b/next/components/steps/step.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import CheckedIndex from "./checkedIndex";
 import CurrentIndex from "./currentIndex";
 import { Index, NavigationLine } from "./styled";
@@ -19,7 +19,13 @@ const Title = styled.span`
   font-size: 16px;
   line-height: 24px;
 
-  color: ${({ isCurrent }) => (isCurrent ? "#04D2C5" : "#000000")};
+  color: var(--textPrimary);
+
+  ${(p) =>
+    p.isCurrent &&
+    css`
+      color: var(--textBrandSecondary);
+    `}
 `;
 
 export default function Step({ step, index = 0, currentStep = 0, isLast }) {
diff --git a/next/components/steps/styled.js b/next/components/steps/styled.js
index b644c832..fb2029ae 100644
--- a/next/components/steps/styled.js
+++ b/next/components/steps/styled.js
@@ -8,14 +8,14 @@ export const Index = styled.div`
   width: 32px;
   height: 32px;
 
-  border: 2px solid #b7c0cc;
+  border: 2px solid var(--strokeActionDefault);
 
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
 
-  color: #a1a8b3;
+  color: var(--textTertiary);
 `;
 
 export const NavigationLine = styled.div`
@@ -23,11 +23,11 @@ export const NavigationLine = styled.div`
   min-width: 30px;
   height: 0px;
 
-  border: 2px solid #04d2c5;
+  border: 2px solid var(--strokeBgBrandSecondary);
 
   ${({ isHidden }) =>
     isHidden &&
     css`
-      border-color: rgba(0, 0, 0, 0);
+      border-color: transparent;
     `}
 `;
diff --git a/next/components/styled/divider.js b/next/components/styled/divider.js
index 48f37fb4..ee337513 100644
--- a/next/components/styled/divider.js
+++ b/next/components/styled/divider.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background-color: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin-top: 16px;
   margin-bottom: 16px;
 `;
diff --git a/next/components/styled/dropdown.js b/next/components/styled/dropdown.js
deleted file mode 100644
index 191fbe04..00000000
--- a/next/components/styled/dropdown.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from "styled-components";
-import { Dropdown } from "semantic-ui-react";
-
-const StyledDropdown = styled(Dropdown)`
-  width: 100%;
-  height: 64px !important;
-  border-radius: 0 !important;
-
-  :active,
-  :hover,
-  :focus {
-    border-color: #cccccc !important;
-  }
-
-  &.active,
-  & .menu {
-    border-color: #cccccc !important;
-  }
-
-  .ui.selection.dropdown {
-    min-height: 48px !important;
-  }
-
-  &.ui.dropdown .menu > .item {
-    padding: 0 !important;
-  }
-
-  .icon {
-    top: 50% !important;
-    transform: translate(0, -9px) !important;
-    opacity: 0.24 !important;
-  }
-
-  .menu {
-    border-radius: 0 !important;
-  }
-`;
-
-export default StyledDropdown;
diff --git a/next/components/styled/errorMessage.js b/next/components/styled/errorMessage.js
index 5589420a..9f1498fe 100644
--- a/next/components/styled/errorMessage.js
+++ b/next/components/styled/errorMessage.js
@@ -5,5 +5,5 @@ export const ErrorMessage = styled.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
-  color: #ee4444;
+  color: var(--textFeedbackError);
 `;
diff --git a/next/components/toast/index.js b/next/components/toast/index.js
index 117b0bd9..eaa9bacb 100644
--- a/next/components/toast/index.js
+++ b/next/components/toast/index.js
@@ -6,7 +6,6 @@ import { toastsSelector } from "store/reducers/toastSlice";
 
 const Wrapper = styled.div`
   position: fixed;
-  width: 100vw;
   height: 0;
   left: 0;
   top: 0;
diff --git a/next/components/toast/toastItem.js b/next/components/toast/toastItem.js
index a468e92a..176c7235 100644
--- a/next/components/toast/toastItem.js
+++ b/next/components/toast/toastItem.js
@@ -7,17 +7,16 @@ import { ReactComponent as Close } from "public/imgs/icons/close.svg";
 import { ReactComponent as Sticky } from "public/imgs/icons/sticky.svg";
 import { TOAST_TYPES } from "frontedUtils/constants";
 import { useIsMounted } from "frontedUtils/hooks";
+import { cn } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   padding: 20px;
   width: 400px;
-  background: #ffffff;
-  filter: drop-shadow(0px 4px 31px rgba(26, 33, 44, 0.06))
-    drop-shadow(0px 0.751293px 8px rgba(26, 33, 44, 0.04));
-  color: rgba(17, 17, 17, 0.65);
+  background: var(--fillBgPrimary);
+  color: var(--textSecondary);
   display: flex;
   align-items: flex-start;
-  border-left: 4px solid #ffffff;
+  border-left: 4px solid var(--strokeActionDefault);
   ${(p) =>
     p.color &&
     css`
@@ -47,7 +46,7 @@ const Title = styled.div`
 const Content = styled.div`
   font-size: 14px;
   line-height: 24px;
-  color: #506176;
+  color: var(--textSecondary);
   word-wrap: break-word;
   word-break: break-all;
 `;
@@ -57,13 +56,13 @@ const RightWrapper = styled.div`
   cursor: pointer;
   > svg {
     path {
-      fill: #9da9bb;
+      fill: var(--textTertiary);
     }
-    fill: #9da9bb;
+    fill: var(--textTertiary);
     :hover {
-      fill: #2e343d;
+      fill: var(--textPrimary);
       path {
-        fill: #2e343d;
+        fill: var(--textPrimary);
       }
     }
   }
@@ -72,14 +71,14 @@ const RightWrapper = styled.div`
 const getToastColor = (type) => {
   switch (type) {
     case TOAST_TYPES.SUCCESS:
-      return "#4CAF50";
+      return "var(--textFeedbackSuccess)";
     case TOAST_TYPES.ERROR:
-      return "#EE4444";
+      return "var(--textFeedbackError)";
     case TOAST_TYPES.INFO:
     case TOAST_TYPES.PENDING:
-      return "#6848FF";
+      return "var(--fillBgBrandPrimary)";
     default:
-      return "#9DA9BB";
+      return "var(--textTertiary)";
   }
 };
 
@@ -108,7 +107,7 @@ const ToastItem = ({ type, message, id, sticky }) => {
 
   if (!message) return null;
   return (
-    <Wrapper color={color} className={tranClass}>
+    <Wrapper color={color} className={cn("shadow-shadowPopup", tranClass)}>
       <LeftWrapper>
         <Title>{type}</Title>
         <Content>{message}</Content>
diff --git a/next/components/tooltip-bak/index.js b/next/components/tooltip-bak/index.js
deleted file mode 100644
index f7cce925..00000000
--- a/next/components/tooltip-bak/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import styled, { css } from "styled-components";
-import { useDispatch } from "react-redux";
-import copy from "copy-to-clipboard";
-
-import { newSuccessToast } from "store/reducers/toastSlice";
-
-const PopupWrapper = styled.div`
-  cursor: auto;
-  display: none;
-  position: absolute;
-  padding-bottom: 10px;
-  left: 50%;
-  bottom: 100%;
-  transform: translateX(-50%);
-  z-index: 1;
-  ${(p) =>
-    p.isCopy &&
-    css`
-      cursor: pointer;
-    `}
-`;
-
-const Popup = styled.div`
-  position: relative;
-  background: rgba(0, 0, 0, 0.65);
-  border-radius: 4px;
-  max-width: 257px;
-  min-width: ${(p) => (p.noMinWidth ? "none" : "120px")};
-  padding: 6px 12px;
-  font-size: 12px;
-  line-height: 16px;
-  color: #ffffff;
-  word-wrap: break-word;
-  text-align: left;
-`;
-
-const Triangle = styled.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid rgba(0, 0, 0, 0.65);
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-`;
-
-const ChildrenWrapper = styled.div`
-  color: red;
-  position: relative;
-  display: inline-block;
-  :hover {
-    > * {
-      display: block;
-    }
-  }
-`;
-
-const TitleWrapper = styled.div`
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 16px;
-  color: #ffffff;
-  white-space: nowrap;
-`;
-
-export default function Tooltip({
-  content,
-  children,
-  isCopy,
-  copyText,
-  title,
-  noMinWidth,
-}) {
-  const dispatch = useDispatch();
-
-  const onCopy = () => {
-    if (isCopy && content && copy(copyText || content)) {
-      dispatch(newSuccessToast("Copied"));
-    }
-  };
-
-  return (
-    <ChildrenWrapper>
-      {children}
-      {content && (
-        <PopupWrapper onClick={onCopy} isCopy>
-          <Popup noMinWidth={noMinWidth}>
-            {title && <TitleWrapper>{title}</TitleWrapper>}
-            {content}
-            <Triangle />
-          </Popup>
-        </PopupWrapper>
-      )}
-    </ChildrenWrapper>
-  );
-}
diff --git a/next/components/tooltip.js b/next/components/tooltip.js
deleted file mode 100644
index b4fe1429..00000000
--- a/next/components/tooltip.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import styled, { css } from "styled-components";
-import { useDispatch } from "react-redux";
-import copy from "copy-to-clipboard";
-
-import { newSuccessToast } from "store/reducers/toastSlice";
-import { p_14_normal } from "../styles/textStyles";
-
-const Wrapper = styled.div`
-  display: inline-flex;
-  position: relative;
-  font-size: 14px;
-  line-height: 16px;
-  color: rgba(17, 17, 17, 0.65);
-  > svg {
-    stroke-opacity: 0.65;
-  }
-  :hover {
-    color: #111111;
-    > svg {
-      stroke-opacity: 1;
-    }
-    > * {
-      display: block !important;
-    }
-  }
-  ${(p) =>
-    p.bg &&
-    css`
-      padding: 6px 12px;
-      background: #f4f4f4;
-      border-radius: 4px;
-      :hover {
-        background: #eeeeee;
-      }
-    `}
-`;
-
-const PopupWrapper = styled.div`
-  cursor: auto;
-  display: none !important;
-  position: absolute;
-  padding-bottom: 10px;
-  left: 50%;
-  bottom: 100%;
-  transform: translateX(-50%);
-  z-index: 1;
-  ${(p) =>
-    p.isCopy &&
-    css`
-      cursor: pointer;
-    `}
-  ${(p) =>
-    p.position === "down" &&
-    css`
-      top: 100%;
-      padding-bottom: 0;
-      padding-top: 10px;
-    `}
-    ${(p) =>
-    p.offset &&
-    css`
-      margin-top: ${p.offset};
-    `}
-`;
-
-const Popup = styled.div`
-  position: relative;
-  background: rgba(25, 30, 39, 0.9);
-  white-space: nowrap;
-  padding: 8px 12px;
-  ${p_14_normal};
-  color: #ffffff;
-  word-wrap: break-word;
-`;
-
-const Triangle = styled.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid rgba(25, 30, 39, 0.9);
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-`;
-
-const TopTriangle = styled.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid rgba(25, 30, 39, 0.9);
-  left: 50%;
-  top: -6px;
-  transform: translateX(-50%);
-`;
-
-const ChildrenWrapper = styled.div`
-  position: relative;
-  display: inline-flex;
-  :hover {
-    > * {
-      display: block !important;
-    }
-  }
-  > svg {
-    display: block;
-  }
-  ${(p) =>
-    p.size === "full" &&
-    css`
-      width: 100%;
-      height: 100%;
-    `}
-  ${(p) =>
-    p.size === "fit" &&
-    css`
-      width: fit-content;
-      position: relative;
-    `}
-`;
-
-const TitleWrapper = styled.div`
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 16px;
-  color: #ffffff;
-`;
-
-const TooltipIcon = styled.img`
-  width: ${({ size }) => size || 24}px;
-  height: ${({ size }) => size || 24}px;
-`;
-
-export default function Tooltip({
-  label,
-  bg,
-  content,
-  children,
-  isCopy,
-  copyText,
-  title,
-  size,
-  iconSize,
-  position,
-  offset,
-}) {
-  const dispatch = useDispatch();
-
-  const onCopy = () => {
-    if (isCopy && content && copy(copyText || content)) {
-      dispatch(newSuccessToast("Copied"));
-    }
-  };
-
-  return (
-    <>
-      {children ? (
-        <ChildrenWrapper size={size}>
-          {children}
-          {content && (
-            <PopupWrapper
-              onClick={onCopy}
-              isCopy={isCopy}
-              position={position}
-              offset={offset}
-            >
-              <Popup>
-                {position === "down" && <TopTriangle />}
-                {title && <TitleWrapper>{title}</TitleWrapper>}
-                {content}
-                {position !== "down" && <Triangle />}
-              </Popup>
-            </PopupWrapper>
-          )}
-        </ChildrenWrapper>
-      ) : (
-        <Wrapper bg={bg}>
-          {label && label}
-          {!label && (
-            <TooltipIcon size={iconSize} src="/imgs/icons/tooltip-icon.svg" />
-          )}
-          {content && (
-            <PopupWrapper
-              onClick={onCopy}
-              isCopy={isCopy}
-              position={position}
-              offset={offset}
-            >
-              <Popup>
-                {position === "down" && <TopTriangle />}
-                {title && <TitleWrapper>{title}</TitleWrapper>}
-                {content}
-                {position !== "down" && <Triangle />}
-              </Popup>
-            </PopupWrapper>
-          )}
-        </Wrapper>
-      )}
-    </>
-  );
-}
diff --git a/next/components/uploadBanner/uploader.js b/next/components/uploadBanner/uploader.js
index 35c1e738..cec1b8c6 100644
--- a/next/components/uploadBanner/uploader.js
+++ b/next/components/uploadBanner/uploader.js
@@ -1,14 +1,9 @@
 import React, { useRef, useState } from "react";
 import styled from "styled-components";
-import { Flex } from "@osn/common-ui";
+import { Flex, cn } from "@osn/common-ui";
 import nextApi from "services/nextApi";
 import { LoadingIcon } from "@osn/common-ui";
-import { ReactComponent as Upload } from "../../public/imgs/icons/upload.svg";
-
-const UploadIcon = styled(Upload)`
-  flex-basis: 100%;
-  cursor: pointer;
-`;
+import { SystemUpload } from "@osn/icons/opensquare";
 
 const Wrapper = styled.div`
   position: relative;
@@ -18,14 +13,6 @@ const Wrapper = styled.div`
   }
 `;
 
-const UploadArea = styled(Flex)`
-  padding-top: 16px;
-  padding-bottom: 16px;
-  justify-content: center;
-  border: 1px dashed;
-  border-color: ${(props) => props.theme.neutralGrey300};
-`;
-
 const Tips = styled.ul`
   padding: 0;
   list-style: none;
@@ -67,12 +54,6 @@ const Delete = styled(Button)`
   flex-basis: 100%;
   margin-left: calc(50% - 20px);
 `;
-const UploadTip = styled.p`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-`;
 const BannerPreview = styled(Flex)`
   flex-wrap: wrap;
   justify-content: center;
@@ -91,6 +72,10 @@ function Uploader({ setBannerUrl }) {
   const [uploading, setUploading] = useState(false);
 
   const handleSelectFile = () => {
+    if (uploading) {
+      return;
+    }
+
     inputEl.current?.click();
   };
 
@@ -159,14 +144,18 @@ function Uploader({ setBannerUrl }) {
 
   return (
     <Wrapper>
-      <UploadArea
+      <div
         onDragOver={onDragOver}
         onDragLeave={onDragLeave}
         onDrop={onDrop}
-        active={dragging}
+        className={cn(
+          "border border-dashed border-strokeActionDefault",
+          "py-4",
+          dragging && "border-strokeActionActive",
+        )}
       >
         {uploading ? (
-          <LoadingIcon />
+          <LoadingIcon className="[&_path]:fill-textTertiary" />
         ) : (
           <>
             {currentBanner ? (
@@ -175,17 +164,23 @@ function Uploader({ setBannerUrl }) {
                 <Delete onClick={handleRemoveBanner}>Delete</Delete>
               </BannerPreview>
             ) : (
-              <UploadTip>
-                <UploadIcon onClick={handleSelectFile} />
+              <div className="flex flex-col items-center">
+                <div className="h-28 flex items-center">
+                  <SystemUpload
+                    role="button"
+                    className="[&_path]:fill-textTertiary"
+                    onClick={handleSelectFile}
+                  />
+                </div>
                 <Hint>
                   <span>Drop image or</span>
                   <SelectFile onClick={handleSelectFile}>Upload</SelectFile>
                 </Hint>
-              </UploadTip>
+              </div>
             )}
           </>
         )}
-      </UploadArea>
+      </div>
       <Tips>
         <li>We recommend a 16:9 image.</li>
         <li>The banner will be a shared preview on social media.</li>
diff --git a/next/components/valueDisplay.js b/next/components/valueDisplay.js
index 36373004..3168c239 100644
--- a/next/components/valueDisplay.js
+++ b/next/components/valueDisplay.js
@@ -1,4 +1,4 @@
-import Tooltip from "components/tooltip";
+import { Tooltip } from "@osn/common-ui";
 import {
   abbreviateBigNumber,
   getEffectiveNumbers,
diff --git a/next/next.config.js b/next/next.config.js
index 0e347641..c460a5a9 100644
--- a/next/next.config.js
+++ b/next/next.config.js
@@ -1,3 +1,5 @@
+const path = require("node:path");
+
 /** @type {import('next').NextConfig} */
 module.exports = {
   transpilePackages: ["@osn/common-ui", "@osn/common", "@osn/rich-text-editor"],
@@ -31,6 +33,18 @@ module.exports = {
         },
       ],
     });
+
+    alias("react");
+    alias("styled-components");
+
+    function alias(module) {
+      config.resolve.alias[module] = path.resolve(
+        __dirname,
+        "node_modules",
+        module,
+      );
+    }
+
     return config;
   },
 };
diff --git a/next/package.json b/next/package.json
index 3c8fceab..71030dd0 100644
--- a/next/package.json
+++ b/next/package.json
@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@osn/common": "^1.3.5",
-    "@osn/common-ui": "^1.18.10",
+    "@osn/common-ui": "^1.20.0",
     "@osn/constants": "^1.1.2",
-    "@osn/polkadot-react-identicon": "^1.0.8",
-    "@osn/previewer": "^0.12.3",
-    "@osn/rich-text-editor": "^0.1.56",
+    "@osn/icons": "^1.83.0",
+    "@osn/polkadot-react-identicon": "^1.0.10",
+    "@osn/previewer": "^1.2.2",
+    "@osn/rich-text-editor": "^0.6.6",
     "@polkadot/api": "^9.4.2",
     "@polkadot/extension-dapp": "0.44.6",
     "@polkadot/util": "10.1.9",
@@ -54,18 +55,20 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@osn/eslint-config": "^1.0.1",
+    "@osn/eslint-config": "^1.0.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.1",
+    "autoprefixer": "^10.4.16",
     "babel-jest": "^27.2.2",
-    "eslint": "^8.38.0",
-    "eslint-config-next": "^13.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.4",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.0",
     "jest-environment-node": "^27.3.0",
+    "postcss": "^8.4.33",
     "postinstall-postinstall": "^2.1.0",
-    "react-test-renderer": "^17.0.2"
+    "tailwindcss": "^3.4.1"
   },
   "packageManager": "yarn@3.6.4"
 }
diff --git a/next/pages/404.js b/next/pages/404.js
index 6c100033..c9d3b066 100644
--- a/next/pages/404.js
+++ b/next/pages/404.js
@@ -7,18 +7,17 @@ import InternalLink from "@/components/internalLink";
 
 const Wrapper = styled.div`
   min-height: 100vh;
-  width: 100vw;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 `;
 
 const Section = styled.div`
-  background: #fff;
+  background: var(--fillBgPrimary);
   @media screen and (max-width: 800px) {
     border-top: none;
   }
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 `;
 
 const H1 = styled.h1`
@@ -26,6 +25,7 @@ const H1 = styled.h1`
   ${h3_36_bold};
   @media screen and (max-width: 800px) {
     ${h4_24_bold};
+    padding-top: 30px;
     padding-bottom: 30px;
     padding-left: 40px;
   }
@@ -37,7 +37,7 @@ const Content = styled.div`
   padding-top: 80px;
   height: 488px;
   ${p_16_normal};
-  color: #506176;
+  color: var(--textSecondary);
   background-image: url("/imgs/backgrounds/bg-404.png");
   background-position-x: 50%;
   background-repeat: no-repeat;
@@ -55,7 +55,7 @@ const Content = styled.div`
     display: inline-block;
     padding-left: 16px;
     padding-right: 16px;
-    border: 1px solid #b7c0cc;
+    border: 1px solid var(--strokeActionActive);
     line-height: 40px;
   }
 `;
@@ -73,7 +73,10 @@ export default function FourOFour() {
             Sorry. the content you’re looking for doesn’t exist. Either it was
             removed, or you mistyped the link.
           </p>
-          <InternalLink href="/">Back to Square</InternalLink>
+
+          <div className="mt-4">
+            <InternalLink href="/">Back to Square</InternalLink>
+          </div>
         </div>
       </Content>
       <Footer github="https://github.com/opensquare-network/collaboration/" />
diff --git a/next/pages/_app.js b/next/pages/_app.js
index 1a5adccd..7941ca19 100644
--- a/next/pages/_app.js
+++ b/next/pages/_app.js
@@ -1,3 +1,4 @@
+import App from "next/app";
 import Head from "next/head";
 import { Provider } from "react-redux";
 import NProgress from "nprogress";
@@ -5,9 +6,13 @@ import Router from "next/router";
 
 import "nprogress/nprogress.css";
 import { store } from "../store";
-import "semantic-ui-css/semantic.min.css";
 import "../styles/globals.css";
 import "react-mde/lib/styles/css/react-mde-all.css";
+import "@osn/common-ui/styles/index.css";
+import "@osn/previewer/styles.css";
+import { cn } from "@osn/common-ui";
+import { Inter, Montserrat } from "next/font/google";
+import { ConfigProvider, CACHE_KEY } from "@osn/common-ui";
 
 NProgress.configure({
   minimum: 0.3,
@@ -29,16 +34,56 @@ Router.events.on(
   (url, { shallow }) => !shallow && NProgress.done(),
 );
 
-function MyApp({ Component, pageProps }) {
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+});
+
+function MyApp({ Component, pageProps, themeMode }) {
   return (
-    <Provider store={store}>
-      <Head>
-        <title>OpenSquare Network Off-chain Voting</title>
-        <meta name="viewport" content="width=device-width, user-scalable=no" />
-      </Head>
-      <Component {...pageProps} />
-    </Provider>
+    <>
+      <style jsx global>{`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+          --font-montserrat: ${montserrat.style.fontFamily};
+        }
+      `}</style>
+
+      <Provider store={store}>
+        <ConfigProvider themeMode={themeMode}>
+          <Head>
+            <title>OpenSquare Network Off-chain Voting</title>
+            <meta
+              name="viewport"
+              content="width=device-width, user-scalable=no"
+            />
+          </Head>
+          <main
+            className={cn(inter.className, inter.variable, montserrat.variable)}
+          >
+            <Component {...pageProps} />
+          </main>
+        </ConfigProvider>
+      </Provider>
+    </>
   );
 }
 
+// https://nextjs.org/docs/pages/building-your-application/routing/custom-app#getinitialprops-with-app
+MyApp.getInitialProps = async (context) => {
+  const ctx = await App.getInitialProps(context);
+
+  const themeMode = context.ctx.req?.cookies?.[CACHE_KEY.themeMode];
+
+  return {
+    ...ctx,
+    themeMode,
+  };
+};
+
 export default MyApp;
diff --git a/next/pages/_document.js b/next/pages/_document.js
index 00af3db4..f493f475 100644
--- a/next/pages/_document.js
+++ b/next/pages/_document.js
@@ -1,4 +1,5 @@
-import Document from "next/document";
+import { CACHE_KEY } from "@osn/common-ui";
+import Document, { Html, Head, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {
@@ -27,4 +28,66 @@ export default class MyDocument extends Document {
       sheet.seal();
     }
   }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: ` 
+                :root {
+                  --neutralGray25: rgba(252, 252, 253, 1);
+                  --fillBgSecondary: var(--neutralGray25);
+                }
+                .dark:root {
+                  --neutralGray950: rgba(13, 19, 33, 1);
+                  --fillBgSecondary: var(--neutralGray950);
+                }
+
+                html,
+                body {
+                  background-color: var(--fillBgSecondary);
+                }
+              `,
+            }}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                (function() {
+                  var cookie = document.cookie;
+                  var theme_mode = cookie.match(/${CACHE_KEY.themeMode}=([^;]+)/);
+                  if (theme_mode) {
+                    theme_mode = theme_mode[1];
+                    if (!theme_mode || theme_mode === "system") {
+                      if ("matchMedia" in window) {
+                        var preferredDark = window.matchMedia(
+                          "(prefers-color-scheme: dark)",
+                        ).matches;
+                        if (preferredDark) {
+                          add_dark();
+                        }
+                      }
+                    } else if (theme_mode === "dark") {
+                      add_dark();
+                    }
+
+                    function add_dark() {
+                      var root = document.documentElement;
+                      root.classList.add("dark");
+                    }
+                  }
+                })()
+              `,
+            }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
diff --git a/next/pages/notifications.js b/next/pages/notifications.js
index f69e4c31..21be5c40 100644
--- a/next/pages/notifications.js
+++ b/next/pages/notifications.js
@@ -6,7 +6,7 @@ import Seo from "@/components/seo";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setAvailableNetworks } from "store/reducers/accountSlice";
-import { Pagination, Container, List, Flex } from "@osn/common-ui";
+import { Pagination, List, Flex } from "@osn/common-ui";
 import { clearUnread } from "store/reducers/notificationSlice";
 import { accountSelector } from "store/reducers/accountSlice";
 import NotificationItem from "../components/notification/notificationItem";
@@ -15,7 +15,7 @@ import { ReactComponent as CheckUnderline } from "@osn/common-ui/es/imgs/icons/c
 import { text_dark_minor } from "@osn/common-ui/es/styles/colors";
 import { p_14_medium } from "@osn/common-ui/es/styles/textStyles";
 import { useNotifications } from "hooks/notification/useNotifications";
-import ListLoader from "@/components/notification/listLoader";
+import { ListLoader } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   position: relative;
@@ -76,38 +76,36 @@ export default function Index({ allNetworks }) {
             }
           />
 
-          <Container>
-            <ContentWrapper>
-              <List
-                gap={20}
-                loading={isLoading}
-                loadingComponent={<ListLoader />}
-                data={notifications?.items}
-                noDataMessage="No notifications"
-                itemKey={(item) => `${item._id}_${item.read}`}
-                itemRender={(item) => (
-                  <List.Item>
-                    <NotificationItem
-                      data={item}
-                      onMarkAsRead={(data) => {
-                        dispatch(
-                          clearUnread(account.address, {
-                            items: [data._id],
-                          }),
-                        );
-                      }}
-                    />
-                  </List.Item>
-                )}
-              />
-            </ContentWrapper>
-
-            <Pagination
-              {...{ page, setPage, pageSize }}
-              onChange={() => window.scrollTo(0, 0)}
-              total={notifications?.total}
+          <ContentWrapper>
+            <List
+              gap={20}
+              loading={isLoading}
+              loadingComponent={<ListLoader />}
+              data={notifications?.items}
+              noDataMessage="No notifications"
+              itemKey={(item) => `${item._id}_${item.read}`}
+              itemRender={(item) => (
+                <List.Item>
+                  <NotificationItem
+                    data={item}
+                    onMarkAsRead={(data) => {
+                      dispatch(
+                        clearUnread(account.address, {
+                          items: [data._id],
+                        }),
+                      );
+                    }}
+                  />
+                </List.Item>
+              )}
             />
-          </Container>
+          </ContentWrapper>
+
+          <Pagination
+            {...{ page, setPage, pageSize }}
+            onChange={() => window.scrollTo(0, 0)}
+            total={notifications?.total}
+          />
         </Wrapper>
       </Layout>
     </>
diff --git a/next/postcss.config.js b/next/postcss.config.js
new file mode 100644
index 00000000..12a703d9
--- /dev/null
+++ b/next/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/next/public/imgs/icons/action.svg b/next/public/imgs/icons/action.svg
index cda82a75..4ec9b10c 100644
--- a/next/public/imgs/icons/action.svg
+++ b/next/public/imgs/icons/action.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.4615 17.6986C6.65777 17.1425 7.02175 16.6609 7.50327 16.3203C7.98479 15.9797 8.56013 15.7967 9.15 15.7967C9.73987 15.7967 10.3152 15.9797 10.7967 16.3203C11.2782 16.6609 11.6422 17.1425 11.8385 17.6986H21.5V19.5981H11.8385C11.6422 20.1543 11.2782 20.6358 10.7967 20.9764C10.3152 21.3171 9.73987 21.5 9.15 21.5C8.56013 21.5 7.98479 21.3171 7.50327 20.9764C7.02175 20.6358 6.65777 20.1543 6.4615 19.5981H2.5V17.6986H6.4615ZM12.1615 11.0502C12.3578 10.4941 12.7218 10.0125 13.2033 9.67192C13.6848 9.33129 14.2601 9.14837 14.85 9.14837C15.4399 9.14837 16.0152 9.33129 16.4967 9.67192C16.9782 10.0125 17.3422 10.4941 17.5385 11.0502H21.5V12.9498H17.5385C17.3422 13.5059 16.9782 13.9875 16.4967 14.3281C16.0152 14.6687 15.4399 14.8516 14.85 14.8516C14.2601 14.8516 13.6848 14.6687 13.2033 14.3281C12.7218 13.9875 12.3578 13.5059 12.1615 12.9498H2.5V11.0502H12.1615ZM6.4615 4.40186C6.65777 3.84574 7.02175 3.36418 7.50327 3.02355C7.98479 2.68292 8.56013 2.5 9.15 2.5C9.73987 2.5 10.3152 2.68292 10.7967 3.02355C11.2782 3.36418 11.6422 3.84574 11.8385 4.40186H21.5V6.3014H11.8385C11.6422 6.85752 11.2782 7.33908 10.7967 7.67971C10.3152 8.02034 9.73987 8.20326 9.15 8.20326C8.56013 8.20326 7.98479 8.02034 7.50327 7.67971C7.02175 7.33908 6.65777 6.85752 6.4615 6.3014H2.5V4.40186H6.4615ZM9.15 6.3014C9.40196 6.3014 9.64359 6.20133 9.82175 6.02322C9.99991 5.8451 10.1 5.60352 10.1 5.35163C10.1 5.09974 9.99991 4.85816 9.82175 4.68004C9.64359 4.50193 9.40196 4.40186 9.15 4.40186C8.89804 4.40186 8.65641 4.50193 8.47825 4.68004C8.30009 4.85816 8.2 5.09974 8.2 5.35163C8.2 5.60352 8.30009 5.8451 8.47825 6.02322C8.65641 6.20133 8.89804 6.3014 9.15 6.3014ZM14.85 12.9498C15.102 12.9498 15.3436 12.8497 15.5218 12.6716C15.6999 12.4935 15.8 12.2519 15.8 12C15.8 11.7481 15.6999 11.5065 15.5218 11.3284C15.3436 11.1503 15.102 11.0502 14.85 11.0502C14.598 11.0502 14.3564 11.1503 14.1782 11.3284C14.0001 11.5065 13.9 11.7481 13.9 12C13.9 12.2519 14.0001 12.4935 14.1782 12.6716C14.3564 12.8497 14.598 12.9498 14.85 12.9498ZM9.15 19.5981C9.40196 19.5981 9.64359 19.4981 9.82175 19.32C9.99991 19.1418 10.1 18.9003 10.1 18.6484C10.1 18.3965 9.99991 18.1549 9.82175 17.9768C9.64359 17.7987 9.40196 17.6986 9.15 17.6986C8.89804 17.6986 8.65641 17.7987 8.47825 17.9768C8.30009 18.1549 8.2 18.3965 8.2 18.6484C8.2 18.9003 8.30009 19.1418 8.47825 19.32C8.65641 19.4981 8.89804 19.5981 9.15 19.5981Z" fill="#9DA9BB"/>
+<path d="M6.4615 17.6986C6.65777 17.1425 7.02175 16.6609 7.50327 16.3203C7.98479 15.9797 8.56013 15.7967 9.15 15.7967C9.73987 15.7967 10.3152 15.9797 10.7967 16.3203C11.2782 16.6609 11.6422 17.1425 11.8385 17.6986H21.5V19.5981H11.8385C11.6422 20.1543 11.2782 20.6358 10.7967 20.9764C10.3152 21.3171 9.73987 21.5 9.15 21.5C8.56013 21.5 7.98479 21.3171 7.50327 20.9764C7.02175 20.6358 6.65777 20.1543 6.4615 19.5981H2.5V17.6986H6.4615ZM12.1615 11.0502C12.3578 10.4941 12.7218 10.0125 13.2033 9.67192C13.6848 9.33129 14.2601 9.14837 14.85 9.14837C15.4399 9.14837 16.0152 9.33129 16.4967 9.67192C16.9782 10.0125 17.3422 10.4941 17.5385 11.0502H21.5V12.9498H17.5385C17.3422 13.5059 16.9782 13.9875 16.4967 14.3281C16.0152 14.6687 15.4399 14.8516 14.85 14.8516C14.2601 14.8516 13.6848 14.6687 13.2033 14.3281C12.7218 13.9875 12.3578 13.5059 12.1615 12.9498H2.5V11.0502H12.1615ZM6.4615 4.40186C6.65777 3.84574 7.02175 3.36418 7.50327 3.02355C7.98479 2.68292 8.56013 2.5 9.15 2.5C9.73987 2.5 10.3152 2.68292 10.7967 3.02355C11.2782 3.36418 11.6422 3.84574 11.8385 4.40186H21.5V6.3014H11.8385C11.6422 6.85752 11.2782 7.33908 10.7967 7.67971C10.3152 8.02034 9.73987 8.20326 9.15 8.20326C8.56013 8.20326 7.98479 8.02034 7.50327 7.67971C7.02175 7.33908 6.65777 6.85752 6.4615 6.3014H2.5V4.40186H6.4615ZM9.15 6.3014C9.40196 6.3014 9.64359 6.20133 9.82175 6.02322C9.99991 5.8451 10.1 5.60352 10.1 5.35163C10.1 5.09974 9.99991 4.85816 9.82175 4.68004C9.64359 4.50193 9.40196 4.40186 9.15 4.40186C8.89804 4.40186 8.65641 4.50193 8.47825 4.68004C8.30009 4.85816 8.2 5.09974 8.2 5.35163C8.2 5.60352 8.30009 5.8451 8.47825 6.02322C8.65641 6.20133 8.89804 6.3014 9.15 6.3014ZM14.85 12.9498C15.102 12.9498 15.3436 12.8497 15.5218 12.6716C15.6999 12.4935 15.8 12.2519 15.8 12C15.8 11.7481 15.6999 11.5065 15.5218 11.3284C15.3436 11.1503 15.102 11.0502 14.85 11.0502C14.598 11.0502 14.3564 11.1503 14.1782 11.3284C14.0001 11.5065 13.9 11.7481 13.9 12C13.9 12.2519 14.0001 12.4935 14.1782 12.6716C14.3564 12.8497 14.598 12.9498 14.85 12.9498ZM9.15 19.5981C9.40196 19.5981 9.64359 19.4981 9.82175 19.32C9.99991 19.1418 10.1 18.9003 10.1 18.6484C10.1 18.3965 9.99991 18.1549 9.82175 17.9768C9.64359 17.7987 9.40196 17.6986 9.15 17.6986C8.89804 17.6986 8.65641 17.7987 8.47825 17.9768C8.30009 18.1549 8.2 18.3965 8.2 18.6484C8.2 18.9003 8.30009 19.1418 8.47825 19.32C8.65641 19.4981 8.89804 19.5981 9.15 19.5981Z" fill="var(--textTertiary)"/>
 </svg>
diff --git a/next/public/imgs/icons/add-appendant.svg b/next/public/imgs/icons/add-appendant.svg
index f3d1ac5c..73b0308e 100644
--- a/next/public/imgs/icons/add-appendant.svg
+++ b/next/public/imgs/icons/add-appendant.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.16667 15.8334H5.345L13.1067 8.07174L11.9283 6.8934L4.16667 14.6551V15.8334ZM17.5 17.5001H2.5V13.9642L13.6958 2.7684C13.8521 2.61218 14.064 2.52441 14.285 2.52441C14.506 2.52441 14.7179 2.61218 14.8742 2.7684L17.2317 5.1259C17.3879 5.28218 17.4757 5.4941 17.4757 5.71507C17.4757 5.93604 17.3879 6.14796 17.2317 6.30424L7.7025 15.8334H17.5V17.5001ZM13.1067 5.71507L14.285 6.8934L15.4633 5.71507L14.285 4.53674L13.1067 5.71507Z" fill="#04D2C5"/>
+<path d="M4.16667 15.8334H5.345L13.1067 8.07174L11.9283 6.8934L4.16667 14.6551V15.8334ZM17.5 17.5001H2.5V13.9642L13.6958 2.7684C13.8521 2.61218 14.064 2.52441 14.285 2.52441C14.506 2.52441 14.7179 2.61218 14.8742 2.7684L17.2317 5.1259C17.3879 5.28218 17.4757 5.4941 17.4757 5.71507C17.4757 5.93604 17.3879 6.14796 17.2317 6.30424L7.7025 15.8334H17.5V17.5001ZM13.1067 5.71507L14.285 6.8934L15.4633 5.71507L14.285 4.53674L13.1067 5.71507Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 </svg>
diff --git a/next/public/imgs/icons/add.svg b/next/public/imgs/icons/add.svg
index 92ae768a..597a4b78 100644
--- a/next/public/imgs/icons/add.svg
+++ b/next/public/imgs/icons/add.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8552 10.855V4.26904H13.1448V10.855H19.7307V13.1446H13.1448V19.7305H10.8552V13.1446H4.26929V10.855H10.8552Z" fill="#04D2C5"/>
+<path d="M10.8552 10.855V4.26904H13.1448V10.855H19.7307V13.1446H13.1448V19.7305H10.8552V13.1446H4.26929V10.855H10.8552Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 </svg>
diff --git a/next/public/imgs/icons/asset.svg b/next/public/imgs/icons/asset.svg
index 457225bf..d4a3535e 100644
--- a/next/public/imgs/icons/asset.svg
+++ b/next/public/imgs/icons/asset.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0049 22.0029C6.48204 22.0029 2.00488 17.5258 2.00488 12.0029C2.00488 6.48008 6.48204 2.00293 12.0049 2.00293C17.5277 2.00293 22.0049 6.48008 22.0049 12.0029C22.0049 17.5258 17.5277 22.0029 12.0049 22.0029ZM12.0049 20.0029C16.4232 20.0029 20.0049 16.4212 20.0049 12.0029C20.0049 7.58465 16.4232 4.00293 12.0049 4.00293C7.5866 4.00293 4.00488 7.58465 4.00488 12.0029C4.00488 16.4212 7.5866 20.0029 12.0049 20.0029ZM9.00488 8.00293H15.0049L17.5049 11.5029L12.0041 17.0029L6.50488 11.5029L9.00488 8.00293ZM10.0349 10.0029L9.11488 11.2929L12.0041 14.1829L14.8949 11.2929L13.9749 10.0029H10.0349Z" fill="#A1A8B3"/>
+<path d="M12.0049 22.0029C6.48204 22.0029 2.00488 17.5258 2.00488 12.0029C2.00488 6.48008 6.48204 2.00293 12.0049 2.00293C17.5277 2.00293 22.0049 6.48008 22.0049 12.0029C22.0049 17.5258 17.5277 22.0029 12.0049 22.0029ZM12.0049 20.0029C16.4232 20.0029 20.0049 16.4212 20.0049 12.0029C20.0049 7.58465 16.4232 4.00293 12.0049 4.00293C7.5866 4.00293 4.00488 7.58465 4.00488 12.0029C4.00488 16.4212 7.5866 20.0029 12.0049 20.0029ZM9.00488 8.00293H15.0049L17.5049 11.5029L12.0041 17.0029L6.50488 11.5029L9.00488 8.00293ZM10.0349 10.0029L9.11488 11.2929L12.0041 14.1829L14.8949 11.2929L13.9749 10.0029H10.0349Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/block.svg b/next/public/imgs/icons/block.svg
index 365899fe..36f0a601 100644
--- a/next/public/imgs/icons/block.svg
+++ b/next/public/imgs/icons/block.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.8302 8.63397L12.0001 10.8453L8.16997 8.63397L7.16997 10.366L11.0001 12.5773V17H13.0001V12.5773L16.8302 10.366L15.8302 8.63397Z" fill="#A1A8B3"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 2L20.6604 7V17L12.0001 22L3.33984 17V7L12.0001 2ZM5.33984 8.1547L12.0001 4.3094L18.6604 8.1547V15.8453L12.0001 19.6906L5.33984 15.8453V8.1547Z" fill="#A1A8B3"/>
+    <path d="M15.8302 8.63397L12.0001 10.8453L8.16997 8.63397L7.16997 10.366L11.0001 12.5773V17H13.0001V12.5773L16.8302 10.366L15.8302 8.63397Z" fill="var(--textTertiary, #A1A8B3)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 2L20.6604 7V17L12.0001 22L3.33984 17V7L12.0001 2ZM5.33984 8.1547L12.0001 4.3094L18.6604 8.1547V15.8453L12.0001 19.6906L5.33984 15.8453V8.1547Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/caret-right-s.svg b/next/public/imgs/icons/caret-right-s.svg
index e9c99bdb..4a790564 100644
--- a/next/public/imgs/icons/caret-right-s.svg
+++ b/next/public/imgs/icons/caret-right-s.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_8474_33738)">
-        <path d="M9.15686 16.157L10.6569 17.657L16.3137 12.0001L10.6569 6.34326L9.15686 7.84326L13.3137 12.0001L9.15686 16.157Z" fill="#A1A8B3"/>
+        <path d="M9.15686 16.157L10.6569 17.657L16.3137 12.0001L10.6569 6.34326L9.15686 7.84326L13.3137 12.0001L9.15686 16.157Z" fill="var(--textTertiary, #A1A8B3)"/>
     </g>
     <defs>
         <clipPath id="clip0_8474_33738">
diff --git a/next/public/imgs/icons/chain/acala.svg b/next/public/imgs/icons/chain/acala.svg
index e7feb482..dc9af2bc 100644
--- a/next/public/imgs/icons/chain/acala.svg
+++ b/next/public/imgs/icons/chain/acala.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M11.9378 13.1382C11.5725 13.1382 11.2173 13.1687 10.8737 13.2269L11.4029 12.3104C11.5816 12.2986 11.7604 12.2927 11.9378 12.2927C12.3533 12.2927 12.7761 12.3269 13.1848 12.3925L11.1301 8.83356L7.70955 14.7581L7.2207 13.9114L11.1224 7.1535L11.1304 7.16745L11.1381 7.15412L15.8467 15.3095H14.869L13.7685 13.4035C13.1951 13.2305 12.5822 13.1382 11.9378 13.1382Z"
           fill="url(#paint0_linear_8544_47661)"/>
     <path d="M16.1512 14.7724L11.5925 6.87665H12.5702L16.64 13.9257L16.1512 14.7724Z"
diff --git a/next/public/imgs/icons/chain/bifrost.svg b/next/public/imgs/icons/chain/bifrost.svg
index c3b814d6..6973819a 100644
--- a/next/public/imgs/icons/chain/bifrost.svg
+++ b/next/public/imgs/icons/chain/bifrost.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M18.6611 6.68774H15.1775L4.72693 17.1383H11.694L18.6611 6.68774Z" fill="url(#paint0_linear_4244_1385913)"/>
     <defs>
         <linearGradient id="paint0_linear_4244_1385913" x1="11.694" y1="6.68774" x2="11.694" y2="17.1383" gradientUnits="userSpaceOnUse">
diff --git a/next/public/imgs/icons/chain/centrifuge.svg b/next/public/imgs/icons/chain/centrifuge.svg
index 0b49a162..5958ea20 100644
--- a/next/public/imgs/icons/chain/centrifuge.svg
+++ b/next/public/imgs/icons/chain/centrifuge.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M5.16794 15.1518C4.71841 14.1894 4.46731 13.1157 4.46731 11.9835C4.46731 7.84407 7.82295 4.48845 11.9624 4.48845C14.2672 4.48845 16.329 5.52892 17.7039 7.16571L18.5242 6.47746C16.9528 4.60683 14.5965 3.41772 11.9624 3.41772C7.23162 3.41772 3.39661 7.25274 3.39661 11.9835C3.39661 13.2775 3.68356 14.5045 4.19731 15.6043L5.16794 15.1518Z"
           fill="black"/>
diff --git a/next/public/imgs/icons/chain/crust.svg b/next/public/imgs/icons/chain/crust.svg
index aa35d8dc..022dffef 100644
--- a/next/public/imgs/icons/chain/crust.svg
+++ b/next/public/imgs/icons/chain/crust.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M6.56657 8.17233L12.0978 4.85836C12.2887 4.74383 12.5234 4.74383 12.7144 4.85836L16.1981 6.94527C16.5484 7.15433 16.6115 7.65242 16.326 7.95055L15.1455 9.18307C14.9493 9.38849 14.6428 9.4303 14.4011 9.28487L12.7196 8.27777C12.5252 8.16142 12.2852 8.16142 12.0908 8.27777L6.2583 11.8081V8.72678C6.2583 8.49773 6.37565 8.28686 6.56657 8.17233Z"
           fill="#FA8C16"/>
     <path d="M16.2104 17.0456L12.7126 19.1416C12.5217 19.2561 12.287 19.2561 12.0978 19.1416L6.56657 15.8276C6.37565 15.7131 6.2583 15.5022 6.2583 15.2732V12.4791L9.108 10.7648V13.5662C9.108 13.7952 9.22536 14.0061 9.41627 14.1188L12.0978 15.7258C12.2887 15.8403 12.5234 15.8403 12.7126 15.7258L14.4098 14.7096C14.6515 14.5642 14.9563 14.606 15.1525 14.8114L16.3365 16.0403C16.6237 16.3366 16.5607 16.8365 16.2104 17.0456Z"
diff --git a/next/public/imgs/icons/chain/darwinia.svg b/next/public/imgs/icons/chain/darwinia.svg
index 7be22261..a14276a6 100644
--- a/next/public/imgs/icons/chain/darwinia.svg
+++ b/next/public/imgs/icons/chain/darwinia.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M7.14954 8C7.65902 8 8.06453 8.42681 8.06453 8.96306C8.06453 9.37893 7.81498 9.72914 7.46147 9.87141V14.8509C8.11651 14.8181 8.71957 14.6977 9.26025 14.4897V10.6703C8.90673 10.539 8.65719 10.1778 8.65719 9.76197C8.65719 9.22572 9.06269 8.79891 9.57217 8.79891C10.0817 8.79891 10.4872 9.22572 10.4872 9.76197C10.4872 10.1778 10.2376 10.528 9.8841 10.6703V14.1943C10.4872 13.855 10.9654 13.3953 11.2878 12.8263C11.0694 12.6183 10.9343 12.3228 10.9343 11.9945C10.9343 11.3707 11.4125 10.8782 11.9948 10.8782C12.0468 10.8782 12.0884 10.8782 12.1404 10.8892C12.9514 9.40082 14.6878 8.50342 16.7673 8.48153H16.8505H20.1881C20.3648 8.48153 20.5 8.6238 20.5 8.80985C20.5 8.98495 20.3752 9.12722 20.2089 9.13817H20.1881H19.585V14.1286C19.9385 14.2599 20.1881 14.6211 20.1881 15.0369C20.1881 15.5732 19.7826 16 19.2731 16C18.7636 16 18.3581 15.5732 18.3581 15.0369C18.3581 14.6211 18.6076 14.2709 18.9612 14.1286V9.12722H17.1624V14.1176C17.5159 14.249 17.7654 14.6101 17.7654 15.026C17.7654 15.5622 17.3599 15.9891 16.8505 15.9891C16.341 15.9891 15.9355 15.5622 15.9355 15.026C15.9355 14.6101 16.185 14.2599 16.5385 14.1176V9.13817C15.8835 9.171 15.2804 9.29138 14.7398 9.49932V13.3187C15.0933 13.4501 15.3428 13.8112 15.3428 14.2271C15.3428 14.7633 14.9373 15.1901 14.4278 15.1901C13.9183 15.1901 13.5128 14.7633 13.5128 14.2271C13.5128 13.8112 13.7624 13.461 14.1159 13.3187V9.7948C13.5128 10.1341 13.0346 10.5937 12.7122 11.1628C12.9306 11.3707 13.0657 11.6662 13.0657 11.9945C13.0657 12.6183 12.5875 13.1108 12.0052 13.1108C11.9532 13.1108 11.9116 13.1108 11.8596 13.0999C11.0486 14.5882 9.31223 15.4856 7.23272 15.5075H7.14954H3.81193C3.63517 15.5075 3.5 15.3653 3.5 15.1792C3.5 15.0041 3.62477 14.8618 3.79113 14.8509H3.81193H4.41498V9.87141C4.06147 9.72914 3.81193 9.37893 3.81193 8.96306C3.81193 8.42681 4.21743 8 4.72691 8C5.23639 8 5.6419 8.42681 5.6419 8.96306C5.6419 9.37893 5.39235 9.72914 5.03884 9.87141V14.8618H6.83761V9.87141C6.4841 9.74008 6.23456 9.37893 6.23456 8.96306C6.23456 8.42681 6.64006 8 7.14954 8Z"
           fill="white"/>
diff --git a/next/public/imgs/icons/chain/default.svg b/next/public/imgs/icons/chain/default.svg
index 65c5a392..3727c5e7 100644
--- a/next/public/imgs/icons/chain/default.svg
+++ b/next/public/imgs/icons/chain/default.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4 7.8C13.4 6.80589 14.2059 6 15.2 6C16.1941 6 17 6.80589 17 7.8C17 8.58373 16.4991 9.25048 15.8 9.49758V14.5024C16.4991 14.7495 17 15.4163 17 16.2C17 17.1941 16.1941 18 15.2 18C14.2059 18 13.4 17.1941 13.4 16.2C13.4 16.1721 13.4006 16.1444 13.4019 16.1168L8.07931 13.8662C7.75307 14.1958 7.30038 14.4 6.8 14.4C5.80589 14.4 5 13.5941 5 12.6C5 11.6059 5.80589 10.8 6.8 10.8C7.23121 10.8 7.62701 10.9516 7.93698 11.2045L13.4345 8.15258C13.4119 8.03856 13.4 7.92067 13.4 7.8ZM15.2 7.2C14.8686 7.2 14.6 7.46863 14.6 7.8C14.6 8.13137 14.8686 8.4 15.2 8.4C15.5314 8.4 15.8 8.13137 15.8 7.8C15.8 7.46863 15.5314 7.2 15.2 7.2ZM8.56194 12.23C8.58689 12.3494 8.6 12.4732 8.6 12.6C8.6 12.6607 8.597 12.7207 8.59113 12.7798L13.8539 15.005C14.054 14.7797 14.31 14.6049 14.6 14.5024V9.49758C14.3972 9.42589 14.2111 9.31889 14.049 9.18396L8.56194 12.23ZM14.6 16.2C14.6 15.8686 14.8686 15.6 15.2 15.6C15.5314 15.6 15.8 15.8686 15.8 16.2C15.8 16.5314 15.5314 16.8 15.2 16.8C14.8686 16.8 14.6 16.5314 14.6 16.2ZM6.2 12.6C6.2 12.2686 6.46863 12 6.8 12C7.13137 12 7.4 12.2686 7.4 12.6C7.4 12.9314 7.13137 13.2 6.8 13.2C6.46863 13.2 6.2 12.9314 6.2 12.6Z" fill="#E2E8F0"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4 7.8C13.4 6.80589 14.2059 6 15.2 6C16.1941 6 17 6.80589 17 7.8C17 8.58373 16.4991 9.25048 15.8 9.49758V14.5024C16.4991 14.7495 17 15.4163 17 16.2C17 17.1941 16.1941 18 15.2 18C14.2059 18 13.4 17.1941 13.4 16.2C13.4 16.1721 13.4006 16.1444 13.4019 16.1168L8.07931 13.8662C7.75307 14.1958 7.30038 14.4 6.8 14.4C5.80589 14.4 5 13.5941 5 12.6C5 11.6059 5.80589 10.8 6.8 10.8C7.23121 10.8 7.62701 10.9516 7.93698 11.2045L13.4345 8.15258C13.4119 8.03856 13.4 7.92067 13.4 7.8ZM15.2 7.2C14.8686 7.2 14.6 7.46863 14.6 7.8C14.6 8.13137 14.8686 8.4 15.2 8.4C15.5314 8.4 15.8 8.13137 15.8 7.8C15.8 7.46863 15.5314 7.2 15.2 7.2ZM8.56194 12.23C8.58689 12.3494 8.6 12.4732 8.6 12.6C8.6 12.6607 8.597 12.7207 8.59113 12.7798L13.8539 15.005C14.054 14.7797 14.31 14.6049 14.6 14.5024V9.49758C14.3972 9.42589 14.2111 9.31889 14.049 9.18396L8.56194 12.23ZM14.6 16.2C14.6 15.8686 14.8686 15.6 15.2 15.6C15.5314 15.6 15.8 15.8686 15.8 16.2C15.8 16.5314 15.5314 16.8 15.2 16.8C14.8686 16.8 14.6 16.5314 14.6 16.2ZM6.2 12.6C6.2 12.2686 6.46863 12 6.8 12C7.13137 12 7.4 12.2686 7.4 12.6C7.4 12.9314 7.13137 13.2 6.8 13.2C6.46863 13.2 6.2 12.9314 6.2 12.6Z" fill="var(--strokeActionDefault)"/>
 </svg>
diff --git a/next/public/imgs/icons/chain/ethereum.svg b/next/public/imgs/icons/chain/ethereum.svg
index 775185fe..9f3bc73a 100644
--- a/next/public/imgs/icons/chain/ethereum.svg
+++ b/next/public/imgs/icons/chain/ethereum.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path opacity="0.8" d="M11.9983 3.37708V15.2888L17.2458 12.1599L11.9983 3.37708Z" fill="#5B65CE"/>
     <path opacity="0.5" d="M11.9993 3.37708L6.75171 12.1599L11.9993 15.2888V9.75398V3.37708Z" fill="#5B65CE"/>
     <path opacity="0.8" d="M11.9982 16.2906L11.9336 16.37V20.4322L11.9982 20.6225L17.2489 13.1633L11.9982 16.2906Z"
diff --git a/next/public/imgs/icons/chain/interlay.svg b/next/public/imgs/icons/chain/interlay.svg
index 70920701..c232a3d0 100644
--- a/next/public/imgs/icons/chain/interlay.svg
+++ b/next/public/imgs/icons/chain/interlay.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <circle cx="12" cy="12" r="11" fill="white"/>
     <path d="M18.2697 17.0413H9.45998C9.41867 17.0413 9.37737 17.0303 9.33981 17.0083L6.15541 15.0873C6.05026 15.0248 6.01271 14.8889 6.07655 14.7861C6.11785 14.72 6.19296 14.6759 6.27557 14.6796H15.0853C15.1266 14.6796 15.1679 14.6906 15.2054 14.7126L18.3898 16.6336C18.495 16.6961 18.5325 16.832 18.4687 16.9348C18.4274 17.0009 18.3523 17.0413 18.2697 17.0413ZM9.52382 16.5969H17.4736L15.0252 15.1167H7.07543L9.52382 16.5969Z"
           fill="black"/>
diff --git a/next/public/imgs/icons/chain/karura.svg b/next/public/imgs/icons/chain/karura.svg
index 29357ef6..b6327a2f 100644
--- a/next/public/imgs/icons/chain/karura.svg
+++ b/next/public/imgs/icons/chain/karura.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M14.8938 6.01855L10.8021 9.7069C10.3785 10.0894 9.82726 10.3009 9.25496 10.3036L8.03537 10.3062L8.03142 6.01855H5.82642V18.2717H7.0289C7.7012 18.2717 8.32875 17.9179 8.65766 17.3368C8.6603 17.333 8.66161 17.329 8.66424 17.3264C8.88263 16.9373 8.99183 16.1683 8.97078 15.6435C8.92342 14.4437 8.7287 14.1316 8.7287 14.1316C8.68792 14.9541 7.82224 14.9985 7.82224 14.9985C8.43795 14.4149 8.10246 13.9736 8.10246 13.9736C7.0118 14.744 6.73947 13.9213 6.71842 13.847C6.75263 13.8757 7.06311 14.1329 7.65251 13.3313C8.27613 12.4839 9.10761 11.0712 9.63649 10.7083C10.1667 10.344 10.6693 10.3741 10.6693 10.3741C10.6693 10.3741 10.9587 9.98498 11.7244 9.6612C12.49 9.34001 12.9808 9.81134 12.9808 9.81134C12.1981 10.438 11.135 11.4669 11.0758 12.9408C11.0284 14.1342 13.6202 16.1814 13.165 19.2052C13.4374 18.5184 13.5466 17.8303 13.4531 16.9791C13.3782 16.2923 12.9321 14.8575 12.9321 14.8575L15.4213 18.2703H18.1736L12.794 10.9368L18.1736 6.01855H14.8938Z" fill="url(#paint0_linear_4251_1386841)"/>
     <defs>
         <linearGradient id="paint0_linear_4251_1386841" x1="24.6648" y1="23.243" x2="13.2341" y2="0.251154" gradientUnits="userSpaceOnUse">
diff --git a/next/public/imgs/icons/chain/khala.svg b/next/public/imgs/icons/chain/khala.svg
index 030516b1..c17ba9b0 100644
--- a/next/public/imgs/icons/chain/khala.svg
+++ b/next/public/imgs/icons/chain/khala.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M18.0085 18.8422H14.7311V16.0847H12.5462V12.7757H15.8236V15.5332H18.0085V18.8422Z" fill="#02FFFF"/>
     <path d="M9.26883 12.7757H12.5462V9.46663H18.0085V6.15759H12.5462V9.46663H9.26883V6.15759H5.99146V18.8422H9.26883V12.7757Z" fill="#02FFFF"/>
 </svg>
diff --git a/next/public/imgs/icons/chain/kintsugi.svg b/next/public/imgs/icons/chain/kintsugi.svg
index 8c533ded..e12591e0 100644
--- a/next/public/imgs/icons/chain/kintsugi.svg
+++ b/next/public/imgs/icons/chain/kintsugi.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="11.5" fill="#041433" stroke="#F0F3F8"/>
+<circle cx="12" cy="12" r="11.5" fill="#041433" stroke="var(--fillBgTertiary, #f0f3f8)"/>
 <path d="M14.3483 9.66264C13.7418 9.06584 12.9244 8.73177 12.0746 8.73501C12.0649 8.73501 12.0519 8.73501 12.0422 8.73501C10.2453 8.76096 8.81173 10.2335 8.83443 12.0304C8.85714 13.8045 10.3005 15.2316 12.0746 15.2381H12.1071C13.904 15.2219 15.344 13.7526 15.3278 11.9558C15.3181 11.0898 14.9678 10.2659 14.3483 9.66264Z" fill="url(#paint0_linear_4449_23929)"/>
 <path d="M13.4628 9.27024C13.0801 9.17294 12.7752 9.25402 12.5254 9.50701C12.4962 9.53945 12.467 9.57188 12.4378 9.60756C12.373 9.68865 12.3178 9.76 12.1913 9.78919C12.0227 9.82163 11.8475 9.83136 11.6756 9.8119C11.627 9.80541 11.5848 9.79568 11.5491 9.78595C11.4194 9.75676 11.3448 9.7373 11.1891 9.88325C11.1405 9.93191 11.0983 9.9838 11.0594 10.0422C10.9913 10.1362 10.9264 10.2238 10.8226 10.266C10.774 10.2854 10.7221 10.2952 10.6702 10.2984C10.6669 10.2952 10.6604 10.2952 10.6572 10.2919L10.6539 10.2984C10.5794 10.3017 10.5048 10.2952 10.4302 10.2822C10.3718 10.2725 10.3134 10.2692 10.255 10.266C10.3361 10.1492 10.4042 10.026 10.4626 9.89947C10.5696 9.88325 10.6604 9.8119 10.7513 9.74379C10.7967 9.70486 10.8486 9.66919 10.9005 9.64C11.0788 9.54269 11.1632 9.46161 11.3189 9.2897C11.4648 9.13077 11.6205 9.03023 11.8119 8.92968C11.9059 8.88103 11.9903 8.81292 12.0551 8.72534C12.6908 8.72859 13.2844 8.87778 13.8066 9.22159C13.7514 9.26376 13.6347 9.31241 13.4628 9.27024Z" fill="#DADADA"/>
 <path d="M15.2241 11.5309C15.1787 11.5147 15.1366 11.492 15.0944 11.4693C15.0295 11.4271 14.9582 11.4012 14.8836 11.385L14.6955 11.2909C14.3971 11.239 14.2738 11.2779 13.9722 11.1936C13.8327 11.1514 13.6867 11.1352 13.5408 11.1385L13.5343 11.132L13.5278 11.1385C13.424 11.145 13.3202 11.1579 13.2035 11.1741L13.1224 11.1839C13.0899 11.1871 13.0543 11.1936 13.0121 11.2001C12.7559 11.2423 12.3245 11.3104 12.1753 11.1417L12.1656 11.1482C11.9353 11.012 11.6758 10.9406 11.4098 10.9406C10.9947 10.9406 10.8649 10.8271 10.6282 10.626C10.5892 10.5903 10.5438 10.5546 10.4952 10.5125C10.5179 10.5125 10.5373 10.5125 10.56 10.5125C10.6671 10.5514 10.7806 10.5709 10.8941 10.5709C10.9168 10.5709 10.9363 10.5709 10.959 10.5676C11.0174 10.5611 11.0725 10.5352 11.1147 10.493C11.1341 10.4768 11.1536 10.4606 11.1731 10.4476C11.2185 10.4217 11.2704 10.4087 11.3255 10.4119C11.3482 10.4119 11.3742 10.4087 11.3969 10.4054C11.5104 10.3925 11.5882 10.3276 11.6661 10.2692C11.7374 10.2141 11.8055 10.1589 11.8964 10.146C11.9191 10.1427 11.9418 10.1395 11.9677 10.1395C12.0293 10.1395 12.0877 10.1265 12.1429 10.0973C12.172 10.0779 12.198 10.0552 12.2207 10.0292C12.2466 9.99677 12.2823 9.97407 12.318 9.95461C12.438 9.91244 12.4899 9.81514 12.5548 9.73081C12.584 9.69513 12.7169 9.67567 12.7526 9.63999C13.0218 9.36106 13.2391 9.26375 13.6543 9.36754C13.8651 9.41944 13.9462 9.42917 14.0176 9.37727C14.7214 9.89947 15.182 10.6844 15.2987 11.5504C15.2695 11.5471 15.2468 11.5407 15.2241 11.5309Z" fill="#DADADA"/>
diff --git a/next/public/imgs/icons/chain/kusama.svg b/next/public/imgs/icons/chain/kusama.svg
index 06969408..660cc982 100644
--- a/next/public/imgs/icons/chain/kusama.svg
+++ b/next/public/imgs/icons/chain/kusama.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M4.69266 15.3798V15.5341C4.69266 15.5341 10.7087 13.3076 11.8782 13.8826L11.1727 14.0772C11.2345 14.0772 12.3778 14.1474 12.3778 14.1474C12.4046 14.3686 12.4834 14.5814 12.6087 14.7706C12.7339 14.9598 12.9024 15.1206 13.102 15.2413C13.7906 15.6674 13.8037 15.8988 13.8037 15.8988C13.8037 15.8988 13.4463 16.0355 13.4463 16.2091C13.7786 16.1199 14.1223 16.0734 14.468 16.0706C14.7798 16.081 15.089 16.1275 15.3886 16.2091C15.3886 16.2091 15.3531 16.0338 14.8721 15.8988C14.3912 15.7638 13.9272 15.2869 13.6933 15.0222C13.553 14.853 13.462 14.6525 13.4292 14.4405C13.3964 14.2285 13.4229 14.0121 13.5062 13.8125C13.6727 13.4128 14.2546 13.1902 15.4354 12.6151C16.8369 11.9367 17.1569 11.4282 17.3534 11.0373C17.5499 10.6463 17.8455 9.86269 18.0083 9.49453C18.1437 9.15041 18.3766 8.84736 18.682 8.61795C18.8897 8.46894 19.8365 8.13409 19.8365 8.13409C19.8365 8.13409 19.1142 7.5573 18.8784 7.38374C18.5838 7.12226 18.2111 6.95104 17.81 6.89286C17.3085 6.8315 16.7995 7.14356 16.4552 7.35218C16.1109 7.56081 15.4447 8.1709 15.1753 8.34622C14.9058 8.52153 14.2153 8.69685 13.1169 9.32622C12.0185 9.9556 7.65856 12.5625 7.65856 12.5625L8.7813 12.573L3.74208 15.0222H4.24545L3.51941 15.5481C3.92153 15.6344 4.34361 15.5742 4.70016 15.3798H4.69266Z" fill="black"/>
 </svg>
diff --git a/next/public/imgs/icons/chain/moonriver.svg b/next/public/imgs/icons/chain/moonriver.svg
index de63cc49..9bc5dc0e 100644
--- a/next/public/imgs/icons/chain/moonriver.svg
+++ b/next/public/imgs/icons/chain/moonriver.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
-          fill="#F0F3F8"/>
+          fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M8.37241 12.1666C8.5377 12.1666 8.67169 12.3006 8.67169 12.4659L8.67169 15.9883C8.67169 16.1536 8.5377 16.2875 8.37241 16.2875C8.20713 16.2875 8.07313 16.1536 8.07313 15.9883L8.07313 12.4659C8.07313 12.3006 8.20713 12.1666 8.37241 12.1666Z"
           fill="#4FCCC6"/>
     <path d="M6.91756 13.0025C7.08285 13.0025 7.21684 13.1365 7.21684 13.3018L7.21684 15.8031C7.21684 15.9684 7.08285 16.1024 6.91756 16.1024C6.75228 16.1024 6.61829 15.9684 6.61829 15.8031L6.61828 13.3018C6.61828 13.1365 6.75228 13.0025 6.91756 13.0025Z"
diff --git a/next/public/imgs/icons/chain/polkadex.svg b/next/public/imgs/icons/chain/polkadex.svg
index 747d648c..34ada32f 100644
--- a/next/public/imgs/icons/chain/polkadex.svg
+++ b/next/public/imgs/icons/chain/polkadex.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
 <path d="M18.891 16.9614V15.0876L15.6805 11.847H13.7471L18.891 16.9614Z" fill="#1C1C26"/>
 <path d="M5.07715 7.15033V9.02435L8.28756 12.2647H10.221L5.07715 7.15033Z" fill="#1C1C26"/>
 <path d="M6.76318 5.14911H8.63697L11.8776 8.35953L15.0895 5.14911H17.0475L11.8776 10.293L6.76318 5.14911Z" fill="#1C1C26"/>
diff --git a/next/public/imgs/icons/chain/polkadot.svg b/next/public/imgs/icons/chain/polkadot.svg
index 26f448b6..d290e8d4 100644
--- a/next/public/imgs/icons/chain/polkadot.svg
+++ b/next/public/imgs/icons/chain/polkadot.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path d="M12 7.4598C13.5696 7.4598 14.8421 6.72492 14.8421 5.8184C14.8421 4.91188 13.5696 4.177 12 4.177C10.4303 4.177 9.15777 4.91188 9.15777 5.8184C9.15777 6.72492 10.4303 7.4598 12 7.4598Z" fill="#E6007A"/>
     <path d="M12 19.823C13.5696 19.823 14.8421 19.0881 14.8421 18.1816C14.8421 17.275 13.5696 16.5402 12 16.5402C10.4303 16.5402 9.15777 17.275 9.15777 18.1816C9.15777 19.0881 10.4303 19.823 12 19.823Z" fill="#E6007A"/>
     <path d="M8.03854 9.72995C8.82339 8.38072 8.81842 6.9195 8.02744 6.46624C7.23646 6.01298 5.959 6.73931 5.17415 8.08855C4.3893 9.43779 4.39427 10.899 5.18525 11.3523C5.97623 11.8055 7.25369 11.0792 8.03854 9.72995Z" fill="#E6007A"/>
diff --git a/next/public/imgs/icons/chain/statemine.svg b/next/public/imgs/icons/chain/statemine.svg
index b7c2c6ef..1a83cde7 100644
--- a/next/public/imgs/icons/chain/statemine.svg
+++ b/next/public/imgs/icons/chain/statemine.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F3F8"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5959 10.3104C15.7846 9.00498 15.5998 7.05877 14.1832 5.9634C12.8326 4.91915 10.85 5.02517 9.63793 6.16839C8.14342 6.81467 7.39819 8.48051 7.96664 9.99337C8.56107 11.5754 10.367 12.3911 12.0001 11.8154L10.9238 8.95081L10.1402 6.86526L12.0307 8.32705L14.5959 10.3104ZM16.0334 14.0066C16.6019 15.5195 15.8567 17.1853 14.3622 17.8316C13.1502 18.9749 11.1675 19.0809 9.81692 18.0366C8.40023 16.9413 8.21544 14.9951 9.40418 13.6897L11.9693 15.673L13.86 17.1349L13.0763 15.0492L12 12.1847C13.6332 11.6089 15.439 12.4246 16.0334 14.0066Z" fill="black"/>
 </svg>
diff --git a/next/public/imgs/icons/date.svg b/next/public/imgs/icons/date.svg
index 5a0aec35..1eaa152e 100644
--- a/next/public/imgs/icons/date.svg
+++ b/next/public/imgs/icons/date.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 4H21.5V21.5H2.5V4H7V2H9V4H15V2H17V4ZM19.5 12H4.5V19.5H19.5V12ZM15 6H9V8H7V6H4.5V10H19.5V6H17V8H15V6ZM6.5 14H8.5V16H6.5V14ZM11 14H13V16H11V14ZM15.5 14H17.5V16H15.5V14Z" fill="#A1A8B3"/>
+<path d="M17 4H21.5V21.5H2.5V4H7V2H9V4H15V2H17V4ZM19.5 12H4.5V19.5H19.5V12ZM15 6H9V8H7V6H4.5V10H19.5V6H17V8H15V6ZM6.5 14H8.5V16H6.5V14ZM11 14H13V16H11V14ZM15.5 14H17.5V16H15.5V14Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/exit.svg b/next/public/imgs/icons/exit.svg
index 2d0a3b66..fc77e279 100644
--- a/next/public/imgs/icons/exit.svg
+++ b/next/public/imgs/icons/exit.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H4V3.5V20.5V21.5H5H19H20V20.5V17.5H18V19.5H6V4.5H18V6.5H20V3.5V2.5H19H5ZM18 13V16L23 12L18 8V11H11V13H18Z" fill="#9DA9BB"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H4V3.5V20.5V21.5H5H19H20V20.5V17.5H18V19.5H6V4.5H18V6.5H20V3.5V2.5H19H5ZM18 13V16L23 12L18 8V11H11V13H18Z" fill="var(--textTertiary)"/>
 </svg>
diff --git a/next/public/imgs/icons/grey-discussions.svg b/next/public/imgs/icons/grey-discussions.svg
index 3117e44d..74535ea5 100644
--- a/next/public/imgs/icons/grey-discussions.svg
+++ b/next/public/imgs/icons/grey-discussions.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 22.5L11.2 19H6C5.73478 19 5.48043 18.8946 5.29289 18.7071C5.10536 18.5196 5 18.2652 5 18V7.103C5 6.83778 5.10536 6.58343 5.29289 6.39589C5.48043 6.20836 5.73478 6.103 6 6.103H22C22.2652 6.103 22.5196 6.20836 22.7071 6.39589C22.8946 6.58343 23 6.83778 23 7.103V18C23 18.2652 22.8946 18.5196 22.7071 18.7071C22.5196 18.8946 22.2652 19 22 19H16.8L14 22.5ZM15.839 17H21V8.103H7V17H12.161L14 19.298L15.839 17ZM2 2H19V4H3V15H1V3C1 2.73478 1.10536 2.48043 1.29289 2.29289C1.48043 2.10536 1.73478 2 2 2Z" fill="#A1A8B3"/>
+<path d="M14 22.5L11.2 19H6C5.73478 19 5.48043 18.8946 5.29289 18.7071C5.10536 18.5196 5 18.2652 5 18V7.103C5 6.83778 5.10536 6.58343 5.29289 6.39589C5.48043 6.20836 5.73478 6.103 6 6.103H22C22.2652 6.103 22.5196 6.20836 22.7071 6.39589C22.8946 6.58343 23 6.83778 23 7.103V18C23 18.2652 22.8946 18.5196 22.7071 18.7071C22.5196 18.8946 22.2652 19 22 19H16.8L14 22.5ZM15.839 17H21V8.103H7V17H12.161L14 19.298L15.839 17ZM2 2H19V4H3V15H1V3C1 2.73478 1.10536 2.48043 1.29289 2.29289C1.48043 2.10536 1.73478 2 2 2Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/grey-plus.svg b/next/public/imgs/icons/grey-plus.svg
index a7986187..5667f1df 100644
--- a/next/public/imgs/icons/grey-plus.svg
+++ b/next/public/imgs/icons/grey-plus.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8552 10.855V4.26904H13.1448V10.855H19.7307V13.1446H13.1448V19.7305H10.8552V13.1446H4.26929V10.855H10.8552Z" fill="#A1A8B3"/>
+<path d="M10.8552 10.855V4.26904H13.1448V10.855H19.7307V13.1446H13.1448V19.7305H10.8552V13.1446H4.26929V10.855H10.8552Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/identity/auth.svg b/next/public/imgs/icons/identity/auth.svg
index cd55750e..ee9a911d 100644
--- a/next/public/imgs/icons/identity/auth.svg
+++ b/next/public/imgs/icons/identity/auth.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z"
-          fill="#4CAF50"/>
+          fill="var(--textFeedbackSuccess, #4CAF50)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M10.2214 4.63086C10.4317 4.84114 10.4317 5.18207 10.2214 5.39236L6.11022 9.50353C6.00924 9.60451 5.87228 9.66124 5.72947 9.66124C5.58666 9.66124 5.4497 9.60451 5.34872 9.50353L3.58679 7.7416C3.37651 7.53131 3.37651 7.19038 3.58679 6.9801C3.79707 6.76981 4.13801 6.76981 4.34829 6.9801L5.72947 8.36128L9.45989 4.63086C9.67017 4.42057 10.0111 4.42057 10.2214 4.63086Z"
           fill="white"/>
diff --git a/next/public/imgs/icons/identity/error-grey.svg b/next/public/imgs/icons/identity/error-grey.svg
index db38187b..f533a1cb 100644
--- a/next/public/imgs/icons/identity/error-grey.svg
+++ b/next/public/imgs/icons/identity/error-grey.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z"
-          fill="#E2E8F0"/>
+          fill="var(--strokeActionDefault)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M3.5 6.99984C3.5 6.67767 3.74742 6.4165 4.05263 6.4165H9.94737C10.2526 6.4165 10.5 6.67767 10.5 6.99984C10.5 7.322 10.2526 7.58317 9.94737 7.58317H4.05263C3.74742 7.58317 3.5 7.322 3.5 6.99984Z"
           fill="#506176"/>
diff --git a/next/public/imgs/icons/identity/error.svg b/next/public/imgs/icons/identity/error.svg
index 75d5de36..1d478a82 100644
--- a/next/public/imgs/icons/identity/error.svg
+++ b/next/public/imgs/icons/identity/error.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z" fill="#EE4444"/>
+    <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z" fill="var(--textFeedbackError, #ee4444)"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 6.99984C3.5 6.67767 3.74742 6.4165 4.05263 6.4165H9.94737C10.2526 6.4165 10.5 6.67767 10.5 6.99984C10.5 7.322 10.2526 7.58317 9.94737 7.58317H4.05263C3.74742 7.58317 3.5 7.322 3.5 6.99984Z" fill="white"/>
 </svg>
diff --git a/next/public/imgs/icons/identity/sub-grey.svg b/next/public/imgs/icons/identity/sub-grey.svg
index 62400d86..1872f629 100644
--- a/next/public/imgs/icons/identity/sub-grey.svg
+++ b/next/public/imgs/icons/identity/sub-grey.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z"
-          fill="#E2E8F0"/>
+          fill="var(--strokeActionDefault)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M9.36891 3.89493C9.20391 3.82661 9.02706 3.79146 8.84848 3.7915C8.6699 3.79155 8.49307 3.82677 8.3281 3.89517C8.16313 3.96357 8.01326 4.0638 7.88704 4.19014L7.07829 4.99889C6.90743 5.16974 6.63042 5.16974 6.45957 4.99889C6.28871 4.82804 6.28871 4.55103 6.45957 4.38017L7.26803 3.57171C7.47546 3.36413 7.72189 3.19929 7.99297 3.08689C8.26411 2.97447 8.55475 2.91657 8.84828 2.9165C9.1418 2.91644 9.43247 2.9742 9.70366 3.0865C9.97486 3.19879 10.2213 3.36342 10.4288 3.57097C10.6364 3.77853 10.801 4.02494 10.9133 4.29614C11.0256 4.56733 11.0834 4.858 11.0833 5.15152C11.0832 5.44505 11.0253 5.73568 10.9129 6.00683C10.8005 6.27791 10.6358 6.52419 10.4282 6.73162L9.27308 7.88677C9.06559 8.09427 8.81926 8.25886 8.54816 8.37115C8.27705 8.48344 7.98649 8.54124 7.69305 8.54124C7.39961 8.54124 7.10905 8.48344 6.83795 8.37115C6.56684 8.25886 6.32052 8.09426 6.11302 7.88677C5.94217 7.71592 5.94217 7.43891 6.11302 7.26805C6.28388 7.0972 6.56089 7.0972 6.73174 7.26805C6.85798 7.3943 7.00785 7.49444 7.17279 7.56276C7.33774 7.63108 7.51452 7.66624 7.69305 7.66624C7.87158 7.66624 8.04837 7.63108 8.21331 7.56276C8.37825 7.49443 8.52812 7.3943 8.65436 7.26805L9.80951 6.1129C9.93585 5.98668 10.0362 5.83666 10.1046 5.6717C10.173 5.50673 10.2083 5.3299 10.2083 5.15132C10.2083 4.97273 10.1732 4.79589 10.1049 4.63089C10.0365 4.46589 9.93638 4.31597 9.81011 4.18969C9.68383 4.06341 9.53391 3.96325 9.36891 3.89493ZM6.30687 6.33343C6.12834 6.33343 5.95155 6.3686 5.78661 6.43692C5.62167 6.50524 5.4718 6.60538 5.34556 6.73162L4.19041 7.88677C4.06407 8.01299 3.96369 8.16301 3.89529 8.32798C3.82689 8.49295 3.79167 8.66977 3.79163 8.84836C3.79158 9.02694 3.82673 9.20379 3.89505 9.36878C3.96337 9.53378 4.06353 9.6837 4.18981 9.80998C4.31609 9.93626 4.46601 10.0364 4.63101 10.1047C4.79601 10.1731 4.97285 10.2082 5.15144 10.2082C5.33003 10.2081 5.50685 10.1729 5.67182 10.1045C5.83679 10.0361 5.98666 9.93587 6.11288 9.80954L6.92163 9.00078C7.09249 8.82993 7.3695 8.82993 7.54035 9.00078C7.71121 9.17164 7.71121 9.44865 7.54035 9.6195L6.73189 10.428C6.52446 10.6355 6.27803 10.8004 6.00695 10.9128C5.73581 11.0252 5.44517 11.0831 5.15164 11.0832C4.85812 11.0832 4.56746 11.0255 4.29626 10.9132C4.02506 10.8009 3.77865 10.6363 3.5711 10.4287C3.36354 10.2211 3.19891 9.97473 3.08662 9.70354C2.97432 9.43234 2.91656 9.14168 2.91663 8.84815C2.91669 8.55463 2.97459 8.26399 3.08702 7.99285C3.19944 7.7217 3.36418 7.47537 3.57183 7.26791L4.72684 6.1129C4.93433 5.90541 5.18066 5.74082 5.45176 5.62852C5.72287 5.51623 6.01343 5.45843 6.30687 5.45843C6.60031 5.45843 6.89087 5.51623 7.16197 5.62852C7.43308 5.74082 7.67941 5.90541 7.8869 6.1129C8.05775 6.28376 8.05775 6.56077 7.8869 6.73162C7.71604 6.90247 7.43903 6.90247 7.26818 6.73162C7.14194 6.60538 6.99207 6.50524 6.82713 6.43692C6.66218 6.3686 6.4854 6.33343 6.30687 6.33343Z"
           fill="#506176"/>
diff --git a/next/public/imgs/icons/identity/sub-red.svg b/next/public/imgs/icons/identity/sub-red.svg
index d4cefec3..bc73c390 100644
--- a/next/public/imgs/icons/identity/sub-red.svg
+++ b/next/public/imgs/icons/identity/sub-red.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z"
-          fill="#EE4444"/>
+          fill="var(--textFeedbackError, #ee4444)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M9.36891 3.89493C9.20391 3.82661 9.02706 3.79146 8.84848 3.7915C8.6699 3.79155 8.49307 3.82677 8.3281 3.89517C8.16313 3.96357 8.01326 4.0638 7.88704 4.19014L7.07829 4.99889C6.90743 5.16974 6.63042 5.16974 6.45957 4.99889C6.28871 4.82804 6.28871 4.55103 6.45957 4.38017L7.26803 3.57171C7.47546 3.36413 7.72189 3.19929 7.99297 3.08689C8.26411 2.97447 8.55475 2.91657 8.84828 2.9165C9.1418 2.91644 9.43247 2.9742 9.70366 3.0865C9.97486 3.19879 10.2213 3.36342 10.4288 3.57097C10.6364 3.77853 10.801 4.02494 10.9133 4.29614C11.0256 4.56733 11.0834 4.858 11.0833 5.15152C11.0832 5.44505 11.0253 5.73568 10.9129 6.00683C10.8005 6.27791 10.6358 6.52419 10.4282 6.73162L9.27308 7.88677C9.06559 8.09427 8.81926 8.25886 8.54816 8.37115C8.27705 8.48344 7.98649 8.54124 7.69305 8.54124C7.39961 8.54124 7.10905 8.48344 6.83795 8.37115C6.56684 8.25886 6.32052 8.09426 6.11302 7.88677C5.94217 7.71592 5.94217 7.43891 6.11302 7.26805C6.28388 7.0972 6.56089 7.0972 6.73174 7.26805C6.85798 7.3943 7.00785 7.49444 7.17279 7.56276C7.33774 7.63108 7.51452 7.66624 7.69305 7.66624C7.87158 7.66624 8.04837 7.63108 8.21331 7.56276C8.37825 7.49443 8.52812 7.3943 8.65436 7.26805L9.80951 6.1129C9.93585 5.98668 10.0362 5.83666 10.1046 5.6717C10.173 5.50673 10.2083 5.3299 10.2083 5.15132C10.2083 4.97273 10.1732 4.79589 10.1049 4.63089C10.0365 4.46589 9.93638 4.31597 9.81011 4.18969C9.68383 4.06341 9.53391 3.96325 9.36891 3.89493ZM6.30687 6.33343C6.12834 6.33343 5.95155 6.3686 5.78661 6.43692C5.62167 6.50524 5.4718 6.60538 5.34556 6.73162L4.19041 7.88677C4.06407 8.01299 3.96369 8.16301 3.89529 8.32798C3.82689 8.49295 3.79167 8.66977 3.79163 8.84836C3.79158 9.02694 3.82673 9.20379 3.89505 9.36878C3.96337 9.53378 4.06353 9.6837 4.18981 9.80998C4.31609 9.93626 4.46601 10.0364 4.63101 10.1047C4.79601 10.1731 4.97285 10.2082 5.15144 10.2082C5.33003 10.2081 5.50685 10.1729 5.67182 10.1045C5.83679 10.0361 5.98666 9.93587 6.11288 9.80954L6.92163 9.00078C7.09249 8.82993 7.3695 8.82993 7.54035 9.00078C7.71121 9.17164 7.71121 9.44865 7.54035 9.6195L6.73189 10.428C6.52446 10.6355 6.27803 10.8004 6.00695 10.9128C5.73581 11.0252 5.44517 11.0831 5.15164 11.0832C4.85812 11.0832 4.56746 11.0255 4.29626 10.9132C4.02506 10.8009 3.77865 10.6363 3.5711 10.4287C3.36354 10.2211 3.19891 9.97473 3.08662 9.70354C2.97432 9.43234 2.91656 9.14168 2.91663 8.84815C2.91669 8.55463 2.97459 8.26399 3.08702 7.99285C3.19944 7.7217 3.36418 7.47537 3.57183 7.26791L4.72684 6.1129C4.93433 5.90541 5.18066 5.74082 5.45176 5.62852C5.72287 5.51623 6.01343 5.45843 6.30687 5.45843C6.60031 5.45843 6.89087 5.51623 7.16197 5.62852C7.43308 5.74082 7.67941 5.90541 7.8869 6.1129C8.05775 6.28376 8.05775 6.56077 7.8869 6.73162C7.71604 6.90247 7.43903 6.90247 7.26818 6.73162C7.14194 6.60538 6.99207 6.50524 6.82713 6.43692C6.66218 6.3686 6.4854 6.33343 6.30687 6.33343Z"
           fill="white"/>
diff --git a/next/public/imgs/icons/identity/sub.svg b/next/public/imgs/icons/identity/sub.svg
index 977d90d8..78e8d35a 100644
--- a/next/public/imgs/icons/identity/sub.svg
+++ b/next/public/imgs/icons/identity/sub.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 0C3.134 0 0 3.134 0 7C0 10.866 3.134 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0Z"
-          fill="#4CAF50"/>
+          fill="var(--textFeedbackSuccess, #4CAF50)"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M9.36891 3.89493C9.20391 3.82661 9.02706 3.79146 8.84848 3.7915C8.6699 3.79155 8.49307 3.82677 8.3281 3.89517C8.16313 3.96357 8.01326 4.0638 7.88704 4.19014L7.07829 4.99889C6.90743 5.16974 6.63042 5.16974 6.45957 4.99889C6.28871 4.82804 6.28871 4.55103 6.45957 4.38017L7.26803 3.57171C7.47546 3.36413 7.72189 3.19929 7.99297 3.08689C8.26411 2.97447 8.55475 2.91657 8.84828 2.9165C9.1418 2.91644 9.43247 2.9742 9.70366 3.0865C9.97486 3.19879 10.2213 3.36342 10.4288 3.57097C10.6364 3.77853 10.801 4.02494 10.9133 4.29614C11.0256 4.56733 11.0834 4.858 11.0833 5.15152C11.0832 5.44505 11.0253 5.73568 10.9129 6.00683C10.8005 6.27791 10.6358 6.52419 10.4282 6.73162L9.27308 7.88677C9.06559 8.09427 8.81926 8.25886 8.54816 8.37115C8.27705 8.48344 7.98649 8.54124 7.69305 8.54124C7.39961 8.54124 7.10905 8.48344 6.83795 8.37115C6.56684 8.25886 6.32052 8.09426 6.11302 7.88677C5.94217 7.71592 5.94217 7.43891 6.11302 7.26805C6.28388 7.0972 6.56089 7.0972 6.73174 7.26805C6.85798 7.3943 7.00785 7.49444 7.17279 7.56276C7.33774 7.63108 7.51452 7.66624 7.69305 7.66624C7.87158 7.66624 8.04837 7.63108 8.21331 7.56276C8.37825 7.49443 8.52812 7.3943 8.65436 7.26805L9.80951 6.1129C9.93585 5.98668 10.0362 5.83666 10.1046 5.6717C10.173 5.50673 10.2083 5.3299 10.2083 5.15132C10.2083 4.97273 10.1732 4.79589 10.1049 4.63089C10.0365 4.46589 9.93638 4.31597 9.81011 4.18969C9.68383 4.06341 9.53391 3.96325 9.36891 3.89493ZM6.30687 6.33343C6.12834 6.33343 5.95155 6.3686 5.78661 6.43692C5.62167 6.50524 5.4718 6.60538 5.34556 6.73162L4.19041 7.88677C4.06407 8.01299 3.96369 8.16301 3.89529 8.32798C3.82689 8.49295 3.79167 8.66977 3.79163 8.84836C3.79158 9.02694 3.82673 9.20379 3.89505 9.36878C3.96337 9.53378 4.06353 9.6837 4.18981 9.80998C4.31609 9.93626 4.46601 10.0364 4.63101 10.1047C4.79601 10.1731 4.97285 10.2082 5.15144 10.2082C5.33003 10.2081 5.50685 10.1729 5.67182 10.1045C5.83679 10.0361 5.98666 9.93587 6.11288 9.80954L6.92163 9.00078C7.09249 8.82993 7.3695 8.82993 7.54035 9.00078C7.71121 9.17164 7.71121 9.44865 7.54035 9.6195L6.73189 10.428C6.52446 10.6355 6.27803 10.8004 6.00695 10.9128C5.73581 11.0252 5.44517 11.0831 5.15164 11.0832C4.85812 11.0832 4.56746 11.0255 4.29626 10.9132C4.02506 10.8009 3.77865 10.6363 3.5711 10.4287C3.36354 10.2211 3.19891 9.97473 3.08662 9.70354C2.97432 9.43234 2.91656 9.14168 2.91663 8.84815C2.91669 8.55463 2.97459 8.26399 3.08702 7.99285C3.19944 7.7217 3.36418 7.47537 3.57183 7.26791L4.72684 6.1129C4.93433 5.90541 5.18066 5.74082 5.45176 5.62852C5.72287 5.51623 6.01343 5.45843 6.30687 5.45843C6.60031 5.45843 6.89087 5.51623 7.16197 5.62852C7.43308 5.74082 7.67941 5.90541 7.8869 6.1129C8.05775 6.28376 8.05775 6.56077 7.8869 6.73162C7.71604 6.90247 7.43903 6.90247 7.26818 6.73162C7.14194 6.60538 6.99207 6.50524 6.82713 6.43692C6.66218 6.3686 6.4854 6.33343 6.30687 6.33343Z"
           fill="white"/>
diff --git a/next/public/imgs/icons/info.svg b/next/public/imgs/icons/info.svg
index 283572c0..0ec148cc 100644
--- a/next/public/imgs/icons/info.svg
+++ b/next/public/imgs/icons/info.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.44531H4V3.44531V19.9479V20.9479H5H19H20V19.9479V3.44531V2.44531H19H5ZM6 18.9479V4.44531H18V18.9479H6ZM13 10.7237H11V16.7237H13V10.7237ZM13 6.72368H11V8.72368H13V6.72368Z" fill="#A1A8B3"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.44531H4V3.44531V19.9479V20.9479H5H19H20V19.9479V3.44531V2.44531H19H5ZM6 18.9479V4.44531H18V18.9479H6ZM13 10.7237H11V16.7237H13V10.7237ZM13 6.72368H11V8.72368H13V6.72368Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/ipfs.svg b/next/public/imgs/icons/ipfs.svg
index 3dd43272..c6af24f3 100644
--- a/next/public/imgs/icons/ipfs.svg
+++ b/next/public/imgs/icons/ipfs.svg
@@ -1,14 +1,14 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.64819 14.784L9.99496 19.6032L18.3417 14.784V5.14544L9.99496 0.326172L1.64819 5.14544V14.784Z" fill="#F0F3F8"/>
-<path d="M9.1405 1.47852L3.07916 4.97621C3.08909 5.08529 3.08909 5.19504 3.07916 5.30412L9.13057 8.80181C9.37938 8.61785 9.68065 8.51858 9.99009 8.51858C10.2995 8.51858 10.6008 8.61785 10.8496 8.80181L16.901 5.30412C16.8911 5.19504 16.8911 5.08529 16.901 4.97621L10.8595 1.47852C10.6107 1.66247 10.3095 1.76175 10 1.76175C9.69059 1.76175 9.38932 1.66247 9.1405 1.47852ZM17.4873 6.26797L11.4259 9.80541C11.4588 10.1122 11.3938 10.4216 11.2404 10.6892C11.0869 10.9569 10.8527 11.1693 10.5714 11.2959L10.5813 18.2515C10.6793 18.2948 10.7726 18.3481 10.8595 18.4105L16.9109 14.9128C16.8781 14.606 16.943 14.2967 17.0965 14.029C17.25 13.7613 17.4841 13.549 17.7655 13.4223V6.42696C17.6686 6.38154 17.5756 6.32837 17.4873 6.26797ZM2.50284 6.30772C2.41585 6.3702 2.3226 6.42348 2.22461 6.4667V13.4621C2.50941 13.5843 2.74678 13.7957 2.90092 14.0646C3.05506 14.3334 3.11762 14.6451 3.07916 14.9526L9.13057 18.4503C9.21756 18.3878 9.3108 18.3345 9.40879 18.2913V11.2959C9.12399 11.1737 8.88662 10.9623 8.73248 10.6934C8.57834 10.4246 8.51578 10.1129 8.55424 9.80541L2.50284 6.30772Z" fill="#FBFCFE"/>
-<path d="M9.99496 1.37113L17.4574 5.68363V14.2987L9.99496 18.6112L2.53255 14.2987V5.67369L9.99496 1.37113ZM9.99496 0.347656L1.64819 5.16692V14.8055L9.99496 19.6247L18.3417 14.8055V5.16692L9.99496 0.347656Z" fill="#F0F3F8"/>
-<path d="M10.0545 11.6046H9.9353C9.73028 11.6051 9.52718 11.5651 9.33767 11.4869C9.14816 11.4087 8.97598 11.2938 8.83101 11.1488C8.68604 11.0039 8.57115 10.8317 8.49293 10.6422C8.41472 10.4526 8.37472 10.2495 8.37525 10.0445V9.92529C8.37472 9.72027 8.41472 9.51718 8.49293 9.32766C8.57115 9.13815 8.68604 8.96597 8.83101 8.821C8.97598 8.67603 9.14816 8.56114 9.33767 8.48292C9.52718 8.40471 9.73028 8.36472 9.9353 8.36524H10.0545C10.2596 8.36472 10.4627 8.40471 10.6522 8.48292C10.8417 8.56114 11.0139 8.67603 11.1588 8.821C11.3038 8.96597 11.4187 9.13815 11.4969 9.32766C11.5751 9.51718 11.6151 9.72027 11.6146 9.92529V10.0445C11.6151 10.2495 11.5751 10.4526 11.4969 10.6422C11.4187 10.8317 11.3038 11.0039 11.1588 11.1488C11.0139 11.2938 10.8417 11.4087 10.6522 11.4869C10.4627 11.5651 10.2596 11.6051 10.0545 11.6046Z" fill="#F0F3F8"/>
-<path d="M10.0545 18.0137H9.93529C9.65813 18.0128 9.38578 18.0861 9.14644 18.2259C8.9071 18.3656 8.70946 18.5668 8.57397 18.8086L9.99491 19.6234L11.4159 18.8086C11.2804 18.5668 11.0827 18.3656 10.8434 18.2259C10.604 18.0861 10.3317 18.0128 10.0545 18.0137Z" fill="#F0F3F8"/>
-<path d="M18.3516 13.1934H18.292C18.087 13.1928 17.8839 13.2328 17.6944 13.311C17.5049 13.3893 17.3327 13.5042 17.1877 13.6491C17.0427 13.7941 16.9279 13.9663 16.8496 14.1558C16.7714 14.3453 16.7314 14.5484 16.732 14.7534V14.8727C16.7305 15.1375 16.7991 15.398 16.9307 15.6278L18.3516 14.8031V13.1934Z" fill="#F0F3F8"/>
-<path d="M16.9307 4.34961C16.8002 4.57991 16.7318 4.84011 16.7319 5.10479V5.22403C16.7314 5.42905 16.7714 5.63215 16.8496 5.82166C16.9278 6.01117 17.0427 6.18336 17.1877 6.32832C17.3327 6.47329 17.5049 6.58819 17.6944 6.6664C17.8839 6.74461 18.087 6.78461 18.292 6.78408H18.3516V5.16441L16.9307 4.34961Z" fill="#F0F3F8"/>
-<path d="M9.99491 0.345703L8.57397 1.16051C8.70881 1.4036 8.90604 1.60633 9.14533 1.74781C9.38462 1.88929 9.65731 1.96439 9.93529 1.96537H10.0545C10.3317 1.96621 10.604 1.89295 10.8434 1.75319C11.0827 1.61343 11.2804 1.41224 11.4159 1.17044L9.99491 0.345703Z" fill="#F0F3F8"/>
-<path d="M3.06913 4.33984L1.64819 5.16458V6.78425H1.70781C1.91283 6.78478 2.11593 6.74478 2.30544 6.66657C2.49495 6.58836 2.66714 6.47346 2.8121 6.32849C2.95707 6.18353 3.07197 6.01134 3.15018 5.82183C3.22839 5.63232 3.26839 5.42922 3.26786 5.2242V5.10496C3.2645 4.8376 3.1963 4.57505 3.06913 4.33984Z" fill="#F0F3F8"/>
-<path d="M1.70781 13.1934H1.64819V14.8031L3.06913 15.6278C3.19957 15.3975 3.26804 15.1373 3.26786 14.8727V14.7534C3.26839 14.5484 3.22839 14.3453 3.15018 14.1558C3.07197 13.9663 2.95707 13.7941 2.8121 13.6491C2.66714 13.5042 2.49495 13.3893 2.30544 13.311C2.11593 13.2328 1.91283 13.1928 1.70781 13.1934Z" fill="#F0F3F8"/>
+<path d="M1.64819 14.784L9.99496 19.6032L18.3417 14.784V5.14544L9.99496 0.326172L1.64819 5.14544V14.784Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M9.1405 1.47852L3.07916 4.97621C3.08909 5.08529 3.08909 5.19504 3.07916 5.30412L9.13057 8.80181C9.37938 8.61785 9.68065 8.51858 9.99009 8.51858C10.2995 8.51858 10.6008 8.61785 10.8496 8.80181L16.901 5.30412C16.8911 5.19504 16.8911 5.08529 16.901 4.97621L10.8595 1.47852C10.6107 1.66247 10.3095 1.76175 10 1.76175C9.69059 1.76175 9.38932 1.66247 9.1405 1.47852ZM17.4873 6.26797L11.4259 9.80541C11.4588 10.1122 11.3938 10.4216 11.2404 10.6892C11.0869 10.9569 10.8527 11.1693 10.5714 11.2959L10.5813 18.2515C10.6793 18.2948 10.7726 18.3481 10.8595 18.4105L16.9109 14.9128C16.8781 14.606 16.943 14.2967 17.0965 14.029C17.25 13.7613 17.4841 13.549 17.7655 13.4223V6.42696C17.6686 6.38154 17.5756 6.32837 17.4873 6.26797ZM2.50284 6.30772C2.41585 6.3702 2.3226 6.42348 2.22461 6.4667V13.4621C2.50941 13.5843 2.74678 13.7957 2.90092 14.0646C3.05506 14.3334 3.11762 14.6451 3.07916 14.9526L9.13057 18.4503C9.21756 18.3878 9.3108 18.3345 9.40879 18.2913V11.2959C9.12399 11.1737 8.88662 10.9623 8.73248 10.6934C8.57834 10.4246 8.51578 10.1129 8.55424 9.80541L2.50284 6.30772Z" fill="var(--fillBgSecondary)"/>
+<path d="M9.99496 1.37113L17.4574 5.68363V14.2987L9.99496 18.6112L2.53255 14.2987V5.67369L9.99496 1.37113ZM9.99496 0.347656L1.64819 5.16692V14.8055L9.99496 19.6247L18.3417 14.8055V5.16692L9.99496 0.347656Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M10.0545 11.6046H9.9353C9.73028 11.6051 9.52718 11.5651 9.33767 11.4869C9.14816 11.4087 8.97598 11.2938 8.83101 11.1488C8.68604 11.0039 8.57115 10.8317 8.49293 10.6422C8.41472 10.4526 8.37472 10.2495 8.37525 10.0445V9.92529C8.37472 9.72027 8.41472 9.51718 8.49293 9.32766C8.57115 9.13815 8.68604 8.96597 8.83101 8.821C8.97598 8.67603 9.14816 8.56114 9.33767 8.48292C9.52718 8.40471 9.73028 8.36472 9.9353 8.36524H10.0545C10.2596 8.36472 10.4627 8.40471 10.6522 8.48292C10.8417 8.56114 11.0139 8.67603 11.1588 8.821C11.3038 8.96597 11.4187 9.13815 11.4969 9.32766C11.5751 9.51718 11.6151 9.72027 11.6146 9.92529V10.0445C11.6151 10.2495 11.5751 10.4526 11.4969 10.6422C11.4187 10.8317 11.3038 11.0039 11.1588 11.1488C11.0139 11.2938 10.8417 11.4087 10.6522 11.4869C10.4627 11.5651 10.2596 11.6051 10.0545 11.6046Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M10.0545 18.0137H9.93529C9.65813 18.0128 9.38578 18.0861 9.14644 18.2259C8.9071 18.3656 8.70946 18.5668 8.57397 18.8086L9.99491 19.6234L11.4159 18.8086C11.2804 18.5668 11.0827 18.3656 10.8434 18.2259C10.604 18.0861 10.3317 18.0128 10.0545 18.0137Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M18.3516 13.1934H18.292C18.087 13.1928 17.8839 13.2328 17.6944 13.311C17.5049 13.3893 17.3327 13.5042 17.1877 13.6491C17.0427 13.7941 16.9279 13.9663 16.8496 14.1558C16.7714 14.3453 16.7314 14.5484 16.732 14.7534V14.8727C16.7305 15.1375 16.7991 15.398 16.9307 15.6278L18.3516 14.8031V13.1934Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M16.9307 4.34961C16.8002 4.57991 16.7318 4.84011 16.7319 5.10479V5.22403C16.7314 5.42905 16.7714 5.63215 16.8496 5.82166C16.9278 6.01117 17.0427 6.18336 17.1877 6.32832C17.3327 6.47329 17.5049 6.58819 17.6944 6.6664C17.8839 6.74461 18.087 6.78461 18.292 6.78408H18.3516V5.16441L16.9307 4.34961Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M9.99491 0.345703L8.57397 1.16051C8.70881 1.4036 8.90604 1.60633 9.14533 1.74781C9.38462 1.88929 9.65731 1.96439 9.93529 1.96537H10.0545C10.3317 1.96621 10.604 1.89295 10.8434 1.75319C11.0827 1.61343 11.2804 1.41224 11.4159 1.17044L9.99491 0.345703Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M3.06913 4.33984L1.64819 5.16458V6.78425H1.70781C1.91283 6.78478 2.11593 6.74478 2.30544 6.66657C2.49495 6.58836 2.66714 6.47346 2.8121 6.32849C2.95707 6.18353 3.07197 6.01134 3.15018 5.82183C3.22839 5.63232 3.26839 5.42922 3.26786 5.2242V5.10496C3.2645 4.8376 3.1963 4.57505 3.06913 4.33984Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
+<path d="M1.70781 13.1934H1.64819V14.8031L3.06913 15.6278C3.19957 15.3975 3.26804 15.1373 3.26786 14.8727V14.7534C3.26839 14.5484 3.22839 14.3453 3.15018 14.1558C3.07197 13.9663 2.95707 13.7941 2.8121 13.6491C2.66714 13.5042 2.49495 13.3893 2.30544 13.311C2.11593 13.2328 1.91283 13.1928 1.70781 13.1934Z" fill="var(--fillBgTertiary, #f0f3f8)"/>
 <path d="M9.99496 19.6728V10.0243L1.64819 5.20508V14.8535L9.99496 19.6728Z" fill="black" fill-opacity="0.06"/>
 <path d="M18.3517 14.7635V5.125L10.0049 9.94427V19.5927L18.3517 14.7635Z" fill="black" fill-opacity="0.02"/>
 </svg>
diff --git a/next/public/imgs/icons/loading.svg b/next/public/imgs/icons/loading.svg
index 462f9468..9f21a184 100644
--- a/next/public/imgs/icons/loading.svg
+++ b/next/public/imgs/icons/loading.svg
@@ -6,7 +6,7 @@
 @keyframes a1_o { 0% { opacity: 1; } 22.3% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,1,1); } 47.65% { opacity: 0; } 78.85% { opacity: 0; animation-timing-function: cubic-bezier(0.915,0,1,1); } 91% { opacity: 1; } 100% { opacity: 1; } }
 @keyframes a2_o { 0% { opacity: 1; } 34.6% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,1,1); } 60% { opacity: 0; } 87.85% { opacity: 0; animation-timing-function: cubic-bezier(0.915,0,1,1); } 100% { opacity: 1; } }
     </style>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,10.5765L6.9,10.5765L6.9,13.9765L3.5,13.9765L3.5,10.5765Z" fill="#A1A8B3" opacity="1" transform="translate(5.2,12.28) translate(-5.2,-12.2765)" style="animation: 2s linear infinite both a0_o;"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3,10.5765L13.7,10.5765L13.7,13.9765L10.3,13.9765L10.3,10.5765Z" fill="#A1A8B3" opacity="1" transform="translate(12,12.2765) translate(-12,-12.2765)" style="animation: 2s linear infinite both a1_o;"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1,10.5765L20.5,10.5765L20.5,13.9765L17.1,13.9765L17.1,10.5765Z" fill="#A1A8B3" opacity="1" transform="translate(18.8,12.2765) translate(-18.8,-12.2765)" style="animation: 2s linear infinite both a2_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,10.5765L6.9,10.5765L6.9,13.9765L3.5,13.9765L3.5,10.5765Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(5.2,12.28) translate(-5.2,-12.2765)" style="animation: 2s linear infinite both a0_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3,10.5765L13.7,10.5765L13.7,13.9765L10.3,13.9765L10.3,10.5765Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(12,12.2765) translate(-12,-12.2765)" style="animation: 2s linear infinite both a1_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1,10.5765L20.5,10.5765L20.5,13.9765L17.1,13.9765L17.1,10.5765Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(18.8,12.2765) translate(-18.8,-12.2765)" style="animation: 2s linear infinite both a2_o;"/>
 </svg>
diff --git a/next/public/imgs/icons/logout.svg b/next/public/imgs/icons/logout.svg
index f5f5d6d3..ea9bc062 100644
--- a/next/public/imgs/icons/logout.svg
+++ b/next/public/imgs/icons/logout.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H4V3.5V20.5V21.5H5H19H20V20.5V17.5H18V19.5H6V4.5H18V6.5H20V3.5V2.5H19H5ZM18 13V16L23 12L18 8V11H11V13H18Z" fill="#A1A8B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H4V3.5V20.5V21.5H5H19H20V20.5V17.5H18V19.5H6V4.5H18V6.5H20V3.5V2.5H19H5ZM18 13V16L23 12L18 8V11H11V13H18Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/network.svg b/next/public/imgs/icons/network.svg
index a8da8c53..43897452 100644
--- a/next/public/imgs/icons/network.svg
+++ b/next/public/imgs/icons/network.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 3.72363C17.4477 3.72363 17 4.17135 17 4.72363C17 5.27592 17.4477 5.72363 18 5.72363C18.5523 5.72363 19 5.27592 19 4.72363C19 4.17135 18.5523 3.72363 18 3.72363ZM15 4.72363C15 3.06678 16.3431 1.72363 18 1.72363C19.6569 1.72363 21 3.06678 21 4.72363C21 6.02985 20.1652 7.14109 19 7.55293V15.8943C20.1652 16.3062 21 17.4174 21 18.7236C21 20.3805 19.6569 21.7236 18 21.7236C16.3431 21.7236 15 20.3805 15 18.7236C15 18.6772 15.0011 18.6309 15.0031 18.5849L6.13219 14.834C5.58846 15.3833 4.83397 15.7236 4 15.7236C2.34315 15.7236 1 14.3805 1 12.7236C1 11.0668 2.34315 9.72363 4 9.72363C4.71869 9.72363 5.37835 9.97635 5.89497 10.3978L15.0575 5.31126C15.0198 5.12123 15 4.92474 15 4.72363ZM6.93657 12.107C6.97815 12.306 7 12.5123 7 12.7236C7 12.8248 6.995 12.9247 6.98522 13.0233L15.7564 16.732C16.0901 16.3564 16.5166 16.0652 17 15.8943V7.55293C16.662 7.43345 16.3518 7.25512 16.0817 7.03024L6.93657 12.107ZM17 18.7236C17 18.1713 17.4477 17.7236 18 17.7236C18.5523 17.7236 19 18.1713 19 18.7236C19 19.2759 18.5523 19.7236 18 19.7236C17.4477 19.7236 17 19.2759 17 18.7236ZM3 12.7236C3 12.1713 3.44772 11.7236 4 11.7236C4.55228 11.7236 5 12.1713 5 12.7236C5 13.2759 4.55228 13.7236 4 13.7236C3.44772 13.7236 3 13.2759 3 12.7236Z" fill="#A1A8B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 3.72363C17.4477 3.72363 17 4.17135 17 4.72363C17 5.27592 17.4477 5.72363 18 5.72363C18.5523 5.72363 19 5.27592 19 4.72363C19 4.17135 18.5523 3.72363 18 3.72363ZM15 4.72363C15 3.06678 16.3431 1.72363 18 1.72363C19.6569 1.72363 21 3.06678 21 4.72363C21 6.02985 20.1652 7.14109 19 7.55293V15.8943C20.1652 16.3062 21 17.4174 21 18.7236C21 20.3805 19.6569 21.7236 18 21.7236C16.3431 21.7236 15 20.3805 15 18.7236C15 18.6772 15.0011 18.6309 15.0031 18.5849L6.13219 14.834C5.58846 15.3833 4.83397 15.7236 4 15.7236C2.34315 15.7236 1 14.3805 1 12.7236C1 11.0668 2.34315 9.72363 4 9.72363C4.71869 9.72363 5.37835 9.97635 5.89497 10.3978L15.0575 5.31126C15.0198 5.12123 15 4.92474 15 4.72363ZM6.93657 12.107C6.97815 12.306 7 12.5123 7 12.7236C7 12.8248 6.995 12.9247 6.98522 13.0233L15.7564 16.732C16.0901 16.3564 16.5166 16.0652 17 15.8943V7.55293C16.662 7.43345 16.3518 7.25512 16.0817 7.03024L6.93657 12.107ZM17 18.7236C17 18.1713 17.4477 17.7236 18 17.7236C18.5523 17.7236 19 18.1713 19 18.7236C19 19.2759 18.5523 19.7236 18 19.7236C17.4477 19.7236 17 19.2759 17 18.7236ZM3 12.7236C3 12.1713 3.44772 11.7236 4 11.7236C4.55228 11.7236 5 12.1713 5 12.7236C5 13.2759 4.55228 13.7236 4 13.7236C3.44772 13.7236 3 13.2759 3 12.7236Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/question-mark.svg b/next/public/imgs/icons/question-mark.svg
index 151639c6..5f8a1a4b 100644
--- a/next/public/imgs/icons/question-mark.svg
+++ b/next/public/imgs/icons/question-mark.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 15C4.1339 15 1 11.8661 1 8C1 4.1339 4.1339 1 8 1C11.8661 1 15 4.1339 15 8C15 11.8661 11.8661 15 8 15ZM7.3 10.1V11.5H8.7V10.1H7.3ZM8.7 8.9485C9.26257 8.77894 9.74552 8.41297 10.0609 7.91722C10.3763 7.42147 10.5031 6.82894 10.4183 6.24753C10.3335 5.66612 10.0427 5.13451 9.59881 4.74952C9.15494 4.36453 8.58756 4.15178 8 4.15C7.4336 4.14996 6.88466 4.34611 6.44655 4.7051C6.00844 5.06408 5.70821 5.56374 5.5969 6.1191L6.9703 6.3942C7.00928 6.1992 7.10282 6.01928 7.24006 5.87537C7.37729 5.73146 7.55257 5.62948 7.7455 5.58129C7.93843 5.53311 8.14107 5.5407 8.32985 5.60318C8.51864 5.66566 8.6858 5.78047 8.81188 5.93424C8.93797 6.08801 9.0178 6.27442 9.04208 6.47179C9.06636 6.66916 9.03409 6.86936 8.94904 7.04911C8.86399 7.22886 8.72964 7.38075 8.56163 7.48713C8.39362 7.59351 8.19885 7.64999 8 7.65C7.81435 7.65 7.6363 7.72375 7.50503 7.85503C7.37375 7.9863 7.3 8.16435 7.3 8.35V9.4H8.7V8.9485Z" fill="#E2E8F0"/>
+    <path d="M8 15C4.1339 15 1 11.8661 1 8C1 4.1339 4.1339 1 8 1C11.8661 1 15 4.1339 15 8C15 11.8661 11.8661 15 8 15ZM7.3 10.1V11.5H8.7V10.1H7.3ZM8.7 8.9485C9.26257 8.77894 9.74552 8.41297 10.0609 7.91722C10.3763 7.42147 10.5031 6.82894 10.4183 6.24753C10.3335 5.66612 10.0427 5.13451 9.59881 4.74952C9.15494 4.36453 8.58756 4.15178 8 4.15C7.4336 4.14996 6.88466 4.34611 6.44655 4.7051C6.00844 5.06408 5.70821 5.56374 5.5969 6.1191L6.9703 6.3942C7.00928 6.1992 7.10282 6.01928 7.24006 5.87537C7.37729 5.73146 7.55257 5.62948 7.7455 5.58129C7.93843 5.53311 8.14107 5.5407 8.32985 5.60318C8.51864 5.66566 8.6858 5.78047 8.81188 5.93424C8.93797 6.08801 9.0178 6.27442 9.04208 6.47179C9.06636 6.66916 9.03409 6.86936 8.94904 7.04911C8.86399 7.22886 8.72964 7.38075 8.56163 7.48713C8.39362 7.59351 8.19885 7.64999 8 7.65C7.81435 7.65 7.6363 7.72375 7.50503 7.85503C7.37375 7.9863 7.3 8.16435 7.3 8.35V9.4H8.7V8.9485Z" fill="var(--strokeActionDefault)"/>
 </svg>
diff --git a/next/public/imgs/icons/short-term-employment.svg b/next/public/imgs/icons/short-term-employment.svg
index a15a8c93..6010efea 100644
--- a/next/public/imgs/icons/short-term-employment.svg
+++ b/next/public/imgs/icons/short-term-employment.svg
@@ -12,16 +12,16 @@
             <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_8474_33746" result="shape"/>
         </filter>
         <linearGradient id="paint0_linear_8474_33746" x1="22" y1="12.0001" x2="5.99998" y2="12.0001" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#6848FF"/>
-            <stop offset="1" stop-color="#6848FF" stop-opacity="0.2"/>
+            <stop stop-color="var(--fillBgBrandPrimary, #6848FF)"/>
+            <stop offset="1" stop-color="var(--fillBgBrandPrimary, #6848FF)" stop-opacity="0.2"/>
         </linearGradient>
         <linearGradient id="paint1_linear_8474_33746" x1="8.99999" y1="0.666748" x2="8.99999" y2="22.5239" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#04D2C5"/>
-            <stop offset="1" stop-color="#04D2C5" stop-opacity="0.2"/>
+            <stop stop-color="var(--fillBgBrandSecondary, #04d2c5)"/>
+            <stop offset="1" stop-color="var(--fillBgBrandSecondary, #04d2c5)" stop-opacity="0.2"/>
         </linearGradient>
         <linearGradient id="paint2_linear_8474_33746" x1="3.33332" y1="18" x2="3.33332" y2="23.1429" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#04D2C5"/>
-            <stop offset="1" stop-color="#04D2C5" stop-opacity="0.2"/>
+            <stop stop-color="var(--fillBgBrandSecondary, #04d2c5)"/>
+            <stop offset="1" stop-color="var(--fillBgBrandSecondary, #04d2c5)" stop-opacity="0.2"/>
         </linearGradient>
     </defs>
 </svg>
diff --git a/next/public/imgs/icons/space-noicon.svg b/next/public/imgs/icons/space-noicon.svg
index 2dec1c82..233d9687 100644
--- a/next/public/imgs/icons/space-noicon.svg
+++ b/next/public/imgs/icons/space-noicon.svg
@@ -1,4 +1,4 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 32C0 14.3269 14.3269 0 32 0V0C49.6731 0 64 14.3269 64 32V32C64 49.6731 49.6731 64 32 64V64C14.3269 64 0 49.6731 0 32V32Z" fill="#FBFCFE"/>
-<path d="M32 63C14.8792 63 1 49.1208 1 32H-1C-1 50.2254 13.7746 65 32 65V63ZM63 32C63 49.1208 49.1208 63 32 63V65C50.2254 65 65 50.2254 65 32H63ZM32 1C49.1208 1 63 14.8792 63 32H65C65 13.7746 50.2254 -1 32 -1V1ZM32 -1C13.7746 -1 -1 13.7746 -1 32H1C1 14.8792 14.8792 1 32 1V-1Z" fill="#E2E8F0"/>
+<path d="M0 32C0 14.3269 14.3269 0 32 0V0C49.6731 0 64 14.3269 64 32V32C64 49.6731 49.6731 64 32 64V64C14.3269 64 0 49.6731 0 32V32Z" fill="var(--fillBgSecondary)"/>
+<path d="M32 63C14.8792 63 1 49.1208 1 32H-1C-1 50.2254 13.7746 65 32 65V63ZM63 32C63 49.1208 49.1208 63 32 63V65C50.2254 65 65 50.2254 65 32H63ZM32 1C49.1208 1 63 14.8792 63 32H65C65 13.7746 50.2254 -1 32 -1V1ZM32 -1C13.7746 -1 -1 13.7746 -1 32H1C1 14.8792 14.8792 1 32 1V-1Z" fill="var(--strokeActionDefault)"/>
 </svg>
diff --git a/next/public/imgs/icons/sticky.svg b/next/public/imgs/icons/sticky.svg
index 8492ccf0..7cf80388 100644
--- a/next/public/imgs/icons/sticky.svg
+++ b/next/public/imgs/icons/sticky.svg
@@ -11,8 +11,8 @@
 @keyframes a3_t { 0% { transform: translate(0px,0px); } 15% { transform: translate(0px,0px); animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 50% { transform: translate(0px,-13.6px); } 65% { transform: translate(0px,-13.6px); animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 100% { transform: translate(13.6px,-13.6px); } }
 @keyframes a3_o { 0% { opacity: 1; } 15% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 50% { opacity: 0.4; animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 65% { opacity: 0.4; animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 100% { opacity: 1; } }
     </style>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1001,3.49994L20.5001,3.49994L20.5001,6.89994L17.1001,6.89994L17.1001,3.49994Z" fill="#A1A8B3" opacity="1" transform="translate(18.8001,5.19994) translate(-18.8001,-5.19994)" style="animation: 2s linear infinite both a0_t, 2s linear infinite both a0_o;"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,3.49994L6.9,3.49994L6.9,6.89994L3.5,6.89994L3.5,3.49994Z" fill="#A1A8B3" opacity="1" transform="translate(5.2,5.19994) translate(-5.2,-5.19994)" style="animation: 2s linear infinite both a1_t, 2s linear infinite both a1_o;"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1001,17.1L20.5001,17.1L20.5001,20.5L17.1001,20.5L17.1001,17.1Z" fill="#A1A8B3" opacity="1" transform="translate(18.8001,18.8) translate(-18.8001,-18.8)" style="animation: 2s linear infinite both a2_t, 2s linear infinite both a2_o;"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,17.1L6.9,17.1L6.9,20.5L3.5,20.5L3.5,17.1Z" fill="#A1A8B3" opacity="1" transform="translate(5.2,18.8) translate(-5.2,-18.8)" style="animation: 2s linear infinite both a3_t, 2s linear infinite both a3_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1001,3.49994L20.5001,3.49994L20.5001,6.89994L17.1001,6.89994L17.1001,3.49994Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(18.8001,5.19994) translate(-18.8001,-5.19994)" style="animation: 2s linear infinite both a0_t, 2s linear infinite both a0_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,3.49994L6.9,3.49994L6.9,6.89994L3.5,6.89994L3.5,3.49994Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(5.2,5.19994) translate(-5.2,-5.19994)" style="animation: 2s linear infinite both a1_t, 2s linear infinite both a1_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1001,17.1L20.5001,17.1L20.5001,20.5L17.1001,20.5L17.1001,17.1Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(18.8001,18.8) translate(-18.8001,-18.8)" style="animation: 2s linear infinite both a2_t, 2s linear infinite both a2_o;"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5,17.1L6.9,17.1L6.9,20.5L3.5,20.5L3.5,17.1Z" fill="var(--textTertiary, #A1A8B3)" opacity="1" transform="translate(5.2,18.8) translate(-5.2,-18.8)" style="animation: 2s linear infinite both a3_t, 2s linear infinite both a3_o;"/>
 </svg>
diff --git a/next/public/imgs/icons/strategy.svg b/next/public/imgs/icons/strategy.svg
index 9e9b595d..880da7b4 100644
--- a/next/public/imgs/icons/strategy.svg
+++ b/next/public/imgs/icons/strategy.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2499 5.02013V2.79879C5.23865 4.05842 2.3999 7.76201 2.3999 11.9999C2.3999 17.302 6.69782 21.5999 11.9999 21.5999C16.2378 21.5999 19.9414 18.7612 21.201 14.7499H18.9796C18.4111 16.1542 17.4524 17.3698 16.1932 18.2186C14.9543 19.0537 13.4942 19.4998 12 19.4999C10.2606 19.4975 8.57603 18.8908 7.23448 17.7836C5.89294 16.6764 4.97778 15.1375 4.64555 13.4301C3.96039 9.90878 5.94134 6.3636 9.2499 5.02013Z" fill="#A1A8B3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9499 2.45693V13.0499H21.5429C21.5779 12.7007 21.5999 12.351 21.5999 11.9999C21.5999 6.69782 17.302 2.3999 11.9999 2.3999C11.6488 2.3999 11.2991 2.42191 10.9499 2.45693ZM17.3031 6.69669C18.4539 7.84751 19.1987 9.34051 19.4267 10.9499H13.0499V4.57309C14.6593 4.80113 16.1523 5.54586 17.3031 6.69669Z" fill="#A1A8B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2499 5.02013V2.79879C5.23865 4.05842 2.3999 7.76201 2.3999 11.9999C2.3999 17.302 6.69782 21.5999 11.9999 21.5999C16.2378 21.5999 19.9414 18.7612 21.201 14.7499H18.9796C18.4111 16.1542 17.4524 17.3698 16.1932 18.2186C14.9543 19.0537 13.4942 19.4998 12 19.4999C10.2606 19.4975 8.57603 18.8908 7.23448 17.7836C5.89294 16.6764 4.97778 15.1375 4.64555 13.4301C3.96039 9.90878 5.94134 6.3636 9.2499 5.02013Z" fill="var(--textTertiary, #A1A8B3)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9499 2.45693V13.0499H21.5429C21.5779 12.7007 21.5999 12.351 21.5999 11.9999C21.5999 6.69782 17.302 2.3999 11.9999 2.3999C11.6488 2.3999 11.2991 2.42191 10.9499 2.45693ZM17.3031 6.69669C18.4539 7.84751 19.1987 9.34051 19.4267 10.9499H13.0499V4.57309C14.6593 4.80113 16.1523 5.54586 17.3031 6.69669Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/switch.svg b/next/public/imgs/icons/switch.svg
index 6b0c3be5..3a8978a8 100644
--- a/next/public/imgs/icons/switch.svg
+++ b/next/public/imgs/icons/switch.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.375 15.103C20.0239 13.5613 20.1733 11.855 19.8021 10.224C19.431 8.59303 18.558 7.11938 17.306 6.01024C16.0539 4.9011 14.4857 4.21225 12.8219 4.04055C11.158 3.86884 9.48222 4.22292 8.03004 5.05299L7.03804 3.31599C8.55567 2.4486 10.2742 1.99435 12.0222 1.99856C13.7703 2.00278 15.4866 2.4653 17 3.33999C21.49 5.93199 23.21 11.482 21.117 16.11L22.459 16.884L18.294 19.098L18.129 14.384L19.375 15.103ZM4.62504 8.89699C3.97618 10.4387 3.82682 12.145 4.19796 13.776C4.56909 15.4069 5.44205 16.8806 6.69411 17.9897C7.94617 19.0989 9.51436 19.7877 11.1782 19.9594C12.842 20.1311 14.5179 19.7771 15.97 18.947L16.962 20.684C15.4444 21.5514 13.7258 22.0056 11.9778 22.0014C10.2298 21.9972 8.51347 21.5347 7.00004 20.66C2.51004 18.068 0.790039 12.518 2.88304 7.88999L1.54004 7.11699L5.70504 4.90299L5.87004 9.61699L4.62404 8.89799L4.62504 8.89699Z" fill="#A1A8B3"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3 10.3H13.7V13.7H10.3V10.3Z" fill="#A1A8B3"/>
+    <path d="M19.375 15.103C20.0239 13.5613 20.1733 11.855 19.8021 10.224C19.431 8.59303 18.558 7.11938 17.306 6.01024C16.0539 4.9011 14.4857 4.21225 12.8219 4.04055C11.158 3.86884 9.48222 4.22292 8.03004 5.05299L7.03804 3.31599C8.55567 2.4486 10.2742 1.99435 12.0222 1.99856C13.7703 2.00278 15.4866 2.4653 17 3.33999C21.49 5.93199 23.21 11.482 21.117 16.11L22.459 16.884L18.294 19.098L18.129 14.384L19.375 15.103ZM4.62504 8.89699C3.97618 10.4387 3.82682 12.145 4.19796 13.776C4.56909 15.4069 5.44205 16.8806 6.69411 17.9897C7.94617 19.0989 9.51436 19.7877 11.1782 19.9594C12.842 20.1311 14.5179 19.7771 15.97 18.947L16.962 20.684C15.4444 21.5514 13.7258 22.0056 11.9778 22.0014C10.2298 21.9972 8.51347 21.5347 7.00004 20.66C2.51004 18.068 0.790039 12.518 2.88304 7.88999L1.54004 7.11699L5.70504 4.90299L5.87004 9.61699L4.62404 8.89799L4.62504 8.89699Z" fill="var(--textTertiary, #A1A8B3)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3 10.3H13.7V13.7H10.3V10.3Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/threshold.svg b/next/public/imgs/icons/threshold.svg
index 10655314..cc4e038e 100644
--- a/next/public/imgs/icons/threshold.svg
+++ b/next/public/imgs/icons/threshold.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.44531H4V3.44531V19.9479V20.9479H5H19H20V19.9479V3.44531V2.44531H19H5ZM6 18.9479V4.44531H18V18.9479H6ZM15.7961 8.72368H8.23986V10.7237H15.7961V8.72368ZM15.7961 12.7237H8.23986V14.7237H15.7961V12.7237Z" fill="#A1A8B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.44531H4V3.44531V19.9479V20.9479H5H19H20V19.9479V3.44531V2.44531H19H5ZM6 18.9479V4.44531H18V18.9479H6ZM15.7961 8.72368H8.23986V10.7237H15.7961V8.72368ZM15.7961 12.7237H8.23986V14.7237H15.7961V12.7237Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/thumb-up.svg b/next/public/imgs/icons/thumb-up.svg
index 0ca19a81..8f15e325 100644
--- a/next/public/imgs/icons/thumb-up.svg
+++ b/next/public/imgs/icons/thumb-up.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.83778 6.68823H3.68645V14.2572H1.83778C1.67435 14.2572 1.51761 14.1908 1.40205 14.0725C1.28648 13.9542 1.22156 13.7938 1.22156 13.6265V7.31898C1.22156 7.15169 1.28648 6.99126 1.40205 6.87297C1.51761 6.75468 1.67435 6.68823 1.83778 6.68823ZM5.09945 5.87266L9.04328 1.83586C9.0957 1.78205 9.16533 1.74942 9.23938 1.74398C9.31342 1.73853 9.3869 1.76063 9.44629 1.80621L9.97193 2.20989C10.1179 2.32207 10.2282 2.47598 10.2888 2.65221C10.3495 2.82844 10.3578 3.01911 10.3127 3.20017L9.6022 6.05748H13.546C13.8729 6.05748 14.1864 6.19038 14.4175 6.42696C14.6486 6.66354 14.7785 6.98441 14.7785 7.31898V8.64608C14.7786 8.81093 14.7472 8.97422 14.686 9.12671L12.7788 13.8668C12.7323 13.9824 12.6533 14.0812 12.5518 14.1507C12.4503 14.2202 12.3309 14.2573 12.2088 14.2572H5.53512C5.37169 14.2572 5.21495 14.1908 5.09939 14.0725C4.98382 13.9542 4.9189 13.7938 4.9189 13.6265V6.31861C4.91893 6.15133 4.98388 5.99093 5.09945 5.87266Z" fill="#A1A8B3"/>
+<path d="M1.83778 6.68823H3.68645V14.2572H1.83778C1.67435 14.2572 1.51761 14.1908 1.40205 14.0725C1.28648 13.9542 1.22156 13.7938 1.22156 13.6265V7.31898C1.22156 7.15169 1.28648 6.99126 1.40205 6.87297C1.51761 6.75468 1.67435 6.68823 1.83778 6.68823ZM5.09945 5.87266L9.04328 1.83586C9.0957 1.78205 9.16533 1.74942 9.23938 1.74398C9.31342 1.73853 9.3869 1.76063 9.44629 1.80621L9.97193 2.20989C10.1179 2.32207 10.2282 2.47598 10.2888 2.65221C10.3495 2.82844 10.3578 3.01911 10.3127 3.20017L9.6022 6.05748H13.546C13.8729 6.05748 14.1864 6.19038 14.4175 6.42696C14.6486 6.66354 14.7785 6.98441 14.7785 7.31898V8.64608C14.7786 8.81093 14.7472 8.97422 14.686 9.12671L12.7788 13.8668C12.7323 13.9824 12.6533 14.0812 12.5518 14.1507C12.4503 14.2202 12.3309 14.2573 12.2088 14.2572H5.53512C5.37169 14.2572 5.21495 14.1908 5.09939 14.0725C4.98382 13.9542 4.9189 13.7938 4.9189 13.6265V6.31861C4.91893 6.15133 4.98388 5.99093 5.09945 5.87266Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/timeline.svg b/next/public/imgs/icons/timeline.svg
index 1607092a..482309bb 100644
--- a/next/public/imgs/icons/timeline.svg
+++ b/next/public/imgs/icons/timeline.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.3594 7.22372L16.7734 8.641L12.0002 13.4142L10.5862 12.0002L15.3594 7.22372Z" fill="#A1A8B3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.4502C6.72858 2.4502 2.4502 6.72858 2.4502 12.0002C2.4502 17.2718 6.72858 21.5502 12.0002 21.5502C17.2718 21.5502 21.5502 17.2718 21.5502 12.0002C21.5502 6.72858 17.2718 2.4502 12.0002 2.4502ZM4.4502 12.0002C4.4502 7.82881 7.82881 4.4502 12.0002 4.4502C16.1716 4.4502 19.5502 7.82881 19.5502 12.0002C19.5502 16.1716 16.1716 19.5502 12.0002 19.5502C7.82881 19.5502 4.4502 16.1716 4.4502 12.0002Z" fill="#A1A8B3"/>
+<path d="M15.3594 7.22372L16.7734 8.641L12.0002 13.4142L10.5862 12.0002L15.3594 7.22372Z" fill="var(--textTertiary, #A1A8B3)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.4502C6.72858 2.4502 2.4502 6.72858 2.4502 12.0002C2.4502 17.2718 6.72858 21.5502 12.0002 21.5502C17.2718 21.5502 21.5502 17.2718 21.5502 12.0002C21.5502 6.72858 17.2718 2.4502 12.0002 2.4502ZM4.4502 12.0002C4.4502 7.82881 7.82881 4.4502 12.0002 4.4502C16.1716 4.4502 19.5502 7.82881 19.5502 12.0002C19.5502 16.1716 16.1716 19.5502 12.0002 19.5502C7.82881 19.5502 4.4502 16.1716 4.4502 12.0002Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/timestamp-color.svg b/next/public/imgs/icons/timestamp-color.svg
index e57a7137..a38559ce 100644
--- a/next/public/imgs/icons/timestamp-color.svg
+++ b/next/public/imgs/icons/timestamp-color.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.3594 7.22372L16.7734 8.641L12.0002 13.4142L10.5862 12.0002L15.3594 7.22372Z" fill="#04D2C5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.4502C6.72858 2.4502 2.4502 6.72858 2.4502 12.0002C2.4502 17.2718 6.72858 21.5502 12.0002 21.5502C17.2718 21.5502 21.5502 17.2718 21.5502 12.0002C21.5502 6.72858 17.2718 2.4502 12.0002 2.4502ZM4.4502 12.0002C4.4502 7.82881 7.82881 4.4502 12.0002 4.4502C16.1716 4.4502 19.5502 7.82881 19.5502 12.0002C19.5502 16.1716 16.1716 19.5502 12.0002 19.5502C7.82881 19.5502 4.4502 16.1716 4.4502 12.0002Z" fill="#04D2C5"/>
+<path d="M15.3594 7.22372L16.7734 8.641L12.0002 13.4142L10.5862 12.0002L15.3594 7.22372Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.4502C6.72858 2.4502 2.4502 6.72858 2.4502 12.0002C2.4502 17.2718 6.72858 21.5502 12.0002 21.5502C17.2718 21.5502 21.5502 17.2718 21.5502 12.0002C21.5502 6.72858 17.2718 2.4502 12.0002 2.4502ZM4.4502 12.0002C4.4502 7.82881 7.82881 4.4502 12.0002 4.4502C16.1716 4.4502 19.5502 7.82881 19.5502 12.0002C19.5502 16.1716 16.1716 19.5502 12.0002 19.5502C7.82881 19.5502 4.4502 16.1716 4.4502 12.0002Z" fill="var(--fillBgBrandSecondary, #04d2c5)"/>
 </svg>
diff --git a/next/public/imgs/icons/timestamp.svg b/next/public/imgs/icons/timestamp.svg
index aefd078a..ae56f9af 100644
--- a/next/public/imgs/icons/timestamp.svg
+++ b/next/public/imgs/icons/timestamp.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.3592 7.22372L16.7732 8.641L12 13.4142L10.5859 12.0002L15.3592 7.22372Z" fill="#9DA9BB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.4502C6.72834 2.4502 2.44995 6.72858 2.44995 12.0002C2.44995 17.2718 6.72834 21.5502 12 21.5502C17.2716 21.5502 21.5499 17.2718 21.5499 12.0002C21.5499 6.72858 17.2716 2.4502 12 2.4502ZM4.44995 12.0002C4.44995 7.82881 7.82857 4.4502 12 4.4502C16.1713 4.4502 19.5499 7.82881 19.5499 12.0002C19.5499 16.1716 16.1713 19.5502 12 19.5502C7.82857 19.5502 4.44995 16.1716 4.44995 12.0002Z" fill="#9DA9BB"/>
+<path d="M15.3592 7.22372L16.7732 8.641L12 13.4142L10.5859 12.0002L15.3592 7.22372Z" fill="var(--textTertiary)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.4502C6.72834 2.4502 2.44995 6.72858 2.44995 12.0002C2.44995 17.2718 6.72834 21.5502 12 21.5502C17.2716 21.5502 21.5499 17.2718 21.5499 12.0002C21.5499 6.72858 17.2716 2.4502 12 2.4502ZM4.44995 12.0002C4.44995 7.82881 7.82857 4.4502 12 4.4502C16.1713 4.4502 19.5499 7.82881 19.5499 12.0002C19.5499 16.1716 16.1713 19.5502 12 19.5502C7.82857 19.5502 4.44995 16.1716 4.44995 12.0002Z" fill="var(--textTertiary)"/>
 </svg>
diff --git a/next/public/imgs/icons/toast-error.svg b/next/public/imgs/icons/toast-error.svg
index 3fe7fb76..ddfe149c 100644
--- a/next/public/imgs/icons/toast-error.svg
+++ b/next/public/imgs/icons/toast-error.svg
@@ -1,4 +1,4 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 21C17.4705 21 21.5 16.9705 21.5 12C21.5 7.02943 17.4705 3 12.5 3C7.52943 3 3.5 7.02943 3.5 12C3.5 16.9705 7.52943 21 12.5 21Z" stroke="#EE4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.5 7.5L12.5 12.5M12.5 16.51L12.51 16.4989" stroke="#EE4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 21C17.4705 21 21.5 16.9705 21.5 12C21.5 7.02943 17.4705 3 12.5 3C7.52943 3 3.5 7.02943 3.5 12C3.5 16.9705 7.52943 21 12.5 21Z" stroke="var(--textFeedbackError, #ee4444)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 7.5L12.5 12.5M12.5 16.51L12.51 16.4989" stroke="var(--textFeedbackError, #ee4444)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/next/public/imgs/icons/tooltip-icon.svg b/next/public/imgs/icons/tooltip-icon.svg
index 8b9f311d..7b4a1a4f 100644
--- a/next/public/imgs/icons/tooltip-icon.svg
+++ b/next/public/imgs/icons/tooltip-icon.svg
@@ -1,6 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_13769_78530)">
-<path d="M8 15C4.1339 15 1 11.8661 1 8C1 4.1339 4.1339 1 8 1C11.8661 1 15 4.1339 15 8C15 11.8661 11.8661 15 8 15ZM7.3 10.1V11.5H8.7V10.1H7.3ZM8.7 8.9485C9.26257 8.77894 9.74552 8.41297 10.0609 7.91722C10.3763 7.42147 10.5031 6.82894 10.4183 6.24753C10.3335 5.66612 10.0427 5.13451 9.59881 4.74952C9.15494 4.36453 8.58756 4.15178 8 4.15C7.4336 4.14996 6.88466 4.34611 6.44655 4.7051C6.00844 5.06408 5.70821 5.56374 5.5969 6.1191L6.9703 6.3942C7.00928 6.1992 7.10282 6.01928 7.24006 5.87537C7.37729 5.73146 7.55257 5.62948 7.7455 5.58129C7.93843 5.53311 8.14107 5.5407 8.32985 5.60318C8.51864 5.66566 8.6858 5.78047 8.81188 5.93424C8.93797 6.08801 9.0178 6.27442 9.04208 6.47179C9.06636 6.66916 9.03409 6.86936 8.94904 7.04911C8.86399 7.22886 8.72964 7.38075 8.56163 7.48713C8.39362 7.59351 8.19885 7.64999 8 7.65C7.81435 7.65 7.6363 7.72375 7.50503 7.85503C7.37375 7.9863 7.3 8.16435 7.3 8.35V9.4H8.7V8.9485Z" fill="#E2E8F0"/>
+<path d="M8 15C4.1339 15 1 11.8661 1 8C1 4.1339 4.1339 1 8 1C11.8661 1 15 4.1339 15 8C15 11.8661 11.8661 15 8 15ZM7.3 10.1V11.5H8.7V10.1H7.3ZM8.7 8.9485C9.26257 8.77894 9.74552 8.41297 10.0609 7.91722C10.3763 7.42147 10.5031 6.82894 10.4183 6.24753C10.3335 5.66612 10.0427 5.13451 9.59881 4.74952C9.15494 4.36453 8.58756 4.15178 8 4.15C7.4336 4.14996 6.88466 4.34611 6.44655 4.7051C6.00844 5.06408 5.70821 5.56374 5.5969 6.1191L6.9703 6.3942C7.00928 6.1992 7.10282 6.01928 7.24006 5.87537C7.37729 5.73146 7.55257 5.62948 7.7455 5.58129C7.93843 5.53311 8.14107 5.5407 8.32985 5.60318C8.51864 5.66566 8.6858 5.78047 8.81188 5.93424C8.93797 6.08801 9.0178 6.27442 9.04208 6.47179C9.06636 6.66916 9.03409 6.86936 8.94904 7.04911C8.86399 7.22886 8.72964 7.38075 8.56163 7.48713C8.39362 7.59351 8.19885 7.64999 8 7.65C7.81435 7.65 7.6363 7.72375 7.50503 7.85503C7.37375 7.9863 7.3 8.16435 7.3 8.35V9.4H8.7V8.9485Z" fill="var(--strokeActionDefault)"/>
 </g>
 <defs>
 <clipPath id="clip0_13769_78530">
diff --git a/next/public/imgs/icons/upload.svg b/next/public/imgs/icons/upload.svg
deleted file mode 100644
index 5db4aa36..00000000
--- a/next/public/imgs/icons/upload.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="220" height="115" viewBox="0 0 220 115" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="220" height="115" fill="#FBFCFE"/>
-<path d="M101 65H119V67H101V65ZM111 51.828V63H109V51.828L102.929 57.9L101.515 56.486L110 48L118.485 56.485L117.071 57.899L111 51.83V51.828Z" fill="#A1A8B3"/>
-</svg>
diff --git a/next/public/imgs/icons/user.svg b/next/public/imgs/icons/user.svg
index 20a63bcf..8f3a130e 100644
--- a/next/public/imgs/icons/user.svg
+++ b/next/public/imgs/icons/user.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM7.013 18.256C8.42855 19.3877 10.1877 20.0029 12 20C13.8923 20.0027 15.7239 19.3321 17.167 18.108C16.5157 17.4397 15.7371 16.9089 14.877 16.5468C14.017 16.1847 13.0931 15.9988 12.16 16C11.1926 15.9989 10.2355 16.1989 9.34947 16.5872C8.46343 16.9756 7.66778 17.5439 7.013 18.256ZM5.616 16.82C6.45645 15.9281 7.47067 15.2177 8.59614 14.7327C9.72161 14.2477 10.9345 13.9984 12.16 14C13.3417 13.9985 14.512 14.2304 15.6037 14.6824C16.6955 15.1344 17.6873 15.7976 18.522 16.634C19.3781 15.4291 19.8836 14.0106 19.9826 12.5359C20.0815 11.0612 19.77 9.58789 19.0825 8.27946C18.395 6.97102 17.3585 5.87862 16.088 5.12345C14.8174 4.36827 13.3625 3.97984 11.8846 4.00125C10.4067 4.02267 8.96366 4.45308 7.71552 5.24476C6.46738 6.03643 5.46296 7.1584 4.81369 8.4862C4.16442 9.814 3.89569 11.2957 4.03732 12.7669C4.17894 14.2382 4.72537 15.6404 5.616 16.82ZM12 14.4431C10.9391 14.4431 9.92172 14.0217 9.17157 13.2715C8.42143 12.5214 8 11.504 8 10.4431C8 9.38225 8.42143 8.36484 9.17157 7.61469C9.92172 6.86455 10.9391 6.44312 12 6.44312C13.0609 6.44312 14.0783 6.86455 14.8284 7.61469C15.5786 8.36484 16 9.38225 16 10.4431C16 11.504 15.5786 12.5214 14.8284 13.2715C14.0783 14.0217 13.0609 14.4431 12 14.4431ZM12 12.4431C12.5304 12.4431 13.0391 12.2324 13.4142 11.8573C13.7893 11.4823 14 10.9736 14 10.4431C14 9.91269 13.7893 9.40398 13.4142 9.02891C13.0391 8.65383 12.5304 8.44312 12 8.44312C11.4696 8.44312 10.9609 8.65383 10.5858 9.02891C10.2107 9.40398 10 9.91269 10 10.4431C10 10.9736 10.2107 11.4823 10.5858 11.8573C10.9609 12.2324 11.4696 12.4431 12 12.4431Z" fill="#a1a8b3"/>
+    <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM7.013 18.256C8.42855 19.3877 10.1877 20.0029 12 20C13.8923 20.0027 15.7239 19.3321 17.167 18.108C16.5157 17.4397 15.7371 16.9089 14.877 16.5468C14.017 16.1847 13.0931 15.9988 12.16 16C11.1926 15.9989 10.2355 16.1989 9.34947 16.5872C8.46343 16.9756 7.66778 17.5439 7.013 18.256ZM5.616 16.82C6.45645 15.9281 7.47067 15.2177 8.59614 14.7327C9.72161 14.2477 10.9345 13.9984 12.16 14C13.3417 13.9985 14.512 14.2304 15.6037 14.6824C16.6955 15.1344 17.6873 15.7976 18.522 16.634C19.3781 15.4291 19.8836 14.0106 19.9826 12.5359C20.0815 11.0612 19.77 9.58789 19.0825 8.27946C18.395 6.97102 17.3585 5.87862 16.088 5.12345C14.8174 4.36827 13.3625 3.97984 11.8846 4.00125C10.4067 4.02267 8.96366 4.45308 7.71552 5.24476C6.46738 6.03643 5.46296 7.1584 4.81369 8.4862C4.16442 9.814 3.89569 11.2957 4.03732 12.7669C4.17894 14.2382 4.72537 15.6404 5.616 16.82ZM12 14.4431C10.9391 14.4431 9.92172 14.0217 9.17157 13.2715C8.42143 12.5214 8 11.504 8 10.4431C8 9.38225 8.42143 8.36484 9.17157 7.61469C9.92172 6.86455 10.9391 6.44312 12 6.44312C13.0609 6.44312 14.0783 6.86455 14.8284 7.61469C15.5786 8.36484 16 9.38225 16 10.4431C16 11.504 15.5786 12.5214 14.8284 13.2715C14.0783 14.0217 13.0609 14.4431 12 14.4431ZM12 12.4431C12.5304 12.4431 13.0391 12.2324 13.4142 11.8573C13.7893 11.4823 14 10.9736 14 10.4431C14 9.91269 13.7893 9.40398 13.4142 9.02891C13.0391 8.65383 12.5304 8.44312 12 8.44312C11.4696 8.44312 10.9609 8.65383 10.5858 9.02891C10.2107 9.40398 10 9.91269 10 10.4431C10 10.9736 10.2107 11.4823 10.5858 11.8573C10.9609 12.2324 11.4696 12.4431 12 12.4431Z" fill="var(--textTertiary, #A1A8B3)"/>
 </svg>
diff --git a/next/public/imgs/icons/voting.svg b/next/public/imgs/icons/voting.svg
index b9b4e2e4..5a01ee6e 100644
--- a/next/public/imgs/icons/voting.svg
+++ b/next/public/imgs/icons/voting.svg
@@ -12,12 +12,12 @@
             <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_8474_33734" result="shape"/>
         </filter>
         <linearGradient id="paint0_linear_8474_33734" x1="22.6667" y1="20.0001" x2="1.33334" y2="20.0001" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#6848FF"/>
-            <stop offset="1" stop-color="#6848FF" stop-opacity="0.2"/>
+            <stop stop-color="var(--fillBgBrandPrimary, #6848FF)"/>
+            <stop offset="1" stop-color="var(--fillBgBrandPrimary, #6848FF)" stop-opacity="0.2"/>
         </linearGradient>
         <linearGradient id="paint1_linear_8474_33734" x1="12" y1="0" x2="12" y2="21.8571" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#04D2C5"/>
-            <stop offset="1" stop-color="#04D2C5" stop-opacity="0.2"/>
+            <stop stop-color="var(--fillBgBrandSecondary, #04d2c5)"/>
+            <stop offset="1" stop-color="var(--fillBgBrandSecondary, #04d2c5)" stop-opacity="0.2"/>
         </linearGradient>
     </defs>
 </svg>
diff --git a/next/styles/colorStyles.js b/next/styles/colorStyles.js
index e4c7b4d8..ad35ead9 100644
--- a/next/styles/colorStyles.js
+++ b/next/styles/colorStyles.js
@@ -1,9 +1,9 @@
 import { css } from "styled-components";
 
 export const text_dark_major = css`
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export const text_secondary_red_500 = css`
-  color: #ee4444;
+  color: var(--textFeedbackError);
 `;
diff --git a/next/styles/componentCss.js b/next/styles/componentCss.js
index 6ee52af4..d9a07927 100644
--- a/next/styles/componentCss.js
+++ b/next/styles/componentCss.js
@@ -1,25 +1,7 @@
 import { css } from "styled-components";
 
-export const shadow_100 = css`
-  box-shadow: 0 6px 7px rgba(30, 33, 52, 0.02),
-    0 1.34018px 1.56354px rgba(30, 33, 52, 0.0119221),
-    0 0.399006px 0.465507px rgba(30, 33, 52, 0.00807786);
-`;
-
-export const shadow_200 = css`
-  box-shadow: 0 6px 22px rgba(30, 33, 52, 0.11),
-    0 1.34018px 4.91399px rgba(30, 33, 52, 0.0655718),
-    0 0.399006px 1.46302px rgba(30, 33, 52, 0.0444282);
-`;
-
-export const shadow_200_right = css`
-  box-shadow: 6px 0 22px rgba(30, 33, 52, 0.11),
-    1.34px 0 4.91399px rgba(30, 33, 52, 0.0655718),
-    0.4px 0 1.46302px rgba(30, 33, 52, 0.0444282);
-`;
-
 export const p_14_medium = css`
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter), sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -27,11 +9,11 @@ export const p_14_medium = css`
 `;
 
 export const text_primary = css`
-  color: #1e2134;
+  color: var(--textPrimary);
 `;
 
 export const text_accessory = css`
-  color: #9da9bb;
+  color: var(--textTertiary);
 `;
 
 export const no_scroll_bar = css`
diff --git a/next/styles/globalCss.js b/next/styles/globalCss.js
index b1e858b0..d72fea8f 100644
--- a/next/styles/globalCss.js
+++ b/next/styles/globalCss.js
@@ -1,15 +1,5 @@
 import { css } from "styled-components";
 
-export const shadow_100 = css`
-  box-shadow: 0 4px 31px rgba(26, 33, 44, 0.04),
-    0 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
-`;
-
-export const shadow_200 = css`
-  box-shadow: 0 4px 31px rgba(26, 33, 44, 0.06),
-    0 0.751293px 8px rgba(26, 33, 44, 0.04);
-`;
-
 export const no_scroll_bar = css`
   -ms-overflow-style: none;
   scrollbar-width: none;
diff --git a/next/styles/globals.css b/next/styles/globals.css
index 85d7e737..7997fa2e 100644
--- a/next/styles/globals.css
+++ b/next/styles/globals.css
@@ -1,57 +1,18 @@
-@import url("../fonts/montserrat.css");
-/* font-inter-regular - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  src: url("../fonts/inter-v3-latin-regular.woff2") format("woff2"),
-    /* Super Modern Browsers */ url("../fonts/inter-v3-latin-regular.woff")
-      format("woff");
-}
-
-/* font-inter-500 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  src: url("../fonts/inter-v3-latin-500.woff2") format("woff2"),
-    /* Super Modern Browsers */ url("../fonts/inter-v3-latin-500.woff")
-      format("woff");
-}
-
-/*!* font-inter-600 - latin *!*/
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  src: url("../fonts/inter-v3-latin-600.woff2") format("woff2"),
-    /* Super Modern Browsers */ url("../fonts/inter-v3-latin-600.woff")
-      format("woff"),
-    /* Modern Browsers */ url("../fonts/inter-v3-latin-600.ttf")
-      format("truetype");
-}
-
-/* font-inter-700 - latin */
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  src: url("../fonts/inter-v3-latin-700.woff2") format("woff2"),
-    /* Super Modern Browsers */ url("../fonts/inter-v3-latin-700.woff")
-      format("woff");
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: Inter, -apple-system, "Helvetica Neue", Helvetica, Arial,
-    "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
-    "WenQuanYi Micro Hei", sans-serif;
-  color: #1e2134;
-  background: #fbfcfe;
+  color: var(--textPrimary);
+  background-color: var(--fillBgSecondary);
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
+  font-family: var(--font-inter), -apple-system, "Helvetica Neue", Helvetica,
+    Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
+    "WenQuanYi Micro Hei", sans-serif;
 }
 
 a {
diff --git a/next/styles/textStyles.js b/next/styles/textStyles.js
index ac483a0d..59f06651 100644
--- a/next/styles/textStyles.js
+++ b/next/styles/textStyles.js
@@ -1,7 +1,7 @@
 import { css } from "styled-components";
 
 export const h1_60_bold = css`
-  font-family: Montserrat, serif;
+  font-family: var(--font-montserrat), serif;
   font-style: normal;
   font-weight: bold;
   font-size: 68px;
@@ -9,7 +9,7 @@ export const h1_60_bold = css`
 `;
 
 export const h2_44_bold = css`
-  font-family: Montserrat, serif;
+  font-family: var(--font-montserrat), serif;
   font-style: normal;
   font-weight: bold;
   font-size: 44px;
@@ -17,7 +17,7 @@ export const h2_44_bold = css`
 `;
 
 export const h3_36_bold = css`
-  font-family: Montserrat, serif;
+  font-family: var(--font-montserrat), serif;
   font-style: normal;
   font-weight: bold;
   font-size: 36px;
@@ -25,7 +25,7 @@ export const h3_36_bold = css`
 `;
 
 export const h4_24_bold = css`
-  font-family: Montserrat, serif;
+  font-family: var(--font-montserrat), serif;
   font-style: normal;
   font-weight: bold;
   font-size: 24px;
diff --git a/next/styles/theme.js b/next/styles/theme.js
index c41846e1..2180c7a6 100644
--- a/next/styles/theme.js
+++ b/next/styles/theme.js
@@ -1,7 +1,7 @@
 const theme = {
-  primaryTurquoise500: "#04D2C5",
-  darkMinor: "#506176",
-  neutralGrey300: "#E2E8F0",
+  primaryTurquoise500: "var(--brandTurquoise500a)",
+  darkMinor: "var(--textSecondary)",
+  neutralGrey300: "var(--strokeActionDefault)",
 };
 
 export default theme;
diff --git a/next/tailwind.config.js b/next/tailwind.config.js
new file mode 100644
index 00000000..310a4cbf
--- /dev/null
+++ b/next/tailwind.config.js
@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
+  presets: [require("@osn/common-ui/tailwind/preset.js")],
+};
diff --git a/next/yarn.lock b/next/yarn.lock
index b2cf9786..4be3630a 100644
--- a/next/yarn.lock
+++ b/next/yarn.lock
@@ -5,6 +5,13 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@aashutoshrathi/word-wrap@npm:^1.2.3":
+  version: 1.2.6
+  resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
+  checksum: ada901b9e7c680d190f1d012c84217ce0063d8f5c5a7725bb91ec3c5ed99bb7572680eb2d2938a531ccbaec39a95422fcd8a6b4a13110c7d98dd75402f66a0cd
+  languageName: node
+  linkType: hard
+
 "@adobe/css-tools@npm:^4.0.1":
   version: 4.3.2
   resolution: "@adobe/css-tools@npm:4.3.2"
@@ -12,6 +19,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.1.0":
   version: 2.2.0
   resolution: "@ampproject/remapping@npm:2.2.0"
@@ -22,22 +36,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/code-frame@npm:7.18.6"
-  dependencies:
-    "@babel/highlight": ^7.18.6
-  checksum: 195e2be3172d7684bf95cff69ae3b7a15a9841ea9d27d3c843662d50cdd7d6470fd9c8e64be84d031117e4a4083486effba39f9aef6bbb2c89f7f21bcfba33ba
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.22.13":
-  version: 7.22.13
-  resolution: "@babel/code-frame@npm:7.22.13"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.18.6, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/code-frame@npm:7.23.5"
   dependencies:
-    "@babel/highlight": ^7.22.13
+    "@babel/highlight": ^7.23.4
     chalk: ^2.4.2
-  checksum: 22e342c8077c8b77eeb11f554ecca2ba14153f707b85294fcf6070b6f6150aae88a7b7436dd88d8c9289970585f3fe5b9b941c5aa3aa26a6d5a8ef3f292da058
+  checksum: d90981fdf56a2824a9b14d19a4c0e8db93633fd488c772624b4e83e0ceac6039a27cd298a247c3214faa952bf803ba23696172ae7e7235f3b97f43ba278c569a
   languageName: node
   linkType: hard
 
@@ -71,35 +76,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.18.10, @babel/generator@npm:^7.7.2":
-  version: 7.18.12
-  resolution: "@babel/generator@npm:7.18.12"
-  dependencies:
-    "@babel/types": ^7.18.10
-    "@jridgewell/gen-mapping": ^0.3.2
-    jsesc: ^2.5.1
-  checksum: 07dd71d255144bb703a80ab0156c35d64172ce81ddfb70ff24e2be687b052080233840c9a28d92fa2c33f7ecb8a8b30aef03b807518afc53b74c7908bf8859b1
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.23.0":
-  version: 7.23.0
-  resolution: "@babel/generator@npm:7.23.0"
+"@babel/generator@npm:^7.18.10, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2":
+  version: 7.23.6
+  resolution: "@babel/generator@npm:7.23.6"
   dependencies:
-    "@babel/types": ^7.23.0
+    "@babel/types": ^7.23.6
     "@jridgewell/gen-mapping": ^0.3.2
     "@jridgewell/trace-mapping": ^0.3.17
     jsesc: ^2.5.1
-  checksum: 8efe24adad34300f1f8ea2add420b28171a646edc70f2a1b3e1683842f23b8b7ffa7e35ef0119294e1901f45bfea5b3dc70abe1f10a1917ccdfb41bed69be5f1
+  checksum: 1a1a1c4eac210f174cd108d479464d053930a812798e09fee069377de39a893422df5b5b146199ead7239ae6d3a04697b45fc9ac6e38e0f6b76374390f91fc6c
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
+"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
   dependencies:
-    "@babel/types": ^7.18.6
-  checksum: 88ccd15ced475ef2243fdd3b2916a29ea54c5db3cd0cfabf9d1d29ff6e63b7f7cd1c27264137d7a40ac2e978b9b9a542c332e78f40eb72abe737a7400788fc1b
+    "@babel/types": ^7.22.5
+  checksum: 53da330f1835c46f26b7bf4da31f7a496dee9fd8696cca12366b94ba19d97421ce519a74a837f687749318f94d1a37f8d1abcbf35e8ed22c32d16373b2f6198d
   languageName: node
   linkType: hard
 
@@ -172,14 +166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/helper-environment-visitor@npm:7.18.9"
-  checksum: b25101f6162ddca2d12da73942c08ad203d7668e06663df685634a8fde54a98bc015f6f62938e8554457a592a024108d45b8f3e651fd6dcdb877275b73cc4420
-  languageName: node
-  linkType: hard
-
-"@babel/helper-environment-visitor@npm:^7.22.20":
+"@babel/helper-environment-visitor@npm:^7.18.9, @babel/helper-environment-visitor@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-environment-visitor@npm:7.22.20"
   checksum: d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69
@@ -195,17 +182,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-function-name@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/helper-function-name@npm:7.18.9"
-  dependencies:
-    "@babel/template": ^7.18.6
-    "@babel/types": ^7.18.9
-  checksum: d04c44e0272f887c0c868651be7fc3c5690531bea10936f00d4cca3f6d5db65e76dfb49e8d553c42ae1fe1eba61ccce9f3d93ba2df50a66408c8d4c3cc61cf0c
-  languageName: node
-  linkType: hard
-
-"@babel/helper-function-name@npm:^7.23.0":
+"@babel/helper-function-name@npm:^7.18.9, @babel/helper-function-name@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-function-name@npm:7.23.0"
   dependencies:
@@ -215,16 +192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-hoist-variables@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-hoist-variables@npm:7.18.6"
-  dependencies:
-    "@babel/types": ^7.18.6
-  checksum: fd9c35bb435fda802bf9ff7b6f2df06308a21277c6dec2120a35b09f9de68f68a33972e2c15505c1a1a04b36ec64c9ace97d4a9e26d6097b76b4396b7c5fa20f
-  languageName: node
-  linkType: hard
-
-"@babel/helper-hoist-variables@npm:^7.22.5":
+"@babel/helper-hoist-variables@npm:^7.18.6, @babel/helper-hoist-variables@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-hoist-variables@npm:7.22.5"
   dependencies:
@@ -242,12 +210,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-module-imports@npm:7.18.6"
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5":
+  version: 7.22.15
+  resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
-    "@babel/types": ^7.18.6
-  checksum: f393f8a3b3304b1b7a288a38c10989de754f01d29caf62ce7c4e5835daf0a27b81f3ac687d9d2780d39685aae7b55267324b512150e7b2be967b0c493b6a1def
+    "@babel/types": ^7.22.15
+  checksum: ecd7e457df0a46f889228f943ef9b4a47d485d82e030676767e6a2fdcbdaa63594d8124d4b55fd160b41c201025aec01fc27580352b1c87a37c9c6f33d116702
   languageName: node
   linkType: hard
 
@@ -276,10 +244,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
-  version: 7.18.9
-  resolution: "@babel/helper-plugin-utils@npm:7.18.9"
-  checksum: ebae876cd60f1fe238c7210986093845fa5c4cad5feeda843ea4d780bf068256717650376d3af2a5e760f2ed6a35c065ae144f99c47da3e54aa6cba99d8804e0
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+  version: 7.22.5
+  resolution: "@babel/helper-plugin-utils@npm:7.22.5"
+  checksum: c0fc7227076b6041acd2f0e818145d2e8c41968cc52fb5ca70eed48e21b8fe6dd88a0a91cbddf4951e33647336eb5ae184747ca706817ca3bef5e9e905151ff5
   languageName: node
   linkType: hard
 
@@ -328,16 +296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-split-export-declaration@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-split-export-declaration@npm:7.18.6"
-  dependencies:
-    "@babel/types": ^7.18.6
-  checksum: c6d3dede53878f6be1d869e03e9ffbbb36f4897c7cc1527dc96c56d127d834ffe4520a6f7e467f5b6f3c2843ea0e81a7819d66ae02f707f6ac057f3d57943a2b
-  languageName: node
-  linkType: hard
-
-"@babel/helper-split-export-declaration@npm:^7.22.6":
+"@babel/helper-split-export-declaration@npm:^7.18.6, @babel/helper-split-export-declaration@npm:^7.22.6":
   version: 7.22.6
   resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
   dependencies:
@@ -346,28 +305,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.18.10":
-  version: 7.18.10
-  resolution: "@babel/helper-string-parser@npm:7.18.10"
-  checksum: d554a4393365b624916b5c00a4cc21c990c6617e7f3fe30be7d9731f107f12c33229a7a3db9d829bfa110d2eb9f04790745d421640e3bd245bb412dc0ea123c1
-  languageName: node
-  linkType: hard
-
-"@babel/helper-string-parser@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-string-parser@npm:7.22.5"
-  checksum: 836851ca5ec813077bbb303acc992d75a360267aa3b5de7134d220411c852a6f17de7c0d0b8c8dcc0f567f67874c00f4528672b2a4f1bc978a3ada64c8c78467
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-identifier@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-validator-identifier@npm:7.18.6"
-  checksum: e295254d616bbe26e48c196a198476ab4d42a73b90478c9842536cf910ead887f5af6b5c4df544d3052a25ccb3614866fa808dc1e3a5a4291acd444e243c0648
+"@babel/helper-string-parser@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/helper-string-parser@npm:7.23.4"
+  checksum: c0641144cf1a7e7dc93f3d5f16d5327465b6cf5d036b48be61ecba41e1eece161b48f46b7f960951b67f8c3533ce506b16dece576baef4d8b3b49f8c65410f90
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.22.20":
+"@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
   checksum: 136412784d9428266bcdd4d91c32bcf9ff0e8d25534a9d94b044f77fe76bc50f941a90319b05aafd1ec04f7d127cd57a179a3716009ff7f3412ef835ada95bdc
@@ -404,43 +349,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/highlight@npm:7.18.6"
-  dependencies:
-    "@babel/helper-validator-identifier": ^7.18.6
-    chalk: ^2.0.0
-    js-tokens: ^4.0.0
-  checksum: 92d8ee61549de5ff5120e945e774728e5ccd57fd3b2ed6eace020ec744823d4a98e242be1453d21764a30a14769ecd62170fba28539b211799bbaf232bbb2789
-  languageName: node
-  linkType: hard
-
-"@babel/highlight@npm:^7.22.13":
-  version: 7.22.20
-  resolution: "@babel/highlight@npm:7.22.20"
+"@babel/highlight@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/highlight@npm:7.23.4"
   dependencies:
     "@babel/helper-validator-identifier": ^7.22.20
     chalk: ^2.4.2
     js-tokens: ^4.0.0
-  checksum: 84bd034dca309a5e680083cd827a766780ca63cef37308404f17653d32366ea76262bd2364b2d38776232f2d01b649f26721417d507e8b4b6da3e4e739f6d134
+  checksum: 643acecdc235f87d925979a979b539a5d7d1f31ae7db8d89047269082694122d11aa85351304c9c978ceeb6d250591ccadb06c366f358ccee08bb9c122476b89
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.10":
-  version: 7.18.11
-  resolution: "@babel/parser@npm:7.18.11"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 5ecc75b83e62ec53a947b1635a6ca75d6210d4a4f962f9f16f4239a6783f98e57f9662b598fa2fb1b8e12c0ad5c2bd86846ed0b97b85eb73dd7498b3a6d71a4b
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0":
-  version: 7.23.0
-  resolution: "@babel/parser@npm:7.23.0"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/parser@npm:7.23.6"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 453fdf8b9e2c2b7d7b02139e0ce003d1af21947bbc03eb350fb248ee335c9b85e4ab41697ddbdd97079698de825a265e45a0846bb2ed47a2c7c1df833f42a354
+  checksum: 140801c43731a6c41fd193f5c02bc71fd647a0360ca616b23d2db8be4b9739b9f951a03fc7c2db4f9b9214f4b27c1074db0f18bc3fa653783082d5af7c8860d5
   languageName: node
   linkType: hard
 
@@ -756,14 +681,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
+"@babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.22.5":
+  version: 7.23.3
+  resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 6d37ea972970195f1ffe1a54745ce2ae456e0ac6145fae9aa1480f297248b262ea6ebb93010eddb86ebfacb94f57c05a1fc5d232b9a67325b09060299d515c67
+  checksum: 89037694314a74e7f0e7a9c8d3793af5bf6b23d80950c29b360db1c66859d67f60711ea437e70ad6b5b4b29affe17eababda841b6c01107c2b638e0493bafb4e
   languageName: node
   linkType: hard
 
@@ -1319,16 +1244,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/polyfill@npm:^7.12.1":
-  version: 7.12.1
-  resolution: "@babel/polyfill@npm:7.12.1"
-  dependencies:
-    core-js: ^2.6.5
-    regenerator-runtime: ^0.13.4
-  checksum: 3f59a9d85a41b390b044a1be13e11ae6d8efbfcf4e07217964585c7cef337b828eecfc5e164083227189146d2b6efc1affae8f59c831438eb40b848ab6fe5f39
-  languageName: node
-  linkType: hard
-
 "@babel/preset-env@npm:^7.18.2":
   version: 7.18.10
   resolution: "@babel/preset-env@npm:7.18.10"
@@ -1458,45 +1373,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
-  version: 7.18.9
-  resolution: "@babel/runtime@npm:7.18.9"
-  dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: 36dd736baba7164e82b3cc9d43e081f0cb2d05ff867ad39cac515d99546cee75b7f782018b02a3dcf5f2ef3d27f319faa68965fdfec49d4912c60c6002353a2e
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.19.0":
-  version: 7.19.0
-  resolution: "@babel/runtime@npm:7.19.0"
-  dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: fa69c351bb05e1db3ceb9a02fdcf620c234180af68cdda02152d3561015f6d55277265d3109815992f96d910f3db709458cae4f8df1c3def66f32e0867d82294
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.20.7":
-  version: 7.23.2
-  resolution: "@babel/runtime@npm:7.23.2"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.24.0":
+  version: 7.24.1
+  resolution: "@babel/runtime@npm:7.24.1"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: 6c4df4839ec75ca10175f636d6362f91df8a3137f86b38f6cd3a4c90668a0fe8e9281d320958f4fbd43b394988958585a17c3aab2a4ea6bf7316b22916a371fb
+  checksum: 5c8f3b912ba949865f03b3cf8395c60e1f4ebd1033fbd835bdfe81b6cac8a87d85bc3c7aded5fcdf07be044c9ab8c818f467abe0deca50020c72496782639572
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3":
-  version: 7.18.10
-  resolution: "@babel/template@npm:7.18.10"
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+  version: 7.23.8
+  resolution: "@babel/runtime@npm:7.23.8"
   dependencies:
-    "@babel/code-frame": ^7.18.6
-    "@babel/parser": ^7.18.10
-    "@babel/types": ^7.18.10
-  checksum: 93a6aa094af5f355a72bd55f67fa1828a046c70e46f01b1606e6118fa1802b6df535ca06be83cc5a5e834022be95c7b714f0a268b5f20af984465a71e28f1473
+    regenerator-runtime: ^0.14.0
+  checksum: 0bd5543c26811153822a9f382fd39886f66825ff2a397a19008011376533747cd05c33a91f6248c0b8b0edf0448d7c167ebfba34786088f1b7eb11c65be7dfc3
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.22.15":
+"@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
   dependencies:
@@ -1508,42 +1403,31 @@ __metadata:
   linkType: hard
 
 "@babel/traverse@npm:^7.18.10, @babel/traverse@npm:^7.18.11, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2":
-  version: 7.23.2
-  resolution: "@babel/traverse@npm:7.23.2"
+  version: 7.23.7
+  resolution: "@babel/traverse@npm:7.23.7"
   dependencies:
-    "@babel/code-frame": ^7.22.13
-    "@babel/generator": ^7.23.0
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
     "@babel/helper-environment-visitor": ^7.22.20
     "@babel/helper-function-name": ^7.23.0
     "@babel/helper-hoist-variables": ^7.22.5
     "@babel/helper-split-export-declaration": ^7.22.6
-    "@babel/parser": ^7.23.0
-    "@babel/types": ^7.23.0
-    debug: ^4.1.0
+    "@babel/parser": ^7.23.6
+    "@babel/types": ^7.23.6
+    debug: ^4.3.1
     globals: ^11.1.0
-  checksum: 26a1eea0dde41ab99dde8b9773a013a0dc50324e5110a049f5d634e721ff08afffd54940b3974a20308d7952085ac769689369e9127dea655f868c0f6e1ab35d
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.4, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.18.10
-  resolution: "@babel/types@npm:7.18.10"
-  dependencies:
-    "@babel/helper-string-parser": ^7.18.10
-    "@babel/helper-validator-identifier": ^7.18.6
-    to-fast-properties: ^2.0.0
-  checksum: 11632c9b106e54021937a6498138014ebc9ad6c327a07b2af3ba8700773945aba4055fd136431cbe3a500d0f363cbf9c68eb4d6d38229897c5de9d06e14c85e8
+  checksum: d4a7afb922361f710efc97b1e25ec343fab8b2a4ddc81ca84f9a153f22d4482112cba8f263774be8d297918b6c4767c7a98988ab4e53ac73686c986711dd002e
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.8.3":
-  version: 7.23.0
-  resolution: "@babel/types@npm:7.23.0"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.4, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
+  version: 7.23.6
+  resolution: "@babel/types@npm:7.23.6"
   dependencies:
-    "@babel/helper-string-parser": ^7.22.5
+    "@babel/helper-string-parser": ^7.23.4
     "@babel/helper-validator-identifier": ^7.22.20
     to-fast-properties: ^2.0.0
-  checksum: 215fe04bd7feef79eeb4d33374b39909ce9cad1611c4135a4f7fdf41fe3280594105af6d7094354751514625ea92d0875aba355f53e86a92600f290e77b0e604
+  checksum: 68187dbec0d637f79bc96263ac95ec8b06d424396678e7e225492be866414ce28ebc918a75354d4c28659be6efe30020b4f0f6df81cc418a2d30645b690a8de0
   languageName: node
   linkType: hard
 
@@ -1559,12 +1443,13 @@ __metadata:
   resolution: "@collaboration/voting@workspace:."
   dependencies:
     "@osn/common": ^1.3.5
-    "@osn/common-ui": ^1.18.10
+    "@osn/common-ui": ^1.20.0
     "@osn/constants": ^1.1.2
-    "@osn/eslint-config": ^1.0.1
-    "@osn/polkadot-react-identicon": ^1.0.8
-    "@osn/previewer": ^0.12.3
-    "@osn/rich-text-editor": ^0.1.56
+    "@osn/eslint-config": ^1.0.2
+    "@osn/icons": ^1.83.0
+    "@osn/polkadot-react-identicon": ^1.0.10
+    "@osn/previewer": ^1.2.2
+    "@osn/rich-text-editor": ^0.6.6
     "@polkadot/api": ^9.4.2
     "@polkadot/extension-dapp": 0.44.6
     "@polkadot/util": 10.1.9
@@ -1573,11 +1458,12 @@ __metadata:
     "@svgr/webpack": ^6.3.1
     "@testing-library/jest-dom": ^5.14.1
     "@testing-library/react": ^12.1.1
+    autoprefixer: ^10.4.16
     babel-jest: ^27.2.2
     bignumber.js: ^9.0.1
     copy-to-clipboard: ^3.3.1
-    eslint: ^8.38.0
-    eslint-config-next: ^13.3.0
+    eslint: ^8.57.0
+    eslint-config-next: ^14.1.4
     ethereum-blockies-base64: ^1.0.2
     ethers: ^5.6.1
     file-loader: ^6.2.0
@@ -1599,6 +1485,7 @@ __metadata:
     next: ^13.5.0
     next-seo: ^4.28.1
     nprogress: ^0.2.0
+    postcss: ^8.4.33
     postinstall-postinstall: ^2.1.0
     react: ^18.2.0
     react-content-loader: ^6.2.0
@@ -1606,28 +1493,28 @@ __metadata:
     react-dom: ^18.2.0
     react-mde: ^11.5.0
     react-redux: ^7.2.5
-    react-test-renderer: ^17.0.2
     sanitize-html: ^2.12.1
     semantic-ui-css: ^2.4.1
     semantic-ui-react: ^2.0.3
     socket.io-client: ^4.6.1
     styled-components: ^5.3.1
+    tailwindcss: ^3.4.1
   languageName: unknown
   linkType: soft
 
 "@emotion/is-prop-valid@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "@emotion/is-prop-valid@npm:1.2.0"
+  version: 1.2.1
+  resolution: "@emotion/is-prop-valid@npm:1.2.1"
   dependencies:
-    "@emotion/memoize": ^0.8.0
-  checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633
+    "@emotion/memoize": ^0.8.1
+  checksum: 8f42dc573a3fad79b021479becb639b8fe3b60bdd1081a775d32388bca418ee53074c7602a4c845c5f75fa6831eb1cbdc4d208cc0299f57014ed3a02abcad16a
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/memoize@npm:0.8.0"
-  checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
+"@emotion/memoize@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/memoize@npm:0.8.1"
+  checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0
   languageName: node
   linkType: hard
 
@@ -1656,34 +1543,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.4.0":
-  version: 4.5.0
-  resolution: "@eslint-community/regexpp@npm:4.5.0"
-  checksum: 99c01335947dbd7f2129e954413067e217ccaa4e219fe0917b7d2bd96135789384b8fedbfb8eb09584d5130b27a7b876a7150ab7376f51b3a0c377d5ce026a10
+"@eslint-community/regexpp@npm:^4.6.1":
+  version: 4.10.0
+  resolution: "@eslint-community/regexpp@npm:4.10.0"
+  checksum: 2a6e345429ea8382aaaf3a61f865cae16ed44d31ca917910033c02dc00d505d939f10b81e079fa14d43b51499c640138e153b7e40743c4c094d9df97d4e56f7b
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@eslint/eslintrc@npm:2.0.2"
+"@eslint/eslintrc@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "@eslint/eslintrc@npm:2.1.4"
   dependencies:
     ajv: ^6.12.4
     debug: ^4.3.2
-    espree: ^9.5.1
+    espree: ^9.6.0
     globals: ^13.19.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
-  checksum: cfcf5e12c7b2c4476482e7f12434e76eae16fcd163ee627309adb10b761e5caa4a4e52ed7be464423320ff3d11eca5b50de5bf8be3e25834222470835dd5c801
+  checksum: 10957c7592b20ca0089262d8c2a8accbad14b4f6507e35416c32ee6b4dbf9cad67dfb77096bbd405405e9ada2b107f3797fe94362e1c55e0b09d6e90dd149127
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.38.0":
-  version: 8.38.0
-  resolution: "@eslint/js@npm:8.38.0"
-  checksum: 1f28987aa8c9cd93e23384e16c7220863b39b5dc4b66e46d7cdbccce868040f455a98d24cd8b567a884f26545a0555b761f7328d4a00c051e7ef689cbea5fce1
+"@eslint/js@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@eslint/js@npm:8.57.0"
+  checksum: 315dc65b0e9893e2bff139bddace7ea601ad77ed47b4550e73da8c9c2d2766c7a575c3cddf17ef85b8fd6a36ff34f91729d0dcca56e73ca887c10df91a41b0bb
   languageName: node
   linkType: hard
 
@@ -2088,6 +1975,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "@floating-ui/core@npm:1.6.0"
+  dependencies:
+    "@floating-ui/utils": ^0.2.1
+  checksum: 2e25c53b0c124c5c9577972f8ae21d081f2f7895e6695836a53074463e8c65b47722744d6d2b5a993164936da006a268bcfe87fe68fd24dc235b1cb86bed3127
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.3
+  resolution: "@floating-ui/dom@npm:1.6.3"
+  dependencies:
+    "@floating-ui/core": ^1.0.0
+    "@floating-ui/utils": ^0.2.0
+  checksum: 81cbb18ece3afc37992f436e469e7fabab2e433248e46fff4302d12493a175b0c64310f8a971e6e1eda7218df28ace6b70237b0f3c22fe12a21bba05b5579555
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "@floating-ui/react-dom@npm:2.0.8"
+  dependencies:
+    "@floating-ui/dom": ^1.6.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 5da7f13a69281e38859a3203a608fe9de1d850b332b355c10c0c2427c7b7209a0374c10f6295b6577c1a70237af8b678340bd4cc0a4b1c66436a94755d81e526
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:^0.26.6":
+  version: 0.26.9
+  resolution: "@floating-ui/react@npm:0.26.9"
+  dependencies:
+    "@floating-ui/react-dom": ^2.0.8
+    "@floating-ui/utils": ^0.2.1
+    tabbable: ^6.0.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 0f2dd6c7bfec77e810e916dbe11aab48ecfb7ea55715fc876736b03ac9da107d863c18b4d22ee0b43a87e354a06c806e5eca38243e3fe90d042ef06722d4f5f3
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 9ed4380653c7c217cd6f66ae51f20fdce433730dbc77f95b5abfb5a808f5fdb029c6ae249b4e0490a816f2453aa6e586d9a873cd157fdba4690f65628efc6e06
+  languageName: node
+  linkType: hard
+
 "@fluentui/react-component-event-listener@npm:~0.63.0":
   version: 0.63.1
   resolution: "@fluentui/react-component-event-listener@npm:0.63.1"
@@ -2113,14 +2052,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.8":
-  version: 0.11.8
-  resolution: "@humanwhocodes/config-array@npm:0.11.8"
+"@humanwhocodes/config-array@npm:^0.11.14":
+  version: 0.11.14
+  resolution: "@humanwhocodes/config-array@npm:0.11.14"
   dependencies:
-    "@humanwhocodes/object-schema": ^1.2.1
-    debug: ^4.1.1
+    "@humanwhocodes/object-schema": ^2.0.2
+    debug: ^4.3.1
     minimatch: ^3.0.5
-  checksum: 0fd6b3c54f1674ce0a224df09b9c2f9846d20b9e54fabae1281ecfc04f2e6ad69bf19e1d6af6a28f88e8aa3990168b6cb9e1ef755868c3256a630605ec2cb1d3
+  checksum: 861ccce9eaea5de19546653bccf75bf09fe878bc39c3aab00aeee2d2a0e654516adad38dd1098aab5e3af0145bbcbf3f309bdf4d964f8dab9dcd5834ae4c02f2
   languageName: node
   linkType: hard
 
@@ -2131,10 +2070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@humanwhocodes/object-schema@npm:1.2.1"
-  checksum: a824a1ec31591231e4bad5787641f59e9633827d0a2eaae131a288d33c9ef0290bd16fda8da6f7c0fcb014147865d12118df10db57f27f41e20da92369fcb3f1
+"@humanwhocodes/object-schema@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@humanwhocodes/object-schema@npm:2.0.2"
+  checksum: 2fc11503361b5fb4f14714c700c02a3f4c7c93e9acd6b87a29f62c522d90470f364d6161b03d1cc618b979f2ae02aed1106fd29d302695d8927e2fc8165ba8ee
   languageName: node
   linkType: hard
 
@@ -2426,13 +2365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:^3.0.3":
-  version: 3.1.0
-  resolution: "@jridgewell/resolve-uri@npm:3.1.0"
-  checksum: b5ceaaf9a110fcb2780d1d8f8d4a0bfd216702f31c988d8042e5f8fbe353c55d9b0f55a1733afdc64806f8e79c485d2464680ac48a0d9fcadb9548ee6b81d267
-  languageName: node
-  linkType: hard
-
 "@jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.1
   resolution: "@jridgewell/resolve-uri@npm:3.1.1"
@@ -2447,21 +2379,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10":
-  version: 1.4.14
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
-  checksum: 61100637b6d173d3ba786a5dff019e1a74b1f394f323c1fee337ff390239f053b87266c7a948777f4b1ee68c01a8ad0ab61e5ff4abb5a012a0b091bec391ab97
-  languageName: node
-  linkType: hard
-
-"@jridgewell/sourcemap-codec@npm:^1.4.14":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.17":
+"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.20
   resolution: "@jridgewell/trace-mapping@npm:0.3.20"
   dependencies:
@@ -2471,16 +2396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.15
-  resolution: "@jridgewell/trace-mapping@npm:0.3.15"
-  dependencies:
-    "@jridgewell/resolve-uri": ^3.0.3
-    "@jridgewell/sourcemap-codec": ^1.4.10
-  checksum: 38917e9c2b014d469a9f51c016ed506acbe44dd16ec2f6f99b553ebf3764d22abadbf992f2367b6d2b3511f3eae8ed3a8963f6c1030093fda23efd35ecab2bae
-  languageName: node
-  linkType: hard
-
 "@next/env@npm:13.5.6":
   version: 13.5.6
   resolution: "@next/env@npm:13.5.6"
@@ -2488,12 +2403,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/eslint-plugin-next@npm:13.5.6":
-  version: 13.5.6
-  resolution: "@next/eslint-plugin-next@npm:13.5.6"
+"@next/eslint-plugin-next@npm:14.1.4":
+  version: 14.1.4
+  resolution: "@next/eslint-plugin-next@npm:14.1.4"
   dependencies:
-    glob: 7.1.7
-  checksum: 58b5ef15d8298c112c72bbbc34a7a5f63637b5a02af7937d86f26223d370c6bd7c8de0eab737851a17dff52c620068a72179eb72b565add071841b720110490f
+    glob: 10.3.10
+  checksum: 1609432d9e28910e2a7b74242d3181b106af12fff241b5f61b82b467d1d16c812a71a94cdd040e0338575ed55ddc016ecd6c58d08c8b8eb031f030fdd778c8d2
   languageName: node
   linkType: hard
 
@@ -2623,19 +2538,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@osn/common-ui@npm:^1.18.10":
-  version: 1.18.10
-  resolution: "@osn/common-ui@npm:1.18.10"
+"@osn/common-ui@npm:^1.20.0":
+  version: 1.20.0
+  resolution: "@osn/common-ui@npm:1.20.0"
   dependencies:
+    "@floating-ui/react": ^0.26.6
+    "@osn/icons": ^1.83.0
     "@osn/polkadot-react-identicon": ^1.0.10
-    "@popperjs/core": ^2.11.6
-    copy-to-clipboard: ^3.3.1
+    "@radix-ui/react-tooltip": ^1.0.7
     d3-selection: ^3.0.0
     d3-shape: ^3.1.0
     dayjs: ^1.10.8
     ethereum-blockies-base64: ^1.0.2
     ethers: ^5.6.9
     jotai: ^2.1.0
+    react-use: ^17.4.4
+    tailwind-merge: ^2.2.0
+    tailwind-scrollbar: ^3.0.5
   peerDependencies:
     "@osn/common": ^1.1.0
     "@osn/constants": ^1.1.2
@@ -2648,8 +2567,8 @@ __metadata:
     react-dom: ^18.2.0
     semantic-ui-css: ^2.4.1
     semantic-ui-react: ^2.1.3
-    styled-components: ^5.3.1
-  checksum: dae3941616a1fb3233230454a956b4cafd214454e32ce2c3cde314dd8a550c54e1354eabcd4a4b7c2a411cf09e5b72fd26cfc5ce1d527fb52208827838416a30
+    styled-components: ^6.1.6
+  checksum: 8cd5ddc780993b95b97a1285845f8ada1c30c37ce92102e0f0f053abae6ff4366077f288fcf099d18905db42fe24d1019c65cb49585ff6c926c0a7ec3d42f31e
   languageName: node
   linkType: hard
 
@@ -2679,12 +2598,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@osn/eslint-config@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@osn/eslint-config@npm:1.0.1"
+"@osn/eslint-config@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@osn/eslint-config@npm:1.0.2"
   peerDependencies:
     eslint: ">=7.4.0"
-  checksum: a4ab344c1782ab7c5cad73a2b73126e8f0aae926967ec1f47204d870a03f529952ec4b05b0a251490be9b70be07b10aeee677a755183927dc15235d8ce2cc9d0
+  checksum: 94cb9a8b51f6ff8de52fc701f9a44dd466c5414705f8af7c890fc757339fbc85ce1b592c51b0444e83832f11c3f433aceea39abd14d4119d789144eec8172c69
+  languageName: node
+  linkType: hard
+
+"@osn/icons@npm:^1.83.0":
+  version: 1.83.0
+  resolution: "@osn/icons@npm:1.83.0"
+  checksum: 4f4c628dd5f5ec6aed303a57fd64597f739b1325f126f872b6423e676b9fab1a28dcd0ecb097ec51a5b6ea938ddde74800535088c47d3f036c80914441622f19
   languageName: node
   linkType: hard
 
@@ -2704,32 +2630,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@osn/polkadot-react-identicon@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "@osn/polkadot-react-identicon@npm:1.0.8"
-  dependencies:
-    "@babel/polyfill": ^7.12.1
-    "@noble/hashes": ^1.0.0
-    "@testing-library/jest-dom": ^5.16.2
-    "@testing-library/react": ^12.1.3
-    "@testing-library/user-event": ^13.5.0
-    core-js: ^3.21.1
-    micro-base: ^0.10.2
-    react: ^17.0.2
-    react-dom: ^17.0.2
-    util: "npm:util"
-    web-vitals: ^2.1.4
-  peerDependencies:
-    react: ^17.0.2
-    react-dom: ^17.0.2
-  checksum: 6147633a5c27042bd7bc6544fb7173674351266f063eb82a49f75c442b730d31801d161f7c68156aa403f5426964c090b22be4fe4ad6c891da834fdcee672b25
-  languageName: node
-  linkType: hard
-
-"@osn/previewer@npm:^0.12.3":
-  version: 0.12.3
-  resolution: "@osn/previewer@npm:0.12.3"
+"@osn/previewer@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@osn/previewer@npm:1.2.2"
   dependencies:
+    github-markdown-css: ^5.5.0
     marked: ^4.0.17
     prismjs: ^1.28.0
     sanitize-html: ^2.7.0
@@ -2737,7 +2642,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     styled-components: ^5.3.5
-  checksum: 5c761500811f9fa204e21bce71c6032cd0baf219b4376875258f71d4757233301daa67beaf99d53868712ecdfc87f276467b6de0ebb1e674017a22e70755e9fa
+  checksum: 9a6dba99c33d130ecc9e00c158681c19be1e0eaaa13334821083bc15e5d06c2d1a982381edd7cdfe8df0d019cb349721e53f25af9681fa916740a82dcfd89574
   languageName: node
   linkType: hard
 
@@ -2748,9 +2653,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@osn/rich-text-editor@npm:^0.1.56":
-  version: 0.1.56
-  resolution: "@osn/rich-text-editor@npm:0.1.56"
+"@osn/rich-text-editor@npm:^0.6.6":
+  version: 0.6.6
+  resolution: "@osn/rich-text-editor@npm:0.6.6"
   dependencies:
     lodash: ^4.17.21
     marked: ^4.0.15
@@ -2759,9 +2664,8 @@ __metadata:
     sanitize-html: ^2.7.0
   peerDependencies:
     "@osn/previewer": ^0.10.3
-    react: ^17.0.2
-    styled-components: ^5.3.1
-  checksum: be802462ad4f75aa60571de07db31d85555cbbe813af5502d3db69d6a7629c5d0ad6202edf7bbeb5cd4b3c19fbc6e0f298e6680905543053307ad068304a58d5
+    react: ^18.2.0
+  checksum: a52d9b00d6adad6f9a53e9a86fdbf3bedcd209050f0d2c7ac03ca562af00dbf3075d20f2570879711989cd0989460bab725d38f9e4565deb8e9062ce2c930b6a
   languageName: node
   linkType: hard
 
@@ -3228,78 +3132,444 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.6.0, @popperjs/core@npm:^2.9.2":
+"@popperjs/core@npm:^2.6.0":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
+"@popperjs/core@npm:^2.9.2":
   version: 2.11.6
   resolution: "@popperjs/core@npm:2.11.6"
   checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0
   languageName: node
   linkType: hard
 
-"@reduxjs/toolkit@npm:^1.6.1":
-  version: 1.8.4
-  resolution: "@reduxjs/toolkit@npm:1.8.4"
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
   dependencies:
-    immer: ^9.0.7
-    redux: ^4.1.2
-    redux-thunk: ^2.4.1
-    reselect: ^4.1.5
+    "@babel/runtime": ^7.13.10
+  checksum: 2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-arrow@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-arrow@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.3
   peerDependencies:
-    react: ^16.9.0 || ^17.0.0 || ^18
-    react-redux: ^7.2.1 || ^8.0.2
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
-    react:
+    "@types/react":
       optional: true
-    react-redux:
+    "@types/react-dom":
       optional: true
-  checksum: 2ed7ee22bc84f0a2370ca2746513ece4593b8310c16c89e1ccf43ce23dcb83d7c4f4773d78049b68b4e92b3c5bee641e8081faf3947371be6b004ebba8142a51
-  languageName: node
-  linkType: hard
-
-"@rushstack/eslint-patch@npm:^1.3.3":
-  version: 1.5.1
-  resolution: "@rushstack/eslint-patch@npm:1.5.1"
-  checksum: e4c25322312dbaa29e835a7ab4fbac53c8731dd0da65e46646e38945e296429e7fb91c2ef3da5af5d5938d44b0cde1d5290438ebb3dcb015e02b80b5e2530d24
+  checksum: 8cca086f0dbb33360e3c0142adf72f99fc96352d7086d6c2356dbb2ea5944cfb720a87d526fc48087741c602cd8162ca02b0af5e6fdf5f56d20fddb44db8b4c3
   languageName: node
   linkType: hard
 
-"@scure/base@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@scure/base@npm:1.1.1"
-  checksum: b4fc810b492693e7e8d0107313ac74c3646970c198bbe26d7332820886fa4f09441991023ec9aa3a2a51246b74409ab5ebae2e8ef148bbc253da79ac49130309
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
   languageName: node
   linkType: hard
 
-"@semantic-ui-react/event-stack@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "@semantic-ui-react/event-stack@npm:3.1.3"
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
   dependencies:
-    exenv: ^1.2.2
-    prop-types: ^15.6.2
+    "@babel/runtime": ^7.13.10
   peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: c16cf268177ed16cd63a56b8c8ec38c41b82afa16a9589accab68b3c20d821d0ad3bfde73a2695618bd04219dd992339d0bc2d6998af5ae44fd061e6b800db58
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 60e9b81d364f40c91a6213ec953f7c64fcd9d75721205a494a5815b3e5ae0719193429b62ee6c7002cd6aaf70f8c0e2f08bdbaba9ffcc233044d32b56d2127d1
   languageName: node
   linkType: hard
 
-"@sinclair/typebox@npm:^0.24.1":
-  version: 0.24.28
-  resolution: "@sinclair/typebox@npm:0.24.28"
-  checksum: adc1f06c548f0c495dad5a7124394242553e059c5ea3faa19f404b43958125366513240f17fa2b5272a3aec18618cab4137d5c85259e99ce9eaca67538af2732
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/react-use-escape-keydown": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: e73cf4bd3763f4d55b1bea7486a9700384d7d94dc00b1d5a75e222b2f1e4f32bc667a206ca4ed3baaaf7424dce7a239afd0ba59a6f0d89c3462c4e6e8d029a04
   languageName: node
   linkType: hard
 
-"@sinonjs/commons@npm:^1.7.0":
-  version: 1.8.3
-  resolution: "@sinonjs/commons@npm:1.8.3"
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
   dependencies:
-    type-detect: 4.0.8
-  checksum: 6159726db5ce6bf9f2297f8427f7ca5b3dff45b31e5cee23496f1fa6ef0bb4eab878b23fb2c5e6446381f6a66aba4968ef2fc255c1180d753d4b8c271636a2e5
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
   languageName: node
   linkType: hard
 
-"@sinonjs/fake-timers@npm:^8.0.1":
-  version: 8.1.0
+"@radix-ui/react-popper@npm:1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/react-popper@npm:1.1.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@floating-ui/react-dom": ^2.0.0
+    "@radix-ui/react-arrow": 1.0.3
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.1
+    "@radix-ui/react-use-rect": 1.0.1
+    "@radix-ui/react-use-size": 1.0.1
+    "@radix-ui/rect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: b18a15958623f9222b6ed3e24b9fbcc2ba67b8df5a5272412f261de1592b3f05002af1c8b94c065830c3c74267ce00cf6c1d70d4d507ec92ba639501f98aa348
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: ed2ff9faf9e4257a4065034d3771459e5a91c2d840b2fcec94661761704dbcb65bcdd927d28177a2a129b3dab5664eb90a9b88309afe0257a9f8ba99338c0d95
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.2
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 9402bc22923c8e5c479051974a721c301535c36521c0237b83e5fa213d013174e77f3ad7905e6d60ef07e14f88ec7f4ea69891dc7a2b39047f8d3640e8f8d713
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: edf5edf435ff594bea7e198bf16d46caf81b6fb559493acad4fa8c308218896136acb16f9b7238c788fd13e94a904f2fd0b6d834e530e4cae94522cdb8f77ce9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-tooltip@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "@radix-ui/react-tooltip@npm:1.0.7"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.5
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.3
+    "@radix-ui/react-portal": 1.0.4
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-visually-hidden": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 894d448c69a3e4d7626759f9f6c7997018fe8ef9cde098393bd83e10743d493dfd284eef041e46accc45486d5a5cd5f76d97f56afbdace7aed6e0cb14007bf15
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-rect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/rect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 433f07e61e04eb222349825bb05f3591fca131313a1d03709565d6226d8660bd1d0423635553f95ee4fcc25c8f2050972d848808d753c388e2a9ae191ebf17f3
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-size@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 6cc150ad1e9fa85019c225c5a5d50a0af6cdc4653dad0c21b4b40cd2121f36ee076db326c43e6bc91a69766ccff5a84e917d27970176b592577deea3c85a3e26
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-visually-hidden@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 2e9d0c8253f97e7d6ffb2e52a5cfd40ba719f813b39c3e2e42c496d54408abd09ef66b5aec4af9b8ab0553215e32452a5d0934597a49c51dd90dc39181ed0d57
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/rect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: aeec13b234a946052512d05239067d2d63422f9ec70bf2fe7acfd6b9196693fc33fbaf43c2667c167f777d90a095c6604eb487e0bce79e230b6df0f6cacd6a55
+  languageName: node
+  linkType: hard
+
+"@reduxjs/toolkit@npm:^1.6.1":
+  version: 1.8.4
+  resolution: "@reduxjs/toolkit@npm:1.8.4"
+  dependencies:
+    immer: ^9.0.7
+    redux: ^4.1.2
+    redux-thunk: ^2.4.1
+    reselect: ^4.1.5
+  peerDependencies:
+    react: ^16.9.0 || ^17.0.0 || ^18
+    react-redux: ^7.2.1 || ^8.0.2
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-redux:
+      optional: true
+  checksum: 2ed7ee22bc84f0a2370ca2746513ece4593b8310c16c89e1ccf43ce23dcb83d7c4f4773d78049b68b4e92b3c5bee641e8081faf3947371be6b004ebba8142a51
+  languageName: node
+  linkType: hard
+
+"@rushstack/eslint-patch@npm:^1.3.3":
+  version: 1.5.1
+  resolution: "@rushstack/eslint-patch@npm:1.5.1"
+  checksum: e4c25322312dbaa29e835a7ab4fbac53c8731dd0da65e46646e38945e296429e7fb91c2ef3da5af5d5938d44b0cde1d5290438ebb3dcb015e02b80b5e2530d24
+  languageName: node
+  linkType: hard
+
+"@scure/base@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@scure/base@npm:1.1.1"
+  checksum: b4fc810b492693e7e8d0107313ac74c3646970c198bbe26d7332820886fa4f09441991023ec9aa3a2a51246b74409ab5ebae2e8ef148bbc253da79ac49130309
+  languageName: node
+  linkType: hard
+
+"@semantic-ui-react/event-stack@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "@semantic-ui-react/event-stack@npm:3.1.3"
+  dependencies:
+    exenv: ^1.2.2
+    prop-types: ^15.6.2
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: c16cf268177ed16cd63a56b8c8ec38c41b82afa16a9589accab68b3c20d821d0ad3bfde73a2695618bd04219dd992339d0bc2d6998af5ae44fd061e6b800db58
+  languageName: node
+  linkType: hard
+
+"@sinclair/typebox@npm:^0.24.1":
+  version: 0.24.28
+  resolution: "@sinclair/typebox@npm:0.24.28"
+  checksum: adc1f06c548f0c495dad5a7124394242553e059c5ea3faa19f404b43958125366513240f17fa2b5272a3aec18618cab4137d5c85259e99ce9eaca67538af2732
+  languageName: node
+  linkType: hard
+
+"@sinonjs/commons@npm:^1.7.0":
+  version: 1.8.3
+  resolution: "@sinonjs/commons@npm:1.8.3"
+  dependencies:
+    type-detect: 4.0.8
+  checksum: 6159726db5ce6bf9f2297f8427f7ca5b3dff45b31e5cee23496f1fa6ef0bb4eab878b23fb2c5e6446381f6a66aba4968ef2fc255c1180d753d4b8c271636a2e5
+  languageName: node
+  linkType: hard
+
+"@sinonjs/fake-timers@npm:^8.0.1":
+  version: 8.1.0
   resolution: "@sinonjs/fake-timers@npm:8.1.0"
   dependencies:
     "@sinonjs/commons": ^1.7.0
@@ -3528,7 +3798,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^5.14.1, @testing-library/jest-dom@npm:^5.16.2":
+"@testing-library/jest-dom@npm:^5.14.1":
   version: 5.16.5
   resolution: "@testing-library/jest-dom@npm:5.16.5"
   dependencies:
@@ -3545,7 +3815,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^12.1.1, @testing-library/react@npm:^12.1.3":
+"@testing-library/react@npm:^12.1.1":
   version: 12.1.5
   resolution: "@testing-library/react@npm:12.1.5"
   dependencies:
@@ -3559,17 +3829,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^13.5.0":
-  version: 13.5.0
-  resolution: "@testing-library/user-event@npm:13.5.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
-  languageName: node
-  linkType: hard
-
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -3704,6 +3963,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-cookie@npm:^2.2.6":
+  version: 2.2.7
+  resolution: "@types/js-cookie@npm:2.2.7"
+  checksum: 851f47e94ca1fc43661d8f51614d67a613e7810c91b876d0a3b311ce72f7df800107fd02a08cb6948184e12c120b4f058edca2f50424d8798bdcffd6627281e3
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.8":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
@@ -3926,6 +4192,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ungap/structured-clone@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524
+  languageName: node
+  linkType: hard
+
+"@xobotyi/scrollbar-width@npm:^1.9.5":
+  version: 1.9.5
+  resolution: "@xobotyi/scrollbar-width@npm:1.9.5"
+  checksum: e880c8696bd6c7eedaad4e89cc7bcfcd502c22dc6c061288ffa7f5a4fe5dab4aa2358bdd68e7357bf0334dc8b56724ed9bee05e010b60d83a3bb0d855f3d886f
+  languageName: node
+  linkType: hard
+
 "abab@npm:^2.0.3, abab@npm:^2.0.5":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
@@ -3975,21 +4255,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.2.4":
-  version: 8.8.0
-  resolution: "acorn@npm:8.8.0"
-  bin:
-    acorn: bin/acorn
-  checksum: 7270ca82b242eafe5687a11fea6e088c960af712683756abf0791b68855ea9cace3057bd5e998ffcef50c944810c1e0ca1da526d02b32110e13c722aa959afdc
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.8.0":
-  version: 8.8.2
-  resolution: "acorn@npm:8.8.2"
+"acorn@npm:^8.2.4, acorn@npm:^8.9.0":
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
   bin:
     acorn: bin/acorn
-  checksum: f790b99a1bf63ef160c967e23c46feea7787e531292bb827126334612c234ed489a0dc2c7ba33156416f0ffa8d25bf2b0fdb7f35c2ba60eb3e960572bece4001
+  checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
   languageName: node
   linkType: hard
 
@@ -4037,7 +4308,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.10.0, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
+"ajv@npm:^6.12.4, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -4104,13 +4375,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.3":
-  version: 3.1.2
-  resolution: "anymatch@npm:3.1.2"
+"any-promise@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "any-promise@npm:1.3.0"
+  checksum: 0ee8a9bdbe882c90464d75d1f55cf027f5458650c4bd1f0467e65aec38ccccda07ca5844969ee77ed46d04e7dded3eaceb027e8d32f385688523fe305fa7e1de
+  languageName: node
+  linkType: hard
+
+"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
   dependencies:
     normalize-path: ^3.0.0
     picomatch: ^2.0.4
-  checksum: 985163db2292fac9e5a1e072bf99f1b5baccf196e4de25a0b0b81865ebddeb3b3eb4480734ef0a2ac8c002845396b91aa89121f5b84f93981a4658164a9ec6e9
+  checksum: 3e044fd6d1d26545f235a9fe4d7a534e2029d8e59fa7fd9f2a6eb21230f6b5380ea1eaf55136e60cbf8e613544b3b766e7a6fa2102e2a3a117505466e3025dc2
+  languageName: node
+  linkType: hard
+
+"arg@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "arg@npm:5.0.2"
+  checksum: 6c69ada1a9943d332d9e5382393e897c500908d91d5cb735a01120d5f71daf1b339b7b8980cbeaba8fd1afc68e658a739746179e4315a26e8a28951ff9930078
   languageName: node
   linkType: hard
 
@@ -4130,14 +4415,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "aria-query@npm:5.0.0"
-  checksum: c41f98866c5a304561ee8cae55856711cddad6f3f85d8cb43cc5f79667078d9b8979ce32d244c1ff364e6463a4d0b6865804a33ccc717fed701b281cf7dc6296
-  languageName: node
-  linkType: hard
-
-"aria-query@npm:^5.1.3":
+"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
   dependencies:
@@ -4156,19 +4434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.1.5":
-  version: 3.1.5
-  resolution: "array-includes@npm:3.1.5"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-    get-intrinsic: ^1.1.1
-    is-string: ^1.0.7
-  checksum: f6f24d834179604656b7bec3e047251d5cc87e9e87fab7c175c61af48e80e75acd296017abcde21fb52292ab6a2a449ab2ee37213ee48c8709f004d75983f9c5
-  languageName: node
-  linkType: hard
-
 "array-includes@npm:^3.1.6, array-includes@npm:^3.1.7":
   version: 3.1.7
   resolution: "array-includes@npm:3.1.7"
@@ -4277,6 +4542,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.16":
+  version: 10.4.16
+  resolution: "autoprefixer@npm:10.4.16"
+  dependencies:
+    browserslist: ^4.21.10
+    caniuse-lite: ^1.0.30001538
+    fraction.js: ^4.3.6
+    normalize-range: ^0.1.2
+    picocolors: ^1.0.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 45fad7086495048dacb14bb7b00313e70e135b5d8e8751dcc60548889400763705ab16fc2d99ea628b44c3472698fb0e39598f595ba28409c965ab159035afde
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -4389,24 +4672,17 @@ __metadata:
   linkType: hard
 
 "babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.0.7
-  resolution: "babel-plugin-styled-components@npm:2.0.7"
+  version: 2.1.4
+  resolution: "babel-plugin-styled-components@npm:2.1.4"
   dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.0
-    "@babel/helper-module-imports": ^7.16.0
-    babel-plugin-syntax-jsx: ^6.18.0
-    lodash: ^4.17.11
-    picomatch: ^2.3.0
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-module-imports": ^7.22.5
+    "@babel/plugin-syntax-jsx": ^7.22.5
+    lodash: ^4.17.21
+    picomatch: ^2.3.1
   peerDependencies:
     styled-components: ">= 2"
-  checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147
-  languageName: node
-  linkType: hard
-
-"babel-plugin-syntax-jsx@npm:^6.18.0":
-  version: 6.18.0
-  resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
-  checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27
+  checksum: d791aed68d975dae4f73055f86cd47afa99cb402b8113acdaf5678c8b6fba2cbc15543f2debe8ed09becb198aae8be2adfe268ad41f4bca917288e073a622bf8
   languageName: node
   linkType: hard
 
@@ -4472,6 +4748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"binary-extensions@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "binary-extensions@npm:2.2.0"
+  checksum: ccd267956c58d2315f5d3ea6757cf09863c5fc703e50fbeb13a7dc849b812ef76e3cf9ca8f35a0c48498776a7478d7b4a0418e1e2b8cb9cb9731f2922aaad7f8
+  languageName: node
+  linkType: hard
+
 "bn.js@npm:^4.11.9":
   version: 4.12.0
   resolution: "bn.js@npm:4.12.0"
@@ -4512,7 +4795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.2":
+"braces@npm:^3.0.2, braces@npm:~3.0.2":
   version: 3.0.2
   resolution: "braces@npm:3.0.2"
   dependencies:
@@ -4535,17 +4818,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.20.2, browserslist@npm:^4.21.3":
-  version: 4.21.3
-  resolution: "browserslist@npm:4.21.3"
+"browserslist@npm:^4.20.2, browserslist@npm:^4.21.10, browserslist@npm:^4.21.3":
+  version: 4.22.2
+  resolution: "browserslist@npm:4.22.2"
   dependencies:
-    caniuse-lite: ^1.0.30001370
-    electron-to-chromium: ^1.4.202
-    node-releases: ^2.0.6
-    update-browserslist-db: ^1.0.5
+    caniuse-lite: ^1.0.30001565
+    electron-to-chromium: ^1.4.601
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
   bin:
     browserslist: cli.js
-  checksum: ff512a7bcca1c530e2854bbdfc7be2791d0fb524097a6340e56e1d5924164c7e4e0a9b070de04cdc4c149d15cb4d4275cb7c626ebbce954278a2823aaad2452a
+  checksum: 33ddfcd9145220099a7a1ac533cecfe5b7548ffeb29b313e1b57be6459000a1f8fa67e781cf4abee97268ac594d44134fcc4a6b2b4750ceddc9796e3a22076d9
   languageName: node
   linkType: hard
 
@@ -4604,17 +4887,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "call-bind@npm:1.0.2"
-  dependencies:
-    function-bind: ^1.1.1
-    get-intrinsic: ^1.0.2
-  checksum: f8e31de9d19988a4b80f3e704788c4a2d6b6f3d17cfec4f57dc29ced450c53a49270dc66bf0fbd693329ee948dd33e6c90a329519aef17474a4d961e8d6426b0
-  languageName: node
-  linkType: hard
-
-"call-bind@npm:^1.0.4, call-bind@npm:^1.0.5":
+"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.4, call-bind@npm:^1.0.5":
   version: 1.0.5
   resolution: "call-bind@npm:1.0.5"
   dependencies:
@@ -4632,6 +4905,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
+  languageName: node
+  linkType: hard
+
 "camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
@@ -4653,21 +4933,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001370":
-  version: 1.0.30001477
-  resolution: "caniuse-lite@npm:1.0.30001477"
-  checksum: 22db0feccf43b0c16a46bb59b4e26ae05011f41c6947f1dd176d5056e0db58c3415a5ff7ee5a60903a6bda7311b71705d1d29fc4c43a8b8a1bdeef8c1d93f6a8
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001406":
-  version: 1.0.30001559
-  resolution: "caniuse-lite@npm:1.0.30001559"
-  checksum: 17c7af10244dca2c7ca41c884df19fc4c7313b9b03ed1f9b1f352bffbc871701f35431f766838f669ebe1f9d20627c0c6f2d760a0837538bd1d21de5833020f4
+"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
+  version: 1.0.30001576
+  resolution: "caniuse-lite@npm:1.0.30001576"
+  checksum: b8b332675fe703d5e57b02df5f100345f2a3796c537a42422f5bfc82d3256b8bad3f4e2788553656d2650006d13a4b5db99725e2a9462cc0c8035ba494ba1857
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.0.0, chalk@npm:^2.4.2":
+"chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -4712,6 +4985,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "chokidar@npm:3.5.3"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.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
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -4834,6 +5126,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977
+  languageName: node
+  linkType: hard
+
 "commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -4876,13 +5175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.6.5":
-  version: 2.6.12
-  resolution: "core-js@npm:2.6.12"
-  checksum: 44fa9934a85f8c78d61e0c8b7b22436330471ffe59ec5076fe7f324d6e8cf7f824b14b1c81ca73608b13bdb0fef035bd820989bf059767ad6fa13123bb8bd016
-  languageName: node
-  linkType: hard
-
 "core-js@npm:^3.21.1":
   version: 3.24.1
   resolution: "core-js@npm:3.24.1"
@@ -4921,6 +5213,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-in-js-utils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "css-in-js-utils@npm:3.1.0"
+  dependencies:
+    hyphenate-style-name: ^1.0.3
+  checksum: 066318e918c04a5e5bce46b38fe81052ea6ac051bcc6d3c369a1d59ceb1546cb2b6086901ab5d22be084122ee3732169996a3dfb04d3406eaee205af77aec61b
+  languageName: node
+  linkType: hard
+
 "css-select@npm:^4.1.3":
   version: 4.3.0
   resolution: "css-select@npm:4.3.0"
@@ -4935,13 +5236,13 @@ __metadata:
   linkType: hard
 
 "css-to-react-native@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "css-to-react-native@npm:3.0.0"
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
     camelize: ^1.0.0
     css-color-keywords: ^1.0.0
     postcss-value-parser: ^4.0.2
-  checksum: 98a2e9d4fbe9cabc8b744dfdd5ec108396ce497a7b860912a95b299bd52517461281810fcb707965a021a8be39adca9587184a26fb4e926211391a1557aca3c1
+  checksum: 263be65e805aef02c3f20c064665c998a8c35293e1505dbe6e3054fb186b01a9897ac6cf121f9840e5a9dfe3fb3994f6fcd0af84a865f1df78ba5bf89e77adce
   languageName: node
   linkType: hard
 
@@ -4969,6 +5270,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssesc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cssesc@npm:3.0.0"
+  bin:
+    cssesc: bin/cssesc
+  checksum: f8c4ababffbc5e2ddf2fa9957dda1ee4af6048e22aeda1869d0d00843223c1b13ad3f5d88b51caa46c994225eacb636b764eb807a8883e2fb6f99b4f4e8c48b2
+  languageName: node
+  linkType: hard
+
 "csso@npm:^4.2.0":
   version: 4.2.0
   resolution: "csso@npm:4.2.0"
@@ -5008,6 +5318,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.1.2":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
+  languageName: node
+  linkType: hard
+
 "d3-path@npm:1 - 3":
   version: 3.0.1
   resolution: "d3-path@npm:3.0.1"
@@ -5080,7 +5397,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -5195,17 +5512,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "define-properties@npm:1.1.4"
-  dependencies:
-    has-property-descriptors: ^1.0.0
-    object-keys: ^1.1.1
-  checksum: ce0aef3f9eb193562b5cfb79b2d2c86b6a109dfc9fdcb5f45d680631a1a908c06824ddcdb72b7573b54e26ace07f0a23420aaba0d5c627b34d2c1de8ef527e2b
-  languageName: node
-  linkType: hard
-
-"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -5237,6 +5544,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: d5d98719d58b3c2fa59663c4c42ba9716f1fd01245c31d5fce31915bd3aa26e6aac149788e007358f778ebbd68a2256eb5973e8ca6f221df221ba060115acf2e
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^27.5.1":
   version: 27.5.1
   resolution: "diff-sequences@npm:27.5.1"
@@ -5267,6 +5581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: d7381bca22ed11933a1ccf376db7a94bee2c57aa61e490f680124fa2d1cd27e94eba641d9f45be57caab4f9a6579de0983466f620a2cd6230d7ec93312105ae7
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -5386,10 +5707,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.202":
-  version: 1.4.224
-  resolution: "electron-to-chromium@npm:1.4.224"
-  checksum: c28eeab10e073af51aa1de2199cc4d40a42c1052f870b926fb97449c690dc29f167f6ffdf44d501ce3ab283aac8a70f2e1e5714e55d9454ae447904b82ae8b26
+"electron-to-chromium@npm:^1.4.601":
+  version: 1.4.626
+  resolution: "electron-to-chromium@npm:1.4.626"
+  checksum: 5ecfab63c6e9415e0bce577e53a95b2206ea3897d7f8026f2826d063f561be1fdcb6ded0f4b2ec40f00821ece34ca21f9c9357a80e5e343db4254bb9b94e65b0
   languageName: node
   linkType: hard
 
@@ -5519,34 +5840,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.5, es-abstract@npm:^1.20.0":
-  version: 1.20.1
-  resolution: "es-abstract@npm:1.20.1"
+"error-stack-parser@npm:^2.0.6":
+  version: 2.1.4
+  resolution: "error-stack-parser@npm:2.1.4"
   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.1
-    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.4
-    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.0
-    object-keys: ^1.1.1
-    object.assign: ^4.1.2
-    regexp.prototype.flags: ^1.4.3
-    string.prototype.trimend: ^1.0.5
-    string.prototype.trimstart: ^1.0.5
-    unbox-primitive: ^1.0.2
-  checksum: 28da27ae0ed9c76df7ee8ef5c278df79dcfdb554415faf7068bb7c58f8ba8e2a16bfb59e586844be6429ab4c302ca7748979d48442224cb1140b051866d74b7f
+    stackframe: ^1.3.4
+  checksum: 3b916d2d14c6682f287c8bfa28e14672f47eafe832701080e420e7cdbaebb2c50293868256a95706ac2330fe078cf5664713158b49bc30d7a5f2ac229ded0e18
   languageName: node
   linkType: hard
 
@@ -5746,11 +6045,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-next@npm:^13.3.0":
-  version: 13.5.6
-  resolution: "eslint-config-next@npm:13.5.6"
+"eslint-config-next@npm:^14.1.4":
+  version: 14.1.4
+  resolution: "eslint-config-next@npm:14.1.4"
   dependencies:
-    "@next/eslint-plugin-next": 13.5.6
+    "@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
@@ -5765,21 +6064,11 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3399d3c18d48d01a2e662b9da699d36641d32b859d5bc7541f9fb063de49f5fbefb8cb2226d3906c268cc667bc536e353fce6c7334953961eb030c73547fa0f9
-  languageName: node
-  linkType: hard
-
-"eslint-import-resolver-node@npm:^0.3.6":
-  version: 0.3.6
-  resolution: "eslint-import-resolver-node@npm:0.3.6"
-  dependencies:
-    debug: ^3.2.7
-    resolve: ^1.20.0
-  checksum: 6266733af1e112970e855a5bcc2d2058fb5ae16ad2a6d400705a86b29552b36131ffc5581b744c23d550de844206fb55e9193691619ee4dbf225c4bde526b1c8
+  checksum: 74cbaa5514a7a072731c7df01581017221538010691bb4a30d7bffac29cf2e1560d6aed3f9b97f3bee94113aace5c530b91159504f394dd0175e30c654457246
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-node@npm:^0.3.9":
+"eslint-import-resolver-node@npm:^0.3.6, eslint-import-resolver-node@npm:^0.3.9":
   version: 0.3.9
   resolution: "eslint-import-resolver-node@npm:0.3.9"
   dependencies:
@@ -5908,50 +6197,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "eslint-scope@npm:7.1.1"
+"eslint-scope@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "eslint-scope@npm:7.2.2"
   dependencies:
     esrecurse: ^4.3.0
     estraverse: ^5.2.0
-  checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e
+  checksum: ec97dbf5fb04b94e8f4c5a91a7f0a6dd3c55e46bfc7bbcd0e3138c3a76977570e02ed89a1810c778dcd72072ff0e9621ba1379b4babe53921d71e2e4486fda3e
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "eslint-visitor-keys@npm:3.4.0"
-  checksum: 33159169462d3989321a1ec1e9aaaf6a24cc403d5d347e9886d1b5bfe18ffa1be73bdc6203143a28a606b142b1af49787f33cff0d6d0813eb5f2e8d2e1a6043c
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^3.4.1":
+"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
   checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.38.0":
-  version: 8.38.0
-  resolution: "eslint@npm:8.38.0"
+"eslint@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "eslint@npm:8.57.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
-    "@eslint-community/regexpp": ^4.4.0
-    "@eslint/eslintrc": ^2.0.2
-    "@eslint/js": 8.38.0
-    "@humanwhocodes/config-array": ^0.11.8
+    "@eslint-community/regexpp": ^4.6.1
+    "@eslint/eslintrc": ^2.1.4
+    "@eslint/js": 8.57.0
+    "@humanwhocodes/config-array": ^0.11.14
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
-    ajv: ^6.10.0
+    "@ungap/structured-clone": ^1.2.0
+    ajv: ^6.12.4
     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-visitor-keys: ^3.4.0
-    espree: ^9.5.1
+    eslint-scope: ^7.2.2
+    eslint-visitor-keys: ^3.4.3
+    espree: ^9.6.1
     esquery: ^1.4.2
     esutils: ^2.0.2
     fast-deep-equal: ^3.1.3
@@ -5959,26 +6242,23 @@ __metadata:
     find-up: ^5.0.0
     glob-parent: ^6.0.2
     globals: ^13.19.0
-    grapheme-splitter: ^1.0.4
+    graphemer: ^1.4.0
     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
+    optionator: ^0.9.3
     strip-ansi: ^6.0.1
-    strip-json-comments: ^3.1.0
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 73b6d9b650d0434aa7c07d0a1802f099b086ee70a8d8ba7be730439a26572a5eb71def12125c82942be2ec8ee5be38a6f1b42a13e40d4b67f11a148ec9e263eb
+  checksum: 3a48d7ff85ab420a8447e9810d8087aea5b1df9ef68c9151732b478de698389ee656fd895635b5f2871c89ee5a2652b3f343d11e9db6f8486880374ebc74a2d9
   languageName: node
   linkType: hard
 
@@ -5994,14 +6274,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^9.5.1":
-  version: 9.5.1
-  resolution: "espree@npm:9.5.1"
+"espree@npm:^9.6.0, espree@npm:^9.6.1":
+  version: 9.6.1
+  resolution: "espree@npm:9.6.1"
   dependencies:
-    acorn: ^8.8.0
+    acorn: ^8.9.0
     acorn-jsx: ^5.3.2
-    eslint-visitor-keys: ^3.4.0
-  checksum: cdf6e43540433d917c4f2ee087c6e987b2063baa85a1d9cdaf51533d78275ebd5910c42154e7baf8e3e89804b386da0a2f7fad2264d8f04420e7506bf87b3b88
+    eslint-visitor-keys: ^3.4.1
+  checksum: eb8c149c7a2a77b3f33a5af80c10875c3abd65450f60b8af6db1bfcfa8f101e21c1e56a561c6dc13b848e18148d43469e7cd208506238554fb5395a9ea5a1ab9
   languageName: node
   linkType: hard
 
@@ -6204,29 +6484,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
-  version: 3.2.11
-  resolution: "fast-glob@npm:3.2.11"
-  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
-  checksum: f473105324a7780a20c06de842e15ddbb41d3cb7e71d1e4fe6e8373204f22245d54f5ab9e2061e6a1c613047345954d29b022e0e76f5c28b1df9858179a0e6d7
-  languageName: node
-  linkType: hard
-
-"fast-glob@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "fast-glob@npm:3.3.1"
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "fast-glob@npm:3.3.2"
   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
-  checksum: b6f3add6403e02cf3a798bfbb1183d0f6da2afd368f27456010c0bc1f9640aea308243d4cb2c0ab142f618276e65ecb8be1661d7c62a7b4e5ba774b9ce5432e5
+  checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1
   languageName: node
   linkType: hard
 
@@ -6244,6 +6511,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-loops@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "fast-loops@npm:1.1.3"
+  checksum: b674378ba2ed8364ca1a00768636e88b22201c8d010fa62a8588a4cace04f90bac46714c13cf638be82b03438d2fe813600da32291fb47297a1bd7fa6cef0cee
+  languageName: node
+  linkType: hard
+
+"fast-shallow-equal@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fast-shallow-equal@npm:1.0.0"
+  checksum: ae89318ce43c0c46410d9511ac31520d59cfe675bad3d0b1cb5f900b2d635943d788b8370437178e91ae0d0412decc394229c03e69925ade929a8c02da241610
+  languageName: node
+  linkType: hard
+
+"fastest-stable-stringify@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "fastest-stable-stringify@npm:2.0.2"
+  checksum: 5e2cb166c7bb6f16ac25a1e4be17f6b8d2923234c80739e12c9d21dea376b3128b2c63f90aa2aae7746cfec4dcf188d1d4eb6a964bb484ca133f17c8e9acfacc
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.13.0
   resolution: "fastq@npm:1.13.0"
@@ -6388,6 +6676,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.3.6":
+  version: 4.3.7
+  resolution: "fraction.js@npm:4.3.7"
+  checksum: e1553ae3f08e3ba0e8c06e43a3ab20b319966dfb7ddb96fd9b5d0ee11a66571af7f993229c88ebbb0d4a816eb813a24ed48207b140d442a8f76f33763b8d1f3f
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -6413,52 +6708,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "fsevents@npm:2.3.2"
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
   dependencies:
     node-gyp: latest
-  checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+  checksum: 11e6ea6fea15e42461fc55b4b0e4a0a3c654faa567f1877dbd353f39156f69def97a69936d1746619d656c4b93de2238bf731f6085a03a50cabf287c9d024317
   conditions: os=darwin
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>":
-  version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
     node-gyp: latest
   conditions: os=darwin
   languageName: node
   linkType: hard
 
-"function-bind@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "function-bind@npm:1.1.1"
-  checksum: b32fbaebb3f8ec4969f033073b43f5c8befbb58f1a79e12f1d7490358150359ebd92f49e72ff0144f65f2c48ea2a605bff2d07965f548f6474fd8efd95bf361a
-  languageName: node
-  linkType: hard
-
-"function-bind@npm:^1.1.2":
+"function-bind@npm:^1.1.1, function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
   checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "function.prototype.name@npm:1.1.5"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.0
-    functions-have-names: ^1.2.2
-  checksum: acd21d733a9b649c2c442f067567743214af5fa248dbeee69d8278ce7df3329ea5abac572be9f7470b4ec1cd4d8f1040e3c5caccf98ebf2bf861a0deab735c27
-  languageName: node
-  linkType: hard
-
-"function.prototype.name@npm:^1.1.6":
+"function.prototype.name@npm:^1.1.5, function.prototype.name@npm:^1.1.6":
   version: 1.1.6
   resolution: "function.prototype.name@npm:1.1.6"
   dependencies:
@@ -6470,7 +6746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3":
+"functions-have-names@npm:^1.2.3":
   version: 1.2.3
   resolution: "functions-have-names@npm:1.2.3"
   checksum: c3f1f5ba20f4e962efb71344ce0a40722163e85bee2101ce25f88214e78182d2d2476aa85ef37950c579eb6cf6ee811c17b3101bb84004bb75655f3e33f3fdb5
@@ -6491,18 +6767,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.0.1, get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "get-intrinsic@npm:1.1.2"
-  dependencies:
-    function-bind: ^1.1.1
-    has: ^1.0.3
-    has-symbols: ^1.0.3
-  checksum: 252f45491f2ba88ebf5b38018020c7cc3279de54b1d67ffb70c0cdf1dfa8ab31cd56467b5d117a8b4275b7a4dde91f86766b163a17a850f036528a7b2faafb2b
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2":
+"get-intrinsic@npm:^1.0.1, get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2":
   version: 1.2.2
   resolution: "get-intrinsic@npm:1.2.2"
   dependencies:
@@ -6547,7 +6812,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.2":
+"github-markdown-css@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "github-markdown-css@npm:5.5.0"
+  checksum: 58ba14ac87df700fd3a32a1999a6e9a4e36e808a4e1485f14aecb4230a690bfd3df508188c8a4874cae5556a87d23941b09036a22ee0f699fe844455952b1573
+  languageName: node
+  linkType: hard
+
+"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -6572,21 +6844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.7":
-  version: 7.1.7
-  resolution: "glob@npm:7.1.7"
-  dependencies:
-    fs.realpath: ^1.0.0
-    inflight: ^1.0.4
-    inherits: 2
-    minimatch: ^3.0.4
-    once: ^1.3.0
-    path-is-absolute: ^1.0.0
-  checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8
-  languageName: node
-  linkType: hard
-
-"glob@npm:^10.2.2, glob@npm:^10.3.10":
+"glob@npm:10.3.10, glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
   dependencies:
@@ -6663,24 +6921,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: ac85f94da92d8eb6b7f5a8b20ce65e43d66761c55ce85ac96df6865308390da45a8d3f0296dd3a663de65d30ba497bd46c696cc1e248c72b13d6d567138a4fc7
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.9":
-  version: 4.2.10
-  resolution: "graceful-fs@npm:4.2.10"
-  checksum: 3f109d70ae123951905d85032ebeae3c2a5a7a997430df00ea30df0e3a6c60cf6689b109654d6fdacd28810a053348c4d14642da1d075049e6be1ba5216218da
-  languageName: node
-  linkType: hard
-
-"grapheme-splitter@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "grapheme-splitter@npm:1.0.4"
-  checksum: 0c22ec54dee1b05cd480f78cf14f732cb5b108edc073572c4ec205df4cd63f30f8db8025afc5debc8835a8ddeacf648a1c7992fe3dcd6ad38f9a476d84906620
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: bab8f0be9b568857c7bec9fda95a89f87b783546d02951c40c33f84d05bb7da3fd10f863a9beb901463669b6583173a8c8cc6d6b306ea2b9b9d5d3d943c3a673
   languageName: node
   linkType: hard
 
@@ -6898,6 +7149,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hyphenate-style-name@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "hyphenate-style-name@npm:1.0.4"
+  checksum: 4f5bf4b055089754924babebaa23c17845937bcca6aee95d5d015f8fa1e6814279002bd6a9e541e3fac2cd02519fc76305396727066c57c8e21a7e73e7a12137
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -6939,7 +7197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
+"import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -6992,14 +7250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "internal-slot@npm:1.0.3"
+"inline-style-prefixer@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "inline-style-prefixer@npm:7.0.0"
   dependencies:
-    get-intrinsic: ^1.1.0
-    has: ^1.0.3
-    side-channel: ^1.0.4
-  checksum: 1944f92e981e47aebc98a88ff0db579fd90543d937806104d0b96557b10c1f170c51fb777b97740a8b6ddeec585fca8c39ae99fd08a8e058dfc8ab70937238bf
+    css-in-js-utils: ^3.1.0
+    fast-loops: ^1.1.3
+  checksum: 89fd73eb06e7392e24032ea33b8b33ae7f9a24298f2d9ebbf7b31a3a3934247270047f4f49a454a363aace14e25c3a20fd97465405b0399cc888e5a2bc04ec05
   languageName: node
   linkType: hard
 
@@ -7067,6 +7324,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-binary-path@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "is-binary-path@npm:2.1.0"
+  dependencies:
+    binary-extensions: ^2.0.0
+  checksum: 84192eb88cff70d320426f35ecd63c3d6d495da9d805b19bc65b518984b7c0760280e57dbf119b7e9be6b161784a5a673ab2c6abe83abb5198a432232ad5b35c
+  languageName: node
+  linkType: hard
+
 "is-boolean-object@npm:^1.1.0":
   version: 1.1.2
   resolution: "is-boolean-object@npm:1.1.2"
@@ -7077,14 +7343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "is-callable@npm:1.2.4"
-  checksum: 1a28d57dc435797dae04b173b65d6d1e77d4f16276e9eff973f994eadcfdc30a017e6a597f092752a083c1103cceb56c91e3dadc6692fedb9898dfaba701575f
-  languageName: node
-  linkType: hard
-
-"is-callable@npm:^1.2.7":
+"is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.7":
   version: 1.2.7
   resolution: "is-callable@npm:1.2.7"
   checksum: 61fd57d03b0d984e2ed3720fb1c7a897827ea174bd44402878e059542ea8c4aeedee0ea0985998aa5cc2736b2fa6e271c08587addb5b3959ac52cf665173d1ac
@@ -7100,15 +7359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.9.0":
-  version: 2.10.0
-  resolution: "is-core-module@npm:2.10.0"
-  dependencies:
-    has: ^1.0.3
-  checksum: 0f3f77811f430af3256fa7bbc806f9639534b140f8ee69476f632c3e1eb4e28a38be0b9d1b8ecf596179c841b53576129279df95e7051d694dac4ceb6f967593
-  languageName: node
-  linkType: hard
-
 "is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.2, is-date-object@npm:^1.0.5":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
@@ -7148,7 +7398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
+"is-generator-function@npm:^1.0.10":
   version: 1.0.10
   resolution: "is-generator-function@npm:1.0.10"
   dependencies:
@@ -7157,7 +7407,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -7275,7 +7525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12":
+"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.9":
   version: 1.1.12
   resolution: "is-typed-array@npm:1.1.12"
   dependencies:
@@ -7284,19 +7534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.3, is-typed-array@npm:^1.1.9":
-  version: 1.1.9
-  resolution: "is-typed-array@npm:1.1.9"
-  dependencies:
-    available-typed-arrays: ^1.0.5
-    call-bind: ^1.0.2
-    es-abstract: ^1.20.0
-    for-each: ^0.3.3
-    has-tostringtag: ^1.0.0
-  checksum: 11910f1e58755fef43bf0074e52fa5b932bf101ec65d613e0a83d40e8e4c6e3f2ee142d624ebc7624c091d3bbe921131f8db7d36ecbbb71909f2fe310c1faa65
-  languageName: node
-  linkType: hard
-
 "is-typedarray@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-typedarray@npm:1.0.0"
@@ -7980,6 +8217,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.19.1":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: a7bd5d63921c170eaec91eecd686388181c7828e1fa0657ab374b9372bfc1f383cf4b039e6b272383d5cb25607509880af814a39abdff967322459cca41f2961
+  languageName: node
+  linkType: hard
+
 "jotai@npm:^2.1.0":
   version: 2.2.1
   resolution: "jotai@npm:2.2.1"
@@ -7993,16 +8239,16 @@ __metadata:
   linkType: hard
 
 "jquery@npm:x.*":
-  version: 3.6.0
-  resolution: "jquery@npm:3.6.0"
-  checksum: 8fd5fef4aa48fd374ec716dd1c1df1af407814a228e15c1260ca140de3a697c2a77c30c54ff1d238b6a3ab4ddc445ddeef9adce6c6d28e4869d85eb9d3951c0e
+  version: 3.7.1
+  resolution: "jquery@npm:3.7.1"
+  checksum: 4370b8139d6ae82867eb6f7f21d1edccf1d1bdf41c0840920ea80d366c2cd5dbe1ceebb110ee9772aa839b04400faa1572c5c560b507c688ed7b61cea26c0e27
   languageName: node
   linkType: hard
 
-"js-sdsl@npm:^4.1.4":
-  version: 4.4.0
-  resolution: "js-sdsl@npm:4.4.0"
-  checksum: 7bb08a2d746ab7ff742720339aa006c631afe05e77d11eda988c1c35fae8e03e492e4e347e883e786e3ce6170685d4780c125619111f0730c11fdb41b04059c7
+"js-cookie@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "js-cookie@npm:2.2.1"
+  checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2
   languageName: node
   linkType: hard
 
@@ -8149,17 +8395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
-  version: 3.3.3
-  resolution: "jsx-ast-utils@npm:3.3.3"
-  dependencies:
-    array-includes: ^3.1.5
-    object.assign: ^4.1.3
-  checksum: a2ed78cac49a0f0c4be8b1eafe3c5257a1411341d8e7f1ac740debae003de04e5f6372bfcfbd9d082e954ffd99aac85bcda85b7c6bc11609992483f4cdc0f745
-  languageName: node
-  linkType: hard
-
-"jsx-ast-utils@npm:^3.3.3":
+"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.3":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
   dependencies:
@@ -8235,6 +8471,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lilconfig@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "lilconfig@npm:2.1.0"
+  checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117
+  languageName: node
+  linkType: hard
+
+"lilconfig@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "lilconfig@npm:3.0.0"
+  checksum: a155f1cd24d324ab20dd6974db9ebcf3fb6f2b60175f7c052d917ff8a746b590bc1ee550f6fc3cb1e8716c8b58304e22fe2193febebc0cf16fa86d85e6f896c5
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -8320,7 +8570,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.7.0":
+"lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.7.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -8756,7 +9006,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4":
+"micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
   dependencies:
@@ -8977,12 +9227,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.6":
-  version: 3.3.6
-  resolution: "nanoid@npm:3.3.6"
+"mz@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "mz@npm:2.7.0"
+  dependencies:
+    any-promise: ^1.0.0
+    object-assign: ^4.0.1
+    thenify-all: ^1.0.0
+  checksum: 8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
+  languageName: node
+  linkType: hard
+
+"nano-css@npm:^5.6.1":
+  version: 5.6.1
+  resolution: "nano-css@npm:5.6.1"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+    css-tree: ^1.1.2
+    csstype: ^3.1.2
+    fastest-stable-stringify: ^2.0.2
+    inline-style-prefixer: ^7.0.0
+    rtl-css-js: ^1.16.1
+    stacktrace-js: ^2.0.2
+    stylis: ^4.3.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 735f02c030a9416bb6060503d24f18f2b2c9f43e4893c2d8714508d00f9d114b8a134df3623e94e376b0b1d794b0cacac6a48f8e5fb2b7fa8996071bcad590b8
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.3.6, nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
   languageName: node
   linkType: hard
 
@@ -9141,10 +9421,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "node-releases@npm:2.0.6"
-  checksum: e86a926dc9fbb3b41b4c4a89d998afdf140e20a4e8dbe6c0a807f7b2948b42ea97d7fd3ad4868041487b6e9ee98409829c6e4d84a734a4215dff060a7fbeb4bf
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 59443a2f77acac854c42d321bf1b43dea0aef55cd544c6a686e9816a697300458d4e82239e2d794ea05f7bbbc8a94500332e2d3ac3f11f52e4b16cbe638b3c41
   languageName: node
   linkType: hard
 
@@ -9159,13 +9439,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^3.0.0":
+"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
   checksum: 88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
   languageName: node
   linkType: hard
 
+"normalize-range@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "normalize-range@npm:0.1.2"
+  checksum: 9b2f14f093593f367a7a0834267c24f3cb3e887a2d9809c77d8a7e5fd08738bcd15af46f0ab01cc3a3d660386f015816b5c922cea8bf2ee79777f40874063184
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^4.0.1":
   version: 4.0.1
   resolution: "npm-run-path@npm:4.0.1"
@@ -9198,21 +9485,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
+"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.12.0, object-inspect@npm:^1.9.0":
-  version: 1.12.2
-  resolution: "object-inspect@npm:1.12.2"
-  checksum: a534fc1b8534284ed71f25ce3a496013b7ea030f3d1b77118f6b7b1713829262be9e6243acbcb3ef8c626e2b64186112cb7f6db74e37b2789b9c789ca23048b2
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 80b4904bb3857c52cc1bfd0b52c0352532ca12ed3b8a6ff06a90cd209dfda1b95cee059a7625eb9da29537027f68ac4619363491eedb2f5d3dddbba97494fd6c
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.1":
+"object-inspect@npm:^1.13.1, object-inspect@npm:^1.9.0":
   version: 1.13.1
   resolution: "object-inspect@npm:1.13.1"
   checksum: 7d9fa9221de3311dcb5c7c307ee5dc011cdd31dc43624b7c184b3840514e118e05ef0002be5388304c416c0eb592feb46e983db12577fc47e47d5752fbbfb61f
@@ -9236,7 +9523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.0, object.assign@npm:^4.1.2, object.assign@npm:^4.1.3, object.assign@npm:^4.1.4":
+"object.assign@npm:^4.1.0, object.assign@npm:^4.1.2, object.assign@npm:^4.1.4":
   version: 4.1.4
   resolution: "object.assign@npm:4.1.4"
   dependencies:
@@ -9335,17 +9622,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optionator@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "optionator@npm:0.9.1"
+"optionator@npm:^0.9.3":
+  version: 0.9.3
+  resolution: "optionator@npm:0.9.3"
   dependencies:
+    "@aashutoshrathi/word-wrap": ^1.2.3
     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
-  checksum: dbc6fa065604b24ea57d734261914e697bd73b69eff7f18e967e8912aa2a40a19a9f599a507fa805be6c13c24c4eae8c71306c239d517d42d4c041c942f508a0
+  checksum: 09281999441f2fe9c33a5eeab76700795365a061563d66b098923eb719251a42bdbe432790d35064d0816ead9296dbeb1ad51a733edf4167c96bd5d0882e428a
   languageName: node
   linkType: hard
 
@@ -9502,44 +9789,114 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.4":
-  version: 4.0.5
-  resolution: "pirates@npm:4.0.5"
-  checksum: c9994e61b85260bec6c4fc0307016340d9b0c4f4b6550a957afaaff0c9b1ad58fbbea5cfcf083860a25cb27a375442e2b0edf52e2e1e40e69934e08dcc52d227
+"pify@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
+  languageName: node
+  linkType: hard
+
+"pirates@npm:^4.0.1, pirates@npm:^4.0.4":
+  version: 4.0.6
+  resolution: "pirates@npm:4.0.6"
+  checksum: 46a65fefaf19c6f57460388a5af9ab81e3d7fd0e7bc44ca59d753cb5c4d0df97c6c6e583674869762101836d68675f027d60f841c105d72734df9dfca97cbcc6
+  languageName: node
+  linkType: hard
+
+"pkg-dir@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "pkg-dir@npm:4.2.0"
+  dependencies:
+    find-up: ^4.0.0
+  checksum: 9863e3f35132bf99ae1636d31ff1e1e3501251d480336edb1c211133c8d58906bed80f154a1d723652df1fda91e01c7442c2eeaf9dc83157c7ae89087e43c8d6
+  languageName: node
+  linkType: hard
+
+"pnglib@npm:0.0.1":
+  version: 0.0.1
+  resolution: "pnglib@npm:0.0.1"
+  checksum: 48b5ef961a257f7653e6bc4d03aac1a817e4590d048cddee4f09a63cb3ed4ac120d15470725d4e37e087d57b231915d0563b16e596dd88d69a72ed669746c2bd
+  languageName: node
+  linkType: hard
+
+"postcss-import@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "postcss-import@npm:15.1.0"
+  dependencies:
+    postcss-value-parser: ^4.0.0
+    read-cache: ^1.0.0
+    resolve: ^1.1.7
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 7bd04bd8f0235429009d0022cbf00faebc885de1d017f6d12ccb1b021265882efc9302006ba700af6cab24c46bfa2f3bc590be3f9aee89d064944f171b04e2a3
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: ^2.0.1
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 5c1e83efeabeb5a42676193f4357aa9c88f4dc1b3c4a0332c132fe88932b33ea58848186db117cf473049fc233a980356f67db490bd0a7832ccba9d0b3fd3491
+  languageName: node
+  linkType: hard
+
+"postcss-load-config@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "postcss-load-config@npm:4.0.2"
+  dependencies:
+    lilconfig: ^3.0.0
+    yaml: ^2.3.4
+  peerDependencies:
+    postcss: ">=8.0.9"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 7c27dd3801db4eae207a5116fed2db6b1ebb780b40c3dd62a3e57e087093a8e6a14ee17ada729fee903152d6ef4826c6339eb135bee6208e0f3140d7e8090185
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "pkg-dir@npm:4.2.0"
+"postcss-nested@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "postcss-nested@npm:6.0.1"
   dependencies:
-    find-up: ^4.0.0
-  checksum: 9863e3f35132bf99ae1636d31ff1e1e3501251d480336edb1c211133c8d58906bed80f154a1d723652df1fda91e01c7442c2eeaf9dc83157c7ae89087e43c8d6
+    postcss-selector-parser: ^6.0.11
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 7ddb0364cd797de01e38f644879189e0caeb7ea3f78628c933d91cc24f327c56d31269384454fc02ecaf503b44bfa8e08870a7c4cc56b23bc15640e1894523fa
   languageName: node
   linkType: hard
 
-"pnglib@npm:0.0.1":
-  version: 0.0.1
-  resolution: "pnglib@npm:0.0.1"
-  checksum: 48b5ef961a257f7653e6bc4d03aac1a817e4590d048cddee4f09a63cb3ed4ac120d15470725d4e37e087d57b231915d0563b16e596dd88d69a72ed669746c2bd
+"postcss-selector-parser@npm:^6.0.11":
+  version: 6.0.15
+  resolution: "postcss-selector-parser@npm:6.0.15"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: 57decb94152111004f15e27b9c61131eb50ee10a3288e7fcf424cebbb4aba82c2817517ae718f8b5d704ee9e02a638d4a2acff8f47685c295a33ecee4fd31055
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.0.2":
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.31, postcss@npm:^8.3.11":
+"postcss@npm:8.4.31":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
   dependencies:
@@ -9550,6 +9907,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.3.11, postcss@npm:^8.4.23, postcss@npm:^8.4.33":
+  version: 8.4.33
+  resolution: "postcss@npm:8.4.33"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 6f98b2af4b76632a3de20c4f47bf0e984a1ce1a531cf11adcb0b1d63a6cbda0aae4165e578b66c32ca4879038e3eaad386a6be725a8fb4429c78e3c1ab858fe9
+  languageName: node
+  linkType: hard
+
 "postinstall-postinstall@npm:^2.1.0":
   version: 2.1.0
   resolution: "postinstall-postinstall@npm:2.1.0"
@@ -9725,19 +10093,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
-  peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -9757,13 +10112,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^16.8.6 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1, react-is@npm:^16.6.3, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -9771,6 +10119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^16.8.6 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
+  version: 18.2.0
+  resolution: "react-is@npm:18.2.0"
+  checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^17.0.1, react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
@@ -9813,8 +10168,8 @@ __metadata:
   linkType: hard
 
 "react-redux@npm:^7.2.5":
-  version: 7.2.8
-  resolution: "react-redux@npm:7.2.8"
+  version: 7.2.9
+  resolution: "react-redux@npm:7.2.9"
   dependencies:
     "@babel/runtime": ^7.15.4
     "@types/react-redux": ^7.1.20
@@ -9829,43 +10184,42 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: ecf1933e91013f2d41bfc781515b536bf81eb1f70ff228607841094c8330fe77d522372b359687e51c0b52b9888dba73db9ac0486aace1896ab9eb9daec102d5
+  checksum: 369a2bdcf87915659af9e5c55abfd9f52a84e43e0d12dcc108ed17dbe6933558b7b7fc12caa9c10c1a10a8be7df89454b6c96989d8573fedec1a772c94a1f145
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.13.1":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: ^4.1.1
-    react-is: ^16.12.0 || ^17.0.0 || ^18.0.0
+"react-universal-interface@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "react-universal-interface@npm:0.6.2"
   peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 6052c7e3e9627485120ebd8257f128aad8f56386fe8d42374b7743eac1be457c33506d153c7886b4e32923c0c352d402ab805ef9ca02dbcd8393b2bdeb6e5af8
+    react: "*"
+    tslib: "*"
+  checksum: 070a7e9e3cdd8b0ec91a2ac9ac0a8df6bcb3fd183d2775bf0f439b9870fc1faf5b4fa9fe9741abd5187f0a35be645cb4004e1c9ebda9ada7e5d0a624f94910cb
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-test-renderer@npm:17.0.2"
+"react-use@npm:^17.4.4":
+  version: 17.5.0
+  resolution: "react-use@npm:17.5.0"
   dependencies:
-    object-assign: ^4.1.1
-    react-is: ^17.0.2
-    react-shallow-renderer: ^16.13.1
-    scheduler: ^0.20.2
+    "@types/js-cookie": ^2.2.6
+    "@xobotyi/scrollbar-width": ^1.9.5
+    copy-to-clipboard: ^3.3.1
+    fast-deep-equal: ^3.1.3
+    fast-shallow-equal: ^1.0.0
+    js-cookie: ^2.2.1
+    nano-css: ^5.6.1
+    react-universal-interface: ^0.6.2
+    resize-observer-polyfill: ^1.5.1
+    screenfull: ^5.1.0
+    set-harmonic-interval: ^1.0.1
+    throttle-debounce: ^3.0.1
+    ts-easing: ^0.2.0
+    tslib: ^2.1.0
   peerDependencies:
-    react: 17.0.2
-  checksum: e6b5c6ed2a0bde2c34f1ab9523ff9bc4c141a271daf730d6b852374e83acc0155d58ab71a318251e953ebfa65b8bebb9c5dce3eba1ccfcbef7cc4e1e8261c401
-  languageName: node
-  linkType: hard
-
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+    react: "*"
+    react-dom: "*"
+  checksum: d3164db313f27aa701dcf87177861db6e19624ea7dd8bc81805352af7f6bf04072010b9776da4ac458d6bd318759ee69b12763d96098d83c75b7d66ffc689e3a
   languageName: node
   linkType: hard
 
@@ -9878,6 +10232,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: ^2.3.0
+  checksum: cffc728b9ede1e0667399903f9ecaf3789888b041c46ca53382fa3a06303e5132774dc0a96d0c16aa702dbac1ea0833d5a868d414f5ab2af1e1438e19e6657c6
+  languageName: node
+  linkType: hard
+
+"readdirp@npm:~3.6.0":
+  version: 3.6.0
+  resolution: "readdirp@npm:3.6.0"
+  dependencies:
+    picomatch: ^2.2.1
+  checksum: 1ced032e6e45670b6d7352d71d21ce7edf7b9b928494dcaba6f11fba63180d9da6cd7061ebc34175ffda6ff529f481818c962952004d273178acd70f7059b320
+  languageName: node
+  linkType: hard
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -9936,13 +10308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.4":
-  version: 0.13.9
-  resolution: "regenerator-runtime@npm:0.13.9"
-  checksum: 65ed455fe5afd799e2897baf691ca21c2772e1a969d19bb0c4695757c2d96249eb74ee3553ea34a91062b2a676beedf630b4c1551cc6299afb937be1426ec55e
-  languageName: node
-  linkType: hard
-
 "regenerator-runtime@npm:^0.14.0":
   version: 0.14.0
   resolution: "regenerator-runtime@npm:0.14.0"
@@ -9959,18 +10324,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.3.0, regexp.prototype.flags@npm:^1.4.3":
-  version: 1.4.3
-  resolution: "regexp.prototype.flags@npm:1.4.3"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    functions-have-names: ^1.2.2
-  checksum: 51228bae732592adb3ededd5e15426be25f289e9c4ef15212f4da73f4ec3919b6140806374b8894036a86020d054a8d2657d3fee6bb9b4d35d8939c20030b7a6
-  languageName: node
-  linkType: hard
-
-"regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.1":
+"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.3.0, regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.1":
   version: 1.5.1
   resolution: "regexp.prototype.flags@npm:1.5.1"
   dependencies:
@@ -10034,6 +10388,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resize-observer-polyfill@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "resize-observer-polyfill@npm:1.5.1"
+  checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -10071,20 +10432,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.14.2, resolve@npm:^1.20.0":
-  version: 1.22.1
-  resolution: "resolve@npm:1.22.1"
-  dependencies:
-    is-core-module: ^2.9.0
-    path-parse: ^1.0.7
-    supports-preserve-symlinks-flag: ^1.0.0
-  bin:
-    resolve: bin/resolve
-  checksum: 07af5fc1e81aa1d866cbc9e9460fbb67318a10fa3c4deadc35c3ad8a898ee9a71a86a65e4755ac3195e0ea0cfbe201eb323ebe655ce90526fd61917313a34e4e
-  languageName: node
-  linkType: hard
-
-"resolve@npm:^1.22.4":
+"resolve@npm:^1.1.7, resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.2, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -10110,20 +10458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>":
-  version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
-  dependencies:
-    is-core-module: ^2.9.0
-    path-parse: ^1.0.7
-    supports-preserve-symlinks-flag: ^1.0.0
-  bin:
-    resolve: bin/resolve
-  checksum: 5656f4d0bedcf8eb52685c1abdf8fbe73a1603bb1160a24d716e27a57f6cecbe2432ff9c89c2bd57542c3a7b9d14b1882b73bfe2e9d7849c9a4c0b8b39f02b8b
-  languageName: node
-  linkType: hard
-
-"resolve@patch:resolve@^1.22.4#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.4#~builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -10174,6 +10509,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rtl-css-js@npm:^1.16.1":
+  version: 1.16.1
+  resolution: "rtl-css-js@npm:1.16.1"
+  dependencies:
+    "@babel/runtime": ^7.1.2
+  checksum: 7d9ab942098eee565784ccf957f6b7dfa78ea1eec7c6bffedc6641575d274189e90752537c7bdba1f43ae6534648144f467fd6d581527455ba626a4300e62c7a
+  languageName: node
+  linkType: hard
+
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"
@@ -10213,13 +10557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:^5.1.2":
-  version: 5.2.1
-  resolution: "safe-buffer@npm:5.2.1"
-  checksum: b99c4b41fdd67a6aaf280fcd05e9ffb0813654894223afb78a31f14a19ad220bba8aba1cb14eddce1fcfb037155fe6de4e861784eb434f7d11ed58d1e70dd491
-  languageName: node
-  linkType: hard
-
 "safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -10282,16 +10619,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -10312,6 +10639,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"screenfull@npm:^5.1.0":
+  version: 5.2.0
+  resolution: "screenfull@npm:5.2.0"
+  checksum: 21eae33b780eb4679ea0ea2d14734b11168cf35049c45a2bf24ddeb39c67a788e7a8fb46d8b61ca6d8367fd67ce9dd4fc8bfe476489249c7189c2a79cf83f51a
+  languageName: node
+  linkType: hard
+
 "scrypt-js@npm:3.0.1":
   version: 3.0.1
   resolution: "scrypt-js@npm:3.0.1"
@@ -10320,17 +10654,17 @@ __metadata:
   linkType: hard
 
 "semantic-ui-css@npm:^2.4.1":
-  version: 2.4.1
-  resolution: "semantic-ui-css@npm:2.4.1"
+  version: 2.5.0
+  resolution: "semantic-ui-css@npm:2.5.0"
   dependencies:
     jquery: x.*
-  checksum: 6351d9bfbeed667a39b9cde08372865bd04612450103aabff174bc46558ad1ac123157cab2716670019abf5a70f56a77d79d082b4043d8893ed350b9a6fed837
+  checksum: f8f9bea6f06f084a9ab0bd0fa46191586a4fc94194f092fbd78deff49ee559257eb3ba9b732916073143fa7816348a7424684a94e60621e889cb184906a750d6
   languageName: node
   linkType: hard
 
 "semantic-ui-react@npm:^2.0.3":
-  version: 2.1.3
-  resolution: "semantic-ui-react@npm:2.1.3"
+  version: 2.1.5
+  resolution: "semantic-ui-react@npm:2.1.5"
   dependencies:
     "@babel/runtime": ^7.10.5
     "@fluentui/react-component-event-listener": ~0.63.0
@@ -10348,7 +10682,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 91dbf934ecfec45acaa29be1f48bec20abecc387d0071c478e83d47f8380b137f35a6956c6599de65d83587c4e0ee5611115d487ee29a9c146692ec70e139919
+  checksum: 9279b986736f78f95d21836e8052d88b88a6cc60b8a6139cff557eae449ff0a7e71ca556bab69ad4c1625251fd0e1ff6fa1613c2c47274681b330a249733b89a
   languageName: node
   linkType: hard
 
@@ -10404,6 +10738,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-harmonic-interval@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "set-harmonic-interval@npm:1.0.1"
+  checksum: c122b831c2e0b1fb812e5e9d065094b9d174bd0576f9a779ab7a7d8881c8f6dd7d5fcab9a2553da15eea670eb598f9dd4d5162b626d45cc9c529706aa1444a84
+  languageName: node
+  linkType: hard
+
 "shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
@@ -10533,6 +10874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:0.5.6":
+  version: 0.5.6
+  resolution: "source-map@npm:0.5.6"
+  checksum: 390b3f5165c9631a74fb6fb55ba61e62a7f9b7d4026ae0e2bfc2899c241d71c1bccb8731c496dc7f7cb79a5f523406eb03d8c5bebe8448ee3fc38168e2d209c8
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -10570,6 +10918,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stack-generator@npm:^2.0.5":
+  version: 2.0.10
+  resolution: "stack-generator@npm:2.0.10"
+  dependencies:
+    stackframe: ^1.3.4
+  checksum: 4fc3978a934424218a0aa9f398034e1f78153d5ff4f4ff9c62478c672debb47dd58de05b09fc3900530cbb526d72c93a6e6c9353bacc698e3b1c00ca3dda0c47
+  languageName: node
+  linkType: hard
+
 "stack-utils@npm:^2.0.3":
   version: 2.0.5
   resolution: "stack-utils@npm:2.0.5"
@@ -10579,6 +10936,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stackframe@npm:^1.3.4":
+  version: 1.3.4
+  resolution: "stackframe@npm:1.3.4"
+  checksum: bae1596873595c4610993fa84f86a3387d67586401c1816ea048c0196800c0646c4d2da98c2ee80557fd9eff05877efe33b91ba6cd052658ed96ddc85d19067d
+  languageName: node
+  linkType: hard
+
+"stacktrace-gps@npm:^3.0.4":
+  version: 3.1.2
+  resolution: "stacktrace-gps@npm:3.1.2"
+  dependencies:
+    source-map: 0.5.6
+    stackframe: ^1.3.4
+  checksum: 85daa232d138239b6ae0f4bcdd87d15d302a045d93625db17614030945b5314e204b5fbcf9bee5b6f4f9e6af5fca05f65c27fe910894b861ef6853b99470aa1c
+  languageName: node
+  linkType: hard
+
+"stacktrace-js@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "stacktrace-js@npm:2.0.2"
+  dependencies:
+    error-stack-parser: ^2.0.6
+    stack-generator: ^2.0.5
+    stacktrace-gps: ^3.0.4
+  checksum: 081e786d56188ac04ac6604c09cd863b3ca2b4300ec061366cf68c3e4ad9edaa34fb40deea03cc23a05f442aa341e9171f47313f19bd588f9bec6c505a396286
+  languageName: node
+  linkType: hard
+
 "streamsearch@npm:^1.1.0":
   version: 1.1.0
   resolution: "streamsearch@npm:1.1.0"
@@ -10646,17 +11031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimend@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "string.prototype.trimend@npm:1.0.5"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: d44f543833112f57224e79182debadc9f4f3bf9d48a0414d6f0cbd2a86f2b3e8c0ca1f95c3f8e5b32ae83e91554d79d932fc746b411895f03f93d89ed3dfb6bc
-  languageName: node
-  linkType: hard
-
 "string.prototype.trimend@npm:^1.0.7":
   version: 1.0.7
   resolution: "string.prototype.trimend@npm:1.0.7"
@@ -10668,17 +11042,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimstart@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "string.prototype.trimstart@npm:1.0.5"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: a4857c5399ad709d159a77371eeaa8f9cc284469a0b5e1bfe405de16f1fd4166a8ea6f4180e55032f348d1b679b1599fd4301fbc7a8b72bdb3e795e43f7b1048
-  languageName: node
-  linkType: hard
-
 "string.prototype.trimstart@npm:^1.0.7":
   version: 1.0.7
   resolution: "string.prototype.trimstart@npm:1.0.7"
@@ -10738,7 +11101,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@@ -10746,8 +11109,8 @@ __metadata:
   linkType: hard
 
 "styled-components@npm:^5.3.1":
-  version: 5.3.5
-  resolution: "styled-components@npm:5.3.5"
+  version: 5.3.11
+  resolution: "styled-components@npm:5.3.11"
   dependencies:
     "@babel/helper-module-imports": ^7.0.0
     "@babel/traverse": ^7.4.5
@@ -10763,7 +11126,7 @@ __metadata:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
     react-is: ">= 16.8.0"
-  checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb
+  checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
   languageName: node
   linkType: hard
 
@@ -10783,6 +11146,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:^4.3.0":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: d365f1b008677b2147e8391e9cf20094a4202a5f9789562e7d9d0a3bd6f0b3067d39e8fd17cce5323903a56f6c45388e3d839e9c0bb5a738c91726992b14966d
+  languageName: node
+  linkType: hard
+
+"sucrase@npm:^3.32.0":
+  version: 3.35.0
+  resolution: "sucrase@npm:3.35.0"
+  dependencies:
+    "@jridgewell/gen-mapping": ^0.3.2
+    commander: ^4.0.0
+    glob: ^10.3.10
+    lines-and-columns: ^1.1.6
+    mz: ^2.7.0
+    pirates: ^4.0.1
+    ts-interface-checker: ^0.1.9
+  bin:
+    sucrase: bin/sucrase
+    sucrase-node: bin/sucrase-node
+  checksum: 9fc5792a9ab8a14dcf9c47dcb704431d35c1cdff1d17d55d382a31c2e8e3063870ad32ce120a80915498486246d612e30cda44f1624d9d9a10423e1a43487ad1
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -10858,6 +11246,64 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.1":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: f8440277d223949272c74bb627a3371be21735ca9ad34c2570f7e1752bd646ccfc23a9d8b1ee65d6561243f4134f5fbbf1ad6b39ac3c4b586554accaff4a1300
+  languageName: node
+  linkType: hard
+
+"tailwind-merge@npm:^2.2.0":
+  version: 2.2.2
+  resolution: "tailwind-merge@npm:2.2.2"
+  dependencies:
+    "@babel/runtime": ^7.24.0
+  checksum: 3ab9bfa50320cba77c929ebde42a0befb10c394de2a66a953f7db71f27ca1e96a5c7382a56d001545dbcb8721d8145394a7dfd41bb269a789fc37a3bfabd1f62
+  languageName: node
+  linkType: hard
+
+"tailwind-scrollbar@npm:^3.0.5":
+  version: 3.1.0
+  resolution: "tailwind-scrollbar@npm:3.1.0"
+  peerDependencies:
+    tailwindcss: 3.x
+  checksum: a3aca614824ae655ff9b8fa6341e54cd543d68bf107c41cb45cbdcb80e4dff4169250bd13c50beb4f8690ca90392da6452ee4ade0e0e8203ef38aacac176173d
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:^3.4.1":
+  version: 3.4.1
+  resolution: "tailwindcss@npm:3.4.1"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.19.1
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: ef5a587dd32bb4e91e1549ead6162f85f0b78d3e6ffd8b4e8eeb15585b7b886cb3af6ae9df5092ed8ccb7e590608d1b3eec79ca08c862b07cd9ff7e72f73104b
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^2.2.0":
   version: 2.2.1
   resolution: "tapable@npm:2.2.1"
@@ -10907,6 +11353,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thenify-all@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "thenify-all@npm:1.6.0"
+  dependencies:
+    thenify: ">= 3.1.0 < 4"
+  checksum: dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
+  languageName: node
+  linkType: hard
+
+"thenify@npm:>= 3.1.0 < 4":
+  version: 3.3.1
+  resolution: "thenify@npm:3.3.1"
+  dependencies:
+    any-promise: ^1.0.0
+  checksum: 84e1b804bfec49f3531215f17b4a6e50fd4397b5f7c1bccc427b9c656e1ecfb13ea79d899930184f78bc2f57285c54d9a50a590c8868f4f0cef5c1d9f898b05e
+  languageName: node
+  linkType: hard
+
 "throat@npm:^6.0.1":
   version: 6.0.1
   resolution: "throat@npm:6.0.1"
@@ -10914,6 +11378,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"throttle-debounce@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "throttle-debounce@npm:3.0.1"
+  checksum: e34ef638e8df3a9154249101b68afcbf2652a139c803415ef8a2f6a8bc577bcd4d79e4bb914ad3cd206523ac78b9fb7e80885bfa049f64fbb1927f99d98b5736
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"
@@ -10974,6 +11445,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-easing@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "ts-easing@npm:0.2.0"
+  checksum: e67ee862acca3b2e2718e736f31999adcef862d0df76d76a0e138588728d8a87dfec9978556044640bd0e90203590ad88ac2fe8746d0e9959b8d399132315150
+  languageName: node
+  linkType: hard
+
+"ts-interface-checker@npm:^0.1.9":
+  version: 0.1.13
+  resolution: "ts-interface-checker@npm:0.1.13"
+  checksum: 20c29189c2dd6067a8775e07823ddf8d59a33e2ffc47a1bd59a5cb28bb0121a2969a816d5e77eda2ed85b18171aa5d1c4005a6b88ae8499ec7cc49f78571cb5e
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^3.14.2":
   version: 3.14.2
   resolution: "tsconfig-paths@npm:3.14.2"
@@ -10986,27 +11471,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.1.0":
-  version: 2.4.0
-  resolution: "tslib@npm:2.4.0"
-  checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
-  languageName: node
-  linkType: hard
-
-"tslib@npm:^2.4.0":
+"tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.5.3":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.5.3":
-  version: 2.6.0
-  resolution: "tslib@npm:2.6.0"
-  checksum: c01066038f950016a18106ddeca4649b4d76caa76ec5a31e2a26e10586a59fceb4ee45e96719bf6c715648e7c14085a81fee5c62f7e9ebee68e77a5396e5538f
-  languageName: node
-  linkType: hard
-
 "tweetnacl@npm:1.x.x, tweetnacl@npm:^1.0.3":
   version: 1.0.3
   resolution: "tweetnacl@npm:1.0.3"
@@ -11191,17 +11662,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "update-browserslist-db@npm:1.0.5"
+"update-browserslist-db@npm:^1.0.13":
+  version: 1.0.13
+  resolution: "update-browserslist-db@npm:1.0.13"
   dependencies:
     escalade: ^3.1.1
     picocolors: ^1.0.0
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
-    browserslist-lint: cli.js
-  checksum: 7e425fe5dbbebdccf72a84ce70ec47fc74dce561d28f47bc2b84a1c2b84179a862c2261b18ab66a5e73e261c7e2ef9e11c6129112989d4d52e8f75a56bb923f8
+    update-browserslist-db: cli.js
+  checksum: 1e47d80182ab6e4ad35396ad8b61008ae2a1330221175d0abd37689658bdb61af9b705bfc41057fd16682474d79944fb2d86767c5ed5ae34b6276b9bed353322
   languageName: node
   linkType: hard
 
@@ -11234,17 +11705,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:util":
-  version: 0.12.4
-  resolution: "util@npm:0.12.4"
-  dependencies:
-    inherits: ^2.0.3
-    is-arguments: ^1.0.4
-    is-generator-function: ^1.0.7
-    is-typed-array: ^1.1.3
-    safe-buffer: ^5.1.2
-    which-typed-array: ^1.1.2
-  checksum: 8eac7a6e6b341c0f1b3eb73bbe5dfcae31a7e9699c8fc3266789f3e95f7637946a7700dcf1904dbd3749a58a36760ebf7acf4bb5b717f7468532a8a79f44eff0
+"util-deprecate@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "util-deprecate@npm:1.0.2"
+  checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
   languageName: node
   linkType: hard
 
@@ -11433,7 +11897,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.9":
+"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
   version: 1.1.13
   resolution: "which-typed-array@npm:1.1.13"
   dependencies:
@@ -11446,20 +11910,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.2":
-  version: 1.1.8
-  resolution: "which-typed-array@npm:1.1.8"
-  dependencies:
-    available-typed-arrays: ^1.0.5
-    call-bind: ^1.0.2
-    es-abstract: ^1.20.0
-    for-each: ^0.3.3
-    has-tostringtag: ^1.0.0
-    is-typed-array: ^1.1.9
-  checksum: bedf4d30a738e848404fe67fe0ace33433a7298cf3f5a4d4b2c624ba99c4d25f06a7fd6f3566c3d16af5f8a54f0c6293cbfded5b1208ce11812753990223b45a
-  languageName: node
-  linkType: hard
-
 "which@npm:^2.0.1":
   version: 2.0.2
   resolution: "which@npm:2.0.2"
@@ -11482,7 +11932,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"word-wrap@npm:^1.2.3, word-wrap@npm:~1.2.3":
+"word-wrap@npm:~1.2.3":
   version: 1.2.4
   resolution: "word-wrap@npm:1.2.4"
   checksum: 8f1f2e0a397c0e074ca225ba9f67baa23f99293bc064e31355d426ae91b8b3f6b5f6c1fc9ae5e9141178bb362d563f55e62fd8d5c31f2a77e3ade56cb3e35bd1
@@ -11560,22 +12010,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.8.1":
-  version: 8.9.0
-  resolution: "ws@npm:8.9.0"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ^5.0.2
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: 23aa0f021b2eb65c108ec4c3e08c0d81ba01f82b500432dfe327fd6be36079c1d81fdb0eac6464d2a0eb49904d34a9ab8c59619d673fa07b8346f83aeb0cbf12
-  languageName: node
-  linkType: hard
-
-"ws@npm:~8.11.0":
+"ws@npm:^8.8.1, ws@npm:~8.11.0":
   version: 8.11.0
   resolution: "ws@npm:8.11.0"
   peerDependencies:
@@ -11639,6 +12074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "yaml@npm:2.3.4"
+  checksum: e6d1dae1c6383bcc8ba11796eef3b8c02d5082911c6723efeeb5ba50fc8e881df18d645e64de68e421b577296000bea9c75d6d9097c2f6699da3ae0406c030d8
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^20.2.2":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"
diff --git a/package.json b/package.json
index 08110640..6e15ba33 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     }
   },
   "devDependencies": {
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.4",
     "prettier": "^2.5.1",
diff --git a/yarn.lock b/yarn.lock
index eb923ddf..70a12c21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,13 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@aashutoshrathi/word-wrap@npm:^1.2.3":
+  version: 1.2.6
+  resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
+  checksum: ada901b9e7c680d190f1d012c84217ce0063d8f5c5a7725bb91ec3c5ed99bb7572680eb2d2938a531ccbaec39a95422fcd8a6b4a13110c7d98dd75402f66a0cd
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -16,45 +23,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.4.0":
-  version: 4.5.0
-  resolution: "@eslint-community/regexpp@npm:4.5.0"
-  checksum: 99c01335947dbd7f2129e954413067e217ccaa4e219fe0917b7d2bd96135789384b8fedbfb8eb09584d5130b27a7b876a7150ab7376f51b3a0c377d5ce026a10
+"@eslint-community/regexpp@npm:^4.6.1":
+  version: 4.10.0
+  resolution: "@eslint-community/regexpp@npm:4.10.0"
+  checksum: 2a6e345429ea8382aaaf3a61f865cae16ed44d31ca917910033c02dc00d505d939f10b81e079fa14d43b51499c640138e153b7e40743c4c094d9df97d4e56f7b
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@eslint/eslintrc@npm:2.0.2"
+"@eslint/eslintrc@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "@eslint/eslintrc@npm:2.1.4"
   dependencies:
-    ajv: "npm:^6.12.4"
-    debug: "npm:^4.3.2"
-    espree: "npm:^9.5.1"
-    globals: "npm:^13.19.0"
-    ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.2.1"
-    js-yaml: "npm:^4.1.0"
-    minimatch: "npm:^3.1.2"
-    strip-json-comments: "npm:^3.1.1"
-  checksum: cfcf5e12c7b2c4476482e7f12434e76eae16fcd163ee627309adb10b761e5caa4a4e52ed7be464423320ff3d11eca5b50de5bf8be3e25834222470835dd5c801
+    ajv: ^6.12.4
+    debug: ^4.3.2
+    espree: ^9.6.0
+    globals: ^13.19.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
+  checksum: 10957c7592b20ca0089262d8c2a8accbad14b4f6507e35416c32ee6b4dbf9cad67dfb77096bbd405405e9ada2b107f3797fe94362e1c55e0b09d6e90dd149127
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.38.0":
-  version: 8.38.0
-  resolution: "@eslint/js@npm:8.38.0"
-  checksum: 1f28987aa8c9cd93e23384e16c7220863b39b5dc4b66e46d7cdbccce868040f455a98d24cd8b567a884f26545a0555b761f7328d4a00c051e7ef689cbea5fce1
+"@eslint/js@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@eslint/js@npm:8.57.0"
+  checksum: 315dc65b0e9893e2bff139bddace7ea601ad77ed47b4550e73da8c9c2d2766c7a575c3cddf17ef85b8fd6a36ff34f91729d0dcca56e73ca887c10df91a41b0bb
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.8":
-  version: 0.11.8
-  resolution: "@humanwhocodes/config-array@npm:0.11.8"
+"@humanwhocodes/config-array@npm:^0.11.14":
+  version: 0.11.14
+  resolution: "@humanwhocodes/config-array@npm:0.11.14"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^1.2.1"
-    debug: "npm:^4.1.1"
-    minimatch: "npm:^3.0.5"
-  checksum: 0fd6b3c54f1674ce0a224df09b9c2f9846d20b9e54fabae1281ecfc04f2e6ad69bf19e1d6af6a28f88e8aa3990168b6cb9e1ef755868c3256a630605ec2cb1d3
+    "@humanwhocodes/object-schema": ^2.0.2
+    debug: ^4.3.1
+    minimatch: ^3.0.5
+  checksum: 861ccce9eaea5de19546653bccf75bf09fe878bc39c3aab00aeee2d2a0e654516adad38dd1098aab5e3af0145bbcbf3f309bdf4d964f8dab9dcd5834ae4c02f2
   languageName: node
   linkType: hard
 
@@ -65,10 +72,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@humanwhocodes/object-schema@npm:1.2.1"
-  checksum: a824a1ec31591231e4bad5787641f59e9633827d0a2eaae131a288d33c9ef0290bd16fda8da6f7c0fcb014147865d12118df10db57f27f41e20da92369fcb3f1
+"@humanwhocodes/object-schema@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@humanwhocodes/object-schema@npm:2.0.2"
+  checksum: 2fc11503361b5fb4f14714c700c02a3f4c7c93e9acd6b87a29f62c522d90470f364d6161b03d1cc618b979f2ae02aed1106fd29d302695d8927e2fc8165ba8ee
   languageName: node
   linkType: hard
 
@@ -106,6 +113,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ungap/structured-clone@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -115,12 +129,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.8.0":
-  version: 8.8.2
-  resolution: "acorn@npm:8.8.2"
+"acorn@npm:^8.9.0":
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
   bin:
     acorn: bin/acorn
-  checksum: f790b99a1bf63ef160c967e23c46feea7787e531292bb827126334612c234ed489a0dc2c7ba33156416f0ffa8d25bf2b0fdb7f35c2ba60eb3e960572bece4001
+  checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
   languageName: node
   linkType: hard
 
@@ -134,7 +148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.10.0, ajv@npm:^6.12.4":
+"ajv@npm:^6.12.4":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -313,7 +327,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "collaboration@workspace:."
   dependencies:
-    eslint: ^8.38.0
+    eslint: ^8.57.0
     husky: ^7.0.4
     lint-staged: ^12.3.4
     prettier: ^2.5.1
@@ -369,7 +383,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3":
+"debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -434,81 +448,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "eslint-scope@npm:7.1.1"
+"eslint-scope@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "eslint-scope@npm:7.2.2"
   dependencies:
-    esrecurse: "npm:^4.3.0"
-    estraverse: "npm:^5.2.0"
-  checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e
+    esrecurse: ^4.3.0
+    estraverse: ^5.2.0
+  checksum: ec97dbf5fb04b94e8f4c5a91a7f0a6dd3c55e46bfc7bbcd0e3138c3a76977570e02ed89a1810c778dcd72072ff0e9621ba1379b4babe53921d71e2e4486fda3e
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.0":
+"eslint-visitor-keys@npm:^3.3.0":
   version: 3.4.0
   resolution: "eslint-visitor-keys@npm:3.4.0"
   checksum: 33159169462d3989321a1ec1e9aaaf6a24cc403d5d347e9886d1b5bfe18ffa1be73bdc6203143a28a606b142b1af49787f33cff0d6d0813eb5f2e8d2e1a6043c
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.38.0":
-  version: 8.38.0
-  resolution: "eslint@npm:8.38.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@eslint-community/regexpp": "npm:^4.4.0"
-    "@eslint/eslintrc": "npm:^2.0.2"
-    "@eslint/js": "npm:8.38.0"
-    "@humanwhocodes/config-array": "npm:^0.11.8"
-    "@humanwhocodes/module-importer": "npm:^1.0.1"
-    "@nodelib/fs.walk": "npm:^1.2.8"
-    ajv: "npm:^6.10.0"
-    chalk: "npm:^4.0.0"
-    cross-spawn: "npm:^7.0.2"
-    debug: "npm:^4.3.2"
-    doctrine: "npm:^3.0.0"
-    escape-string-regexp: "npm:^4.0.0"
-    eslint-scope: "npm:^7.1.1"
-    eslint-visitor-keys: "npm:^3.4.0"
-    espree: "npm:^9.5.1"
-    esquery: "npm:^1.4.2"
-    esutils: "npm:^2.0.2"
-    fast-deep-equal: "npm:^3.1.3"
-    file-entry-cache: "npm:^6.0.1"
-    find-up: "npm:^5.0.0"
-    glob-parent: "npm:^6.0.2"
-    globals: "npm:^13.19.0"
-    grapheme-splitter: "npm:^1.0.4"
-    ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.0.0"
-    imurmurhash: "npm:^0.1.4"
-    is-glob: "npm:^4.0.0"
-    is-path-inside: "npm:^3.0.3"
-    js-sdsl: "npm:^4.1.4"
-    js-yaml: "npm:^4.1.0"
-    json-stable-stringify-without-jsonify: "npm:^1.0.1"
-    levn: "npm:^0.4.1"
-    lodash.merge: "npm:^4.6.2"
-    minimatch: "npm:^3.1.2"
-    natural-compare: "npm:^1.4.0"
-    optionator: "npm:^0.9.1"
-    strip-ansi: "npm:^6.0.1"
-    strip-json-comments: "npm:^3.1.0"
-    text-table: "npm:^0.2.0"
+"eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60
+  languageName: node
+  linkType: hard
+
+"eslint@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "eslint@npm:8.57.0"
+  dependencies:
+    "@eslint-community/eslint-utils": ^4.2.0
+    "@eslint-community/regexpp": ^4.6.1
+    "@eslint/eslintrc": ^2.1.4
+    "@eslint/js": 8.57.0
+    "@humanwhocodes/config-array": ^0.11.14
+    "@humanwhocodes/module-importer": ^1.0.1
+    "@nodelib/fs.walk": ^1.2.8
+    "@ungap/structured-clone": ^1.2.0
+    ajv: ^6.12.4
+    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.2.2
+    eslint-visitor-keys: ^3.4.3
+    espree: ^9.6.1
+    esquery: ^1.4.2
+    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.19.0
+    graphemer: ^1.4.0
+    ignore: ^5.2.0
+    imurmurhash: ^0.1.4
+    is-glob: ^4.0.0
+    is-path-inside: ^3.0.3
+    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.3
+    strip-ansi: ^6.0.1
+    text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 73b6d9b650d0434aa7c07d0a1802f099b086ee70a8d8ba7be730439a26572a5eb71def12125c82942be2ec8ee5be38a6f1b42a13e40d4b67f11a148ec9e263eb
+  checksum: 3a48d7ff85ab420a8447e9810d8087aea5b1df9ef68c9151732b478de698389ee656fd895635b5f2871c89ee5a2652b3f343d11e9db6f8486880374ebc74a2d9
   languageName: node
   linkType: hard
 
-"espree@npm:^9.5.1":
-  version: 9.5.1
-  resolution: "espree@npm:9.5.1"
+"espree@npm:^9.6.0, espree@npm:^9.6.1":
+  version: 9.6.1
+  resolution: "espree@npm:9.6.1"
   dependencies:
-    acorn: "npm:^8.8.0"
-    acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^3.4.0"
-  checksum: cdf6e43540433d917c4f2ee087c6e987b2063baa85a1d9cdaf51533d78275ebd5910c42154e7baf8e3e89804b386da0a2f7fad2264d8f04420e7506bf87b3b88
+    acorn: ^8.9.0
+    acorn-jsx: ^5.3.2
+    eslint-visitor-keys: ^3.4.1
+  checksum: eb8c149c7a2a77b3f33a5af80c10875c3abd65450f60b8af6db1bfcfa8f101e21c1e56a561c6dc13b848e18148d43469e7cd208506238554fb5395a9ea5a1ab9
   languageName: node
   linkType: hard
 
@@ -718,10 +737,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"grapheme-splitter@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "grapheme-splitter@npm:1.0.4"
-  checksum: 0c22ec54dee1b05cd480f78cf14f732cb5b108edc073572c4ec205df4cd63f30f8db8025afc5debc8835a8ddeacf648a1c7992fe3dcd6ad38f9a476d84906620
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: bab8f0be9b568857c7bec9fda95a89f87b783546d02951c40c33f84d05bb7da3fd10f863a9beb901463669b6583173a8c8cc6d6b306ea2b9b9d5d3d943c3a673
   languageName: node
   linkType: hard
 
@@ -769,7 +788,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
+"import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -868,13 +887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-sdsl@npm:^4.1.4":
-  version: 4.4.0
-  resolution: "js-sdsl@npm:4.4.0"
-  checksum: 7bb08a2d746ab7ff742720339aa006c631afe05e77d11eda988c1c35fae8e03e492e4e347e883e786e3ce6170685d4780c125619111f0730c11fdb41b04059c7
-  languageName: node
-  linkType: hard
-
 "js-yaml@npm:^4.1.0":
   version: 4.1.0
   resolution: "js-yaml@npm:4.1.0"
@@ -1107,17 +1119,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optionator@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "optionator@npm:0.9.1"
+"optionator@npm:^0.9.3":
+  version: 0.9.3
+  resolution: "optionator@npm:0.9.3"
   dependencies:
-    deep-is: "npm:^0.1.3"
-    fast-levenshtein: "npm:^2.0.6"
-    levn: "npm:^0.4.1"
-    prelude-ls: "npm:^1.2.1"
-    type-check: "npm:^0.4.0"
-    word-wrap: "npm:^1.2.3"
-  checksum: dbc6fa065604b24ea57d734261914e697bd73b69eff7f18e967e8912aa2a40a19a9f599a507fa805be6c13c24c4eae8c71306c239d517d42d4c041c942f508a0
+    "@aashutoshrathi/word-wrap": ^1.2.3
+    deep-is: ^0.1.3
+    fast-levenshtein: ^2.0.6
+    levn: ^0.4.1
+    prelude-ls: ^1.2.1
+    type-check: ^0.4.0
+  checksum: 09281999441f2fe9c33a5eeab76700795365a061563d66b098923eb719251a42bdbe432790d35064d0816ead9296dbeb1ad51a733edf4167c96bd5d0882e428a
   languageName: node
   linkType: hard
 
@@ -1446,7 +1458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@@ -1542,13 +1554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"word-wrap@npm:^1.2.3":
-  version: 1.2.4
-  resolution: "word-wrap@npm:1.2.4"
-  checksum: 8f1f2e0a397c0e074ca225ba9f67baa23f99293bc064e31355d426ae91b8b3f6b5f6c1fc9ae5e9141178bb362d563f55e62fd8d5c31f2a77e3ade56cb3e35bd1
-  languageName: node
-  linkType: hard
-
 "wrap-ansi@npm:^6.2.0":
   version: 6.2.0
   resolution: "wrap-ansi@npm:6.2.0"