diff --git a/web/global.d.ts b/web/global.d.ts
index b98930e..64647a5 100644
--- a/web/global.d.ts
+++ b/web/global.d.ts
@@ -1,6 +1,3 @@
-import {} from "styled-components";
-import { lightTheme } from "./src/styles/themes";
-
 declare global {
   module "*.svg" {
     const content: React.FC<React.SVGAttributes<SVGElement>>;
@@ -12,8 +9,4 @@ declare global {
   }
 }
 
-declare module "styled-components" {
-  type Theme = typeof lightTheme;
-  //eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends Theme {}
-}
+export {};
diff --git a/web/package.json b/web/package.json
index 672c636..ea366cd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -48,10 +48,9 @@
     "@graphql-codegen/client-preset": "^4.2.0",
     "@kleros/curate-v2-tsconfig": "workspace:^",
     "@kleros/kleros-v2-contracts": "^0.10.0",
+    "@tailwindcss/vite": "^4.1.16",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-modal": "^3.16.3",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@typescript-eslint/utils": "^5.62.0",
@@ -61,6 +60,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.3.3",
     "vite": "^5.4.2",
     "vite-plugin-node-polyfills": "^0.22.0",
@@ -71,7 +71,7 @@
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@kleros/curate-v2-templates": "workspace:^",
     "@kleros/kleros-app": "^2.0.2",
-    "@kleros/ui-components-library": "^2.20.0",
+    "@kleros/ui-components-library": "^3.6.0",
     "@reown/appkit": "^1.6.6",
     "@reown/appkit-adapter-wagmi": "^1.6.6",
     "@sentry/react": "^7.93.0",
@@ -82,6 +82,7 @@
     "@yornaath/batshit": "^0.9.0",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "clsx": "^2.1.1",
     "core-js": "^3.35.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -98,13 +99,12 @@
     "react-is": "^18.2.0",
     "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.7",
-    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.2",
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.3",
-    "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.4",
+    "tailwind-merge": "^3.3.1",
     "viem": "^2.27.2",
     "wagmi": "^2.14.10",
     "zod": "^3.24.2"
diff --git a/web/src/app.tsx b/web/src/app.tsx
index 082eb22..a0f2764 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -3,10 +3,12 @@ import { Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
+import "overlayscrollbars/styles/overlayscrollbars.css";
+import "./global.css";
+import ThemeProvider from "context/ThemeProvider";
 import Web3Provider from "context/Web3Provider";
 import IsListViewProvider from "context/IsListViewProvider";
 import QueryClientProvider from "context/QueryClientProvider";
-import StyledComponentsProvider from "context/StyledComponentsProvider";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import AllLists from "./pages/AllLists";
@@ -22,7 +24,7 @@ import Settings from "./pages/Settings";
 
 const App: React.FC = () => {
   return (
-    <StyledComponentsProvider>
+    <ThemeProvider>
       <Web3Provider>
         <GraphqlBatcherProvider>
           <QueryClientProvider>
@@ -55,7 +57,7 @@ const App: React.FC = () => {
           </QueryClientProvider>
         </GraphqlBatcherProvider>
       </Web3Provider>
-    </StyledComponentsProvider>
+    </ThemeProvider>
   );
 };
 
diff --git a/web/src/components/ActionButton/ExecuteButton.tsx b/web/src/components/ActionButton/ExecuteButton.tsx
index 3110621..551353e 100644
--- a/web/src/components/ActionButton/ExecuteButton.tsx
+++ b/web/src/components/ActionButton/ExecuteButton.tsx
@@ -26,7 +26,7 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
     <EnsureChain>
       <Button
         text="Execute"
-        disabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
+        isDisabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
         isLoading={isLoading || isExecuting}
         onClick={() => {
           if (!executeRequest || !config || !publicClient) return;
diff --git a/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx b/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx
index ce2eff8..f89c926 100644
--- a/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx
+++ b/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx
@@ -1,11 +1,7 @@
-import styled from "styled-components";
+import React from "react";
 
-export const ErrorButtonMessage = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  justify-content: center;
-  margin: 12px;
-  color: ${({ theme }) => theme.error};
-  font-size: 14px;
-`;
+export const ErrorButtonMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="flex gap-1 items-center justify-center m-3 text-klerosUIComponentsError text-sm">{children}</div>
+  );
+};
diff --git a/web/src/components/ActionButton/Modal/Buttons/index.tsx b/web/src/components/ActionButton/Modal/Buttons/index.tsx
index 5cdd1d5..959fd6f 100644
--- a/web/src/components/ActionButton/Modal/Buttons/index.tsx
+++ b/web/src/components/ActionButton/Modal/Buttons/index.tsx
@@ -1,25 +1,10 @@
 import React from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { EnsureChain } from "components/EnsureChain";
 import EnsureAuth from "components/EnsureAuth";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 import { ErrorButtonMessage } from "./ErrorButtonMessage";
 
-const Container = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 16px;
-`;
-
-const ButtonsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
 interface IButtons {
   toggleModal: () => void;
   callback: () => void;
@@ -38,28 +23,28 @@ const Buttons: React.FC<IButtons> = ({
   insufficientBalance,
 }) => {
   return (
-    <Container>
+    <div className="flex flex-wrap gap-4 justify-between w-full">
       <Button variant="secondary" text="Return" onClick={toggleModal} />
       <EnsureChain>
         <EnsureAuth>
-          <ButtonsContainer>
+          <div className="flex flex-col items-center">
             <Button
               text={buttonText}
               onClick={() => {
                 callback();
               }}
               isLoading={isLoading}
-              disabled={isDisabled}
+              isDisabled={isDisabled}
             />
             {insufficientBalance ? (
               <ErrorButtonMessage>
                 <ClosedCircleIcon /> Insufficient balance
               </ErrorButtonMessage>
             ) : null}
-          </ButtonsContainer>
+          </div>
         </EnsureAuth>
       </EnsureChain>
-    </Container>
+    </div>
   );
 };
 export default Buttons;
diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
index 0918bc8..421f97f 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import styled from "styled-components";
 import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
@@ -19,10 +18,6 @@ import {
 } from "hooks/useContract";
 import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
-const ReStyledModal = styled(Modal)`
-  gap: 32px;
-`;
-
 export enum ChallengeType {
   Submission,
   Removal,
@@ -129,7 +124,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
   );
 
   return (
-    <ReStyledModal {...{ toggleModal }}>
+    <Modal className="gap-8" {...{ toggleModal }}>
       <Header text={`Challenge ${isItem ? "Item" : "List"}`} />
       <DepositRequired value={depositRequired} />
       <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
@@ -153,7 +148,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
           {...{ insufficientBalance, toggleModal }}
         />
       </div>
-    </ReStyledModal>
+    </Modal>
   );
 };
 
diff --git a/web/src/components/ActionButton/Modal/DepositRequired.tsx b/web/src/components/ActionButton/Modal/DepositRequired.tsx
index 4dea651..7ac8ac4 100644
--- a/web/src/components/ActionButton/Modal/DepositRequired.tsx
+++ b/web/src/components/ActionButton/Modal/DepositRequired.tsx
@@ -1,40 +1,13 @@
 import React from "react";
 import { Card } from "@kleros/ui-components-library";
-import styled from "styled-components";
 import { formatETH } from "utils/format";
 
-const StyledCard = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  background-color: ${({ theme }) => theme.mediumBlue};
-  height: 87px;
-  width: 100%;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  padding: 15px;
-  gap: 5px;
-`;
-
-const StyledHeader = styled.p`
-  font-size: 14px;
-  margin: 0;
-  color: ${({ theme }) => theme.primaryBlue};
-`;
-
-const StyledQuantity = styled.p`
-  font-size: 24px;
-  margin: 0;
-  color: ${({ theme }) => theme.primaryBlue};
-  font-weight: 600;
-`;
-
 const FeeRequired: React.FC<{ value: bigint }> = ({ value }) => {
   return (
-    <StyledCard>
-      <StyledHeader>Deposit required</StyledHeader>
-      <StyledQuantity>{formatETH(value ?? 1, 5)} ETH</StyledQuantity>
-    </StyledCard>
+    <Card className="flex flex-col bg-klerosUIComponentsMediumBlue h-22 w-full border-none justify-center items-center p-4 gap-1.5">
+      <p className="text-sm text-klerosUIComponentsPrimaryBlue m-0">Deposit required</p>
+      <p className="text-2xl font-semibold text-klerosUIComponentsPrimaryBlue m-0">{formatETH(value ?? 1, 5)} ETH</p>
+    </Card>
   );
 };
 
diff --git a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
index cfad219..427e1e1 100644
--- a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
+++ b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
@@ -1,51 +1,13 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import styled from "styled-components";
-import { FileUploader, Textarea } from "@kleros/ui-components-library";
+import { FileUploader, TextArea } from "@kleros/ui-components-library";
 import LabeledInput from "components/LabeledInput";
-import { responsiveSize } from "styles/responsiveSize";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
+import clsx from "clsx";
 
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 38px;
-  margin: 6px 0px;
-`;
-
-const TitleField = styled(LabeledInput)`
-  width: 100%;
-`;
-
-const DescriptionContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const DescriptionField = styled(Textarea)`
-  width: 100%;
-  height: 180px;
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const StyledFileUploader = styled(FileUploader)`
-  width: 100%;
-  margin-bottom: ${responsiveSize(150, 72)};
-  path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-  small {
-    white-space: pre-line;
-    text-align: start;
-  }
-`;
+const fileUploaderMarginBottomCalc = "mb-[calc(150px+(72-150)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
 export type Evidence = {
   name: string;
@@ -92,29 +54,34 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
   };
 
   return (
-    <Container>
-      <TitleField
+    <div className="flex flex-col gap-9 w-full py-1.5">
+      <LabeledInput
         topLeftLabel={{ text: "Title" }}
         placeholder="eg. The item is not legit."
         value={title}
         onChange={(event) => setTitle(event.target.value)}
       />
-      <DescriptionContainer>
-        <StyledLabel>Description</StyledLabel>
-        <DescriptionField
+      <div className="flex flex-col gap-3">
+        <label htmlFor="evidence-description" className="text-klerosUIComponentsPrimaryText">
+          Description
+        </label>
+        <TextArea
+          id="evidence-description"
+          className="w-full h-[180px]"
           placeholder="Explain what motivates you to challenge it. Why do you think the item is not compliant with the Policy?"
           value={description}
-          onChange={(event) => setDescription(event.target.value)}
+          onChange={(value) => setDescription(value)}
         />
-      </DescriptionContainer>
-      <StyledFileUploader
+      </div>
+      <FileUploader
+        className={clsx("w-full [&_small]:whitespace-pre-line [&_small]:text-start", fileUploaderMarginBottomCalc)}
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
         msg={
           "Additionally, you can add an external file.\n" + (getFileUploaderMsg(Roles.Evidence, roleRestrictions) ?? "")
         }
       />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/ActionButton/Modal/Header.tsx b/web/src/components/ActionButton/Modal/Header.tsx
index 0acb427..7135d5a 100644
--- a/web/src/components/ActionButton/Modal/Header.tsx
+++ b/web/src/components/ActionButton/Modal/Header.tsx
@@ -1,16 +1,11 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledHeader = styled.h1`
-  margin: 0;
-`;
 
 interface IHeader {
   text: string;
 }
 
 const Header: React.FC<IHeader> = ({ text }) => {
-  return <StyledHeader>{text}</StyledHeader>;
+  return <h1 className="m-0">{text}</h1>;
 };
 
 export default Header;
diff --git a/web/src/components/ActionButton/Modal/Info.tsx b/web/src/components/ActionButton/Modal/Info.tsx
index 0f1d8c5..4b89d25 100644
--- a/web/src/components/ActionButton/Modal/Info.tsx
+++ b/web/src/components/ActionButton/Modal/Info.tsx
@@ -1,21 +1,15 @@
 import React from "react";
-import styled from "styled-components";
 import { AlertMessage } from "@kleros/ui-components-library";
 
-const Container = styled.div`
-  display: flex;
-  width: 100%;
-`;
-
 interface IInfo {
   alertMessage: string;
 }
 
 const Info: React.FC<IInfo> = ({ alertMessage }) => {
   return (
-    <Container>
+    <div className="flex w-full">
       <AlertMessage variant="info" title="Important" msg={alertMessage} />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 823a8e4..3d1a0f7 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import styled from "styled-components";
 import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
@@ -19,10 +18,6 @@ import {
 } from "hooks/useContract";
 import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
-const ReStyledModal = styled(Modal)`
-  gap: 32px;
-`;
-
 interface IRemoveModal extends IBaseModal {}
 
 const alertMessage = (isItem: boolean) =>
@@ -106,7 +101,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
   ]);
 
   return (
-    <ReStyledModal {...{ toggleModal }}>
+    <Modal className="gap-8" {...{ toggleModal }}>
       <Header text={`Remove ${isItem ? "Item" : "List"}`} />
       <DepositRequired value={depositRequired ?? 0} />
       <EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
@@ -130,7 +125,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
           {...{ toggleModal, insufficientBalance }}
         />
       </div>
-    </ReStyledModal>
+    </Modal>
   );
 };
 
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index 40c2301..70348ea 100644
--- a/web/src/components/ActionButton/Modal/ResubmitModal.tsx
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import styled from "styled-components";
 import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
@@ -19,10 +18,6 @@ import {
 import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 import { isUndefined } from "src/utils";
 
-const ReStyledModal = styled(Modal)`
-  gap: 32px;
-`;
-
 interface ISubmitModal extends IBaseModal {}
 
 const alertMessage = (isItem: boolean) =>
@@ -97,7 +92,7 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
   const { writeContractAsync: resubmitItem } = useWriteCurateV2AddItem();
 
   return (
-    <ReStyledModal {...{ toggleModal }}>
+    <Modal className="gap-8" {...{ toggleModal }}>
       <Header text={`Resubmit ${isItem ? "Item" : "List"}`} />
       <DepositRequired value={depositRequired ?? 0} />
       <Info alertMessage={alertMessage(isItem)} />
@@ -120,7 +115,7 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
           {...{ toggleModal, insufficientBalance }}
         />
       </div>
-    </ReStyledModal>
+    </Modal>
   );
 };
 
diff --git a/web/src/components/ActionButton/index.tsx b/web/src/components/ActionButton/index.tsx
index a016cfb..d514664 100644
--- a/web/src/components/ActionButton/index.tsx
+++ b/web/src/components/ActionButton/index.tsx
@@ -5,7 +5,6 @@ import { COURT_SITE } from "consts/index";
 import { Status } from "consts/status";
 import { useItemRequests } from "queries/useRequestsQuery";
 import KlerosIcon from "assets/svgs/icons/kleros.svg";
-import styled from "styled-components";
 import { useToggle } from "react-use";
 import Modal, { getModalButtonText } from "./Modal";
 import ExecuteButton from "./ExecuteButton";
@@ -13,12 +12,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import { isUndefined } from "src/utils";
 import { useReadCurateV2ChallengePeriodDuration } from "hooks/useContract";
 
-const StyledKlerosIcon = styled(KlerosIcon)`
-  path {
-    fill: ${({ theme }) => theme.whiteBackground};
-  }
-`;
-
 interface IActionButton {
   status: Status;
   registryAddress: Address;
@@ -53,7 +46,13 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
     if (status === Status.Disputed)
       return (
         <a href={`${COURT_SITE}/cases/${disputeId}/overview`} target="_blank" rel="noreferrer">
-          <Button disabled={disabled} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
+          <Button
+            isDisabled={disabled}
+            icon={
+              <KlerosIcon width={16} height={16} className="mr-2 [&_path]:fill-klerosUIComponentsWhiteBackground" />
+            }
+            text={`View Case #${disputeId ?? 0}`}
+          />
         </a>
       );
 
@@ -63,7 +62,7 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
     return (
       <Button
         variant="secondary"
-        disabled={disabled}
+        isDisabled={disabled}
         text={getModalButtonText(status ?? 0, isItem)}
         onClick={toggleModal}
       />
diff --git a/web/src/components/ChainIcon.tsx b/web/src/components/ChainIcon.tsx
index 6dd78a3..32e6edc 100644
--- a/web/src/components/ChainIcon.tsx
+++ b/web/src/components/ChainIcon.tsx
@@ -4,7 +4,6 @@ import EthIcon from "svgs/chains/ethereum.svg";
 import PolygonIcon from "svgs/chains/polygon.svg";
 import GnosisIcon from "svgs/chains/gnosis.svg";
 import ArbitrumIcon from "svgs/chains/arbitrum.svg";
-import styled from "styled-components";
 
 export const getChainIcon = (chainId: number) => {
   switch (chainId) {
@@ -44,17 +43,10 @@ export const getChainName = (chainId: number) => {
   }
 };
 
-const SVGContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
-    height: 24px;
-    width: 24px;
-  }
-`;
-
-const ChainIcon: React.FC<{ chainId: number }> = ({ chainId }) => <SVGContainer>{getChainIcon(chainId)}</SVGContainer>;
+const ChainIcon: React.FC<{ chainId: number }> = ({ chainId }) => (
+  <div className="flex items-center justify-center [&_svg]:fill-klerosUIComponentsSecondaryPurple [&_svg]:h-6 [&_svg]:w-6">
+    {getChainIcon(chainId)}
+  </div>
+);
 
 export default ChainIcon;
diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx
index 3f27591..bd7d1a2 100644
--- a/web/src/components/ConnectWallet/AccountDisplay.tsx
+++ b/web/src/components/ConnectWallet/AccountDisplay.tsx
@@ -1,7 +1,4 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { landscapeStyle } from "styles/landscapeStyle";
 
 import Identicon from "react-identicons";
 import { isAddress } from "viem";
@@ -10,110 +7,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
 
 import { getChain } from "consts/chains";
 import { shortenAddress } from "utils/shortenAddress";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: auto;
-  align-items: flex-start;
-  gap: 8px;
-  align-items: center;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  padding: 0px;
-  cursor: pointer;
-
-  &:hover {
-    label {
-      color: ${({ theme }) => theme.white} !important;
-      transition: color 0.2s;
-    }
-  }
-
-  ${landscapeStyle(
-    () => css`
-      background-color: ${({ theme }) => theme.whiteLowOpacitySubtle};
-      &:hover {
-        transition: background-color 0.1s;
-        background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
-      }
-      flex-direction: row;
-      align-content: center;
-      border-radius: 300px;
-      gap: 0px;
-      padding: 0 12px;
-    `
-  )}
-`;
-
-const AccountContainer = styled.div`
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  gap: 8px;
-
-  > label {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      gap: 12px;
-      > label {
-        color: ${({ theme }) => theme.white}CC !important;
-        font-weight: 400;
-        font-size: 14px;
-      }
-    `
-  )}
-`;
-
-const ChainConnectionContainer = styled.div`
-  display: flex;
-  width: fit-content;
-  min-height: 32px;
-  align-items: center;
-  padding-left: 0px;
-  > label {
-    color: ${({ theme }) => theme.success};
-    font-size: 16px;
-
-    font-weight: 500;
-  }
-
-  :before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    margin: 0px 13px 0px 3px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.success};
-  }
-
-  ${landscapeStyle(
-    () => css`
-      display: none;
-    `
-  )}
-`;
-
-const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>`
-  align-items: center;
-  svg {
-    width: ${({ size }) => size + "px"};
-    height: ${({ size }) => size + "px"};
-  }
-`;
-
-const StyledAvatar = styled.img<{ size: `${number}` }>`
-  align-items: center;
-  object-fit: cover;
-  border-radius: 50%;
-  width: ${({ size }) => size + "px"};
-  height: ${({ size }) => size + "px"};
-`;
+import clsx from "clsx";
 
 interface IIdenticonOrAvatar {
   size?: `${number}`;
@@ -134,9 +28,9 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
   });
 
   return avatar ? (
-    <StyledAvatar src={avatar} alt="avatar" size={size} />
+    <img className="object-cover rounded-[50%]" src={avatar} alt="avatar" width={size} height={size} />
   ) : (
-    <StyledIdenticon size={size} string={address} />
+    <Identicon size={size} string={address} />
   );
 };
 
@@ -164,15 +58,34 @@ export const ChainDisplay: React.FC = () => {
 
 const AccountDisplay: React.FC = () => {
   return (
-    <Container>
-      <AccountContainer>
+    <div
+      className={clsx(
+        "flex flex-col justify-between items-center gap-2 h-auto p-0",
+        "lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3",
+        "cursor-pointer bg-klerosUIComponentsWhiteBackground lg:bg-white-low-opacity-subtle",
+        "lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s]",
+        "hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200"
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center w-fit min-h-8 gap-2 lg:gap-3",
+          "[&>label]:text-base [&>label]:font-semibold lg:[&>label]:text-sm lg:[&>label]:font-normal"
+        )}
+      >
         <IdenticonOrAvatar size="32" />
         <AddressOrName />
-      </AccountContainer>
-      <ChainConnectionContainer>
+      </div>
+      <div
+        className={clsx(
+          "flex w-fit min-h-8 items-center pl-0 lg:hidden",
+          "[&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium",
+          "before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]"
+        )}
+      >
         <ChainDisplay />
-      </ChainConnectionContainer>
-    </Container>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx
index 671659d..ed517af 100644
--- a/web/src/components/ConnectWallet/index.tsx
+++ b/web/src/components/ConnectWallet/index.tsx
@@ -22,7 +22,7 @@ export const SwitchChainButton: React.FC = () => {
   return (
     <Button
       isLoading={isLoading}
-      disabled={isLoading}
+      isDisabled={isLoading}
       text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
       onClick={handleSwitch}
     />
@@ -35,7 +35,7 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
   return (
     <Button
       {...{ className }}
-      disabled={isOpen}
+      isDisabled={isOpen}
       small
       text={"Connect"}
       onClick={async () => open({ view: "Connect" })}
diff --git a/web/src/components/EnsureAuth.tsx b/web/src/components/EnsureAuth.tsx
index 6732408..1f91623 100644
--- a/web/src/components/EnsureAuth.tsx
+++ b/web/src/components/EnsureAuth.tsx
@@ -30,7 +30,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
     <Button
       text="Sign In"
       onClick={handleClick}
-      disabled={isSigningIn || !address}
+      isDisabled={isSigningIn || !address}
       isLoading={isSigningIn}
       {...{ className }}
     />
diff --git a/web/src/components/ExternalLink.tsx b/web/src/components/ExternalLink.tsx
deleted file mode 100644
index 8470386..0000000
--- a/web/src/components/ExternalLink.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-import { Link } from "react-router-dom";
-
-export const ExternalLink = styled(Link)`
-  :hover {
-    text-decoration: underline;
-  }
-`;
diff --git a/web/src/components/HeroImage.tsx b/web/src/components/HeroImage.tsx
index 8c43968..0b1c875 100644
--- a/web/src/components/HeroImage.tsx
+++ b/web/src/components/HeroImage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useTheme } from "styled-components";
+import { useTheme } from "~src/hooks/useToggleThemeContext";
 import HeroLightMobile from "svgs/hero/hero-lightmode-mobile.svg";
 import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
 import HeroLightDesktop from "svgs/hero/hero-lightmode-desktop.svg";
@@ -7,8 +7,8 @@ import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
 import useIsDesktop from "hooks/useIsDesktop";
 
 const HeroImage = () => {
-  const theme = useTheme();
-  const themeIsLight = theme.name === "light";
+  const [theme] = useTheme();
+  const themeIsLight = theme === "light";
   const isDesktop = useIsDesktop();
   return <div>{isDesktop ? <HeroDesktop {...{ themeIsLight }} /> : <HeroMobile {...{ themeIsLight }} />}</div>;
 };
diff --git a/web/src/components/HistoryDisplay/Header.tsx b/web/src/components/HistoryDisplay/Header.tsx
index 1ca4717..a3f282d 100644
--- a/web/src/components/HistoryDisplay/Header.tsx
+++ b/web/src/components/HistoryDisplay/Header.tsx
@@ -1,35 +1,14 @@
 import React from "react";
-import styled from "styled-components";
 import HistoryIcon from "assets/svgs/icons/history.svg";
 
-const HeaderContainer = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-const StyledP = styled.p`
-  margin: 0;
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const SVGContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    fill: ${({ theme }) => theme.primaryText};
-    height: 16px;
-    width: 17px;
-  }
-`;
 const Header: React.FC = () => {
   return (
-    <HeaderContainer>
-      <SVGContainer>
-        <HistoryIcon />
-      </SVGContainer>
-      <StyledP>History</StyledP>
-    </HeaderContainer>
+    <div className="flex gap-2">
+      <div className="flex items-center justify-center">
+        <HistoryIcon width={17} height={16} className="fill-klerosUIComponentsPrimaryText" />
+      </div>
+      <p className="m-0">History</p>
+    </div>
   );
 };
 
diff --git a/web/src/components/HistoryDisplay/Party/Header.tsx b/web/src/components/HistoryDisplay/Party/Header.tsx
index 0acb427..7135d5a 100644
--- a/web/src/components/HistoryDisplay/Party/Header.tsx
+++ b/web/src/components/HistoryDisplay/Party/Header.tsx
@@ -1,16 +1,11 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledHeader = styled.h1`
-  margin: 0;
-`;
 
 interface IHeader {
   text: string;
 }
 
 const Header: React.FC<IHeader> = ({ text }) => {
-  return <StyledHeader>{text}</StyledHeader>;
+  return <h1 className="m-0">{text}</h1>;
 };
 
 export default Header;
diff --git a/web/src/components/HistoryDisplay/Party/JustificationDetails.tsx b/web/src/components/HistoryDisplay/Party/JustificationDetails.tsx
index dda1df0..dd84441 100644
--- a/web/src/components/HistoryDisplay/Party/JustificationDetails.tsx
+++ b/web/src/components/HistoryDisplay/Party/JustificationDetails.tsx
@@ -1,55 +1,26 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import AttachmentIcon from "svgs/icons/attachment.svg";
-import { customScrollbar } from "styles/customScrollbar";
 import { Evidence } from "src/graphql/graphql";
 import { Link } from "react-router-dom";
 
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-
-const JustificationTitle = styled.h3`
-  margin: 0px;
-  font-weight: 600;
-`;
-
-const DescriptionContainer = styled.div`
-  max-height: 400px;
-  width: 100%;
-  overflow-y: scroll;
-  ${customScrollbar}
-`;
-
-const StyledA = styled(Link)`
-  display: flex;
-  gap: 6px;
-  > svg {
-    width: 16px;
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-`;
-
 export type Justification = Pick<Evidence, "name" | "description" | "evidence" | "fileURI">;
 
 const JustificationDetails: React.FC<{ justification: Justification }> = ({ justification }) => {
   return (
-    <Container>
-      <JustificationTitle>{justification.name ?? "Unable to determine title"}</JustificationTitle>
-      <DescriptionContainer>
+    <div className="flex flex-col w-full">
+      <h3 className="m-0 font-semibold">{justification.name ?? "Unable to determine title"}</h3>
+      <div className="max-h-[400px] w-full overflow-y-scroll custom-scrollbar">
         <ReactMarkdown>{justification.description ?? "Unable to determine description"}</ReactMarkdown>
-      </DescriptionContainer>
+      </div>
       {justification?.fileURI && (
-        <StyledA to={`/attachment/?url=${getIpfsUrl(justification.fileURI)}`}>
-          <AttachmentIcon />
+        <Link className="flex gap-1.5" to={`/attachment/?url=${getIpfsUrl(justification.fileURI)}`}>
+          <AttachmentIcon width={16} className="fill-klerosUIComponentsPrimaryBlue" />
           View attached file
-        </StyledA>
+        </Link>
       )}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/HistoryDisplay/Party/JustificationModal.tsx b/web/src/components/HistoryDisplay/Party/JustificationModal.tsx
index d8f1de6..758ef37 100644
--- a/web/src/components/HistoryDisplay/Party/JustificationModal.tsx
+++ b/web/src/components/HistoryDisplay/Party/JustificationModal.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 
 import Modal from "components/Modal";
@@ -14,30 +13,6 @@ import { useEvidences } from "queries/useEvidences";
 import Header from "./Header";
 import JustificationDetails, { Justification } from "./JustificationDetails";
 
-const StyledModal = styled(Modal)`
-  gap: 30px;
-`;
-
-const ButtonsContainer = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-top: 38px;
-  row-gap: 8px;
-`;
-
-const StyledLabel = styled.label`
-  width: 100%;
-`;
-
-const JustificationText = styled.h3`
-  width: 100%;
-  margin: 0px;
-  margin-bottom: 4px;
-  text-align: center;
-`;
-
 interface IJustificationModal {
   request: RequestDetailsFragment;
   isRemoval: boolean;
@@ -59,17 +34,17 @@ const JustificationModal: React.FC<IJustificationModal> = ({ request, toggleModa
   }, [evidenceData, isRemoval, request]);
 
   return (
-    <StyledModal {...{ toggleModal }}>
+    <Modal className="gap-8" {...{ toggleModal }}>
       <Header text={isRemoval ? "Removal Requested" : "Request Challenged"} />
-      <JustificationText>Justification</JustificationText>
+      <h3 className="w-full m-0 mb-1 text-center">Justification</h3>
       {isLoadingEvidences ? (
         <SkeletonJustificationCard />
       ) : justification ? (
         <JustificationDetails {...{ justification }} />
       ) : (
-        <StyledLabel>No Justification provided</StyledLabel>
+        <label className="w-full">No Justification provided</label>
       )}
-      <ButtonsContainer>
+      <div className="flex flex-wrap justify-between w-full mt-9 gap-y-2">
         <Button variant="secondary" text="Return" onClick={toggleModal} />
         {!request.resolved && (
           <ActionButton
@@ -79,8 +54,8 @@ const JustificationModal: React.FC<IJustificationModal> = ({ request, toggleModa
             registryAddress={request.item.registryAddress}
           />
         )}
-      </ButtonsContainer>
-    </StyledModal>
+      </div>
+    </Modal>
   );
 };
 
diff --git a/web/src/components/HistoryDisplay/Party/index.tsx b/web/src/components/HistoryDisplay/Party/index.tsx
index 7ac418c..6100346 100644
--- a/web/src/components/HistoryDisplay/Party/index.tsx
+++ b/web/src/components/HistoryDisplay/Party/index.tsx
@@ -1,33 +1,10 @@
 import React from "react";
-import styled from "styled-components";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import { RequestDetailsFragment } from "src/graphql/graphql";
 import DocIcon from "svgs/icons/doc.svg";
 import { useToggle } from "react-use";
 import JustificationModal from "./JustificationModal";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-`;
-
-const StyledLabel = styled.label`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: ${({ theme }) => theme.primaryBlue};
-  cursor: pointer;
-`;
-
-const StyledDoc = styled(DocIcon)`
-  width: 16px;
-  height: 16px;
-  fill: ${({ theme }) => theme.primaryBlue};
-`;
-
 interface IParty {
   request: RequestDetailsFragment;
   isRemoval?: boolean;
@@ -38,15 +15,18 @@ const Party: React.FC<IParty> = ({ request, isRemoval = false }) => {
   const aliasAddress = isRemoval ? request.requester.id : request?.challenger?.id;
 
   return (
-    <Container>
+    <div className="flex flex-row flex-wrap items-center gap-2">
       <label>by</label>
-      <AliasDisplay address={aliasAddress ?? ""} />
+      <AliasDisplay className="leading-18px" address={aliasAddress ?? ""} />
       <label>-</label>
-      <StyledLabel onClick={toggleModal}>
-        <StyledDoc /> Justification
-      </StyledLabel>
+      <label
+        className="flex items-center gap-1 cursor-pointer text-klerosUIComponentsPrimaryBlue"
+        onClick={toggleModal}
+      >
+        <DocIcon width={16} height={16} className="fill-klerosUIComponentsPrimaryBlue" /> Justification
+      </label>
       {isOpen && <JustificationModal {...{ request, toggleModal, isRemoval }} />}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/HistoryDisplay/index.tsx b/web/src/components/HistoryDisplay/index.tsx
index 9efd6ed..b98645c 100644
--- a/web/src/components/HistoryDisplay/index.tsx
+++ b/web/src/components/HistoryDisplay/index.tsx
@@ -1,6 +1,5 @@
-import { Card, CustomTimeline, _TimelineItem1 } from "@kleros/ui-components-library";
+import { Card, CustomTimeline } from "@kleros/ui-components-library";
 import React, { useMemo } from "react";
-import styled, { css, Theme, useTheme } from "styled-components";
 import Header from "./Header";
 import { useItemRequests } from "queries/useRequestsQuery";
 import { RequestDetailsFragment, Ruling, Status } from "src/graphql/graphql";
@@ -9,81 +8,57 @@ import CheckIcon from "assets/svgs/icons/check-circle-outline.svg";
 import ClosedIcon from "assets/svgs/icons/close-circle.svg";
 import { HistorySkeletonCard } from "../StyledSkeleton";
 import Party from "./Party";
-import { landscapeStyle } from "styles/landscapeStyle";
-
-const Container = styled(Card)`
-  display: flex;
-  width: 100%;
-  height: auto;
-  flex-direction: column;
-  align-items: start;
-  padding: 22px 32px;
-  gap: 54px;
-`;
-
-const StyledTimeline = styled(CustomTimeline)`
-  width: 100%;
-  margin-bottom: 30px;
-  .party-wrapper {
-    max-height: none;
-    ${landscapeStyle(
-      () => css`
-        max-height: 32px;
-      `
-    )}
-  }
-`;
-
-const StyledLabel = styled.label`
-  align-self: center;
-  padding-bottom: 32px;
-`;
+import clsx from "clsx";
+import { useTheme } from "~src/hooks/useToggleThemeContext";
 
 interface IHistory {
   itemId: string;
   isItem?: boolean;
 }
 
+type TimelineItem = React.ComponentProps<typeof CustomTimeline>["items"][number];
+
 const History: React.FC<IHistory> = ({ itemId, isItem }) => {
-  const theme = useTheme();
   const { data, isLoading } = useItemRequests(itemId);
+  const [theme] = useTheme();
+  const isLightTheme = theme === "light";
 
   const items = useMemo(
     () =>
-      data?.requests.reduce<_TimelineItem1[]>((acc, request) => {
-        const history = constructItemsFromRequest(request, theme, isItem);
+      data?.requests.reduce<TimelineItem[]>((acc, request) => {
+        const history = constructItemsFromRequest(request, isLightTheme, isItem);
         acc.push(...history);
         return acc;
       }, []),
-    [data]
+    [data, isLightTheme, isItem]
   );
 
   const Component = useMemo(() => {
     if (!items || isLoading) return <HistorySkeletonCard />;
-    else if (items.length === 0) return <StyledLabel>No requests yet.</StyledLabel>;
+    else if (items.length === 0) return <label className="self-center pb-8">No requests yet.</label>;
 
-    return <StyledTimeline {...{ items }} />;
+    return <CustomTimeline className={clsx("w-full mb-8", "[&_h2]:m-0 [&_div]:max-h-none")} {...{ items }} />;
   }, [items, isLoading]);
 
   return (
-    <Container>
+    <Card className="flex flex-col w-full h-auto items-start gap-14 py-6 px-8">
       <Header />
       {Component}
-    </Container>
+    </Card>
   );
 };
 
 const constructItemsFromRequest = (
   request: RequestDetailsFragment,
-  theme: Theme,
+  isLightTheme: boolean,
   isItem?: boolean
-): _TimelineItem1[] => {
-  const historyItems: _TimelineItem1[] = [];
+): TimelineItem[] => {
+  const historyItems: TimelineItem[] = [];
 
   if (request.requestType === Status.RegistrationRequested) {
     historyItems.push({
       title: `${isItem ? "Item" : "List"} Submitted`,
-      variant: theme.primaryBlue,
+      variant: isLightTheme ? "#009aff" : "#6cc5ff",
       subtitle: formatDate(request.submissionTime),
       rightSided: true,
       party: "",
@@ -92,7 +67,7 @@ const constructItemsFromRequest = (
     if (request.disputed && request.challenger) {
       historyItems.push({
         title: `${isItem ? "Submission" : "Registration"} Challenged - Case ${request.disputeID}`,
-        variant: theme.secondaryPurple,
+        variant: isLightTheme ? "#9013fe" : "#b45fff",
         party: <Party {...{ request }} />,
         subtitle: formatDate(request.challengeTime),
         rightSided: true,
@@ -104,7 +79,7 @@ const constructItemsFromRequest = (
 
       historyItems.push({
         title: `${isItem ? "Item" : "List"} ${included ? "Included" : "Rejected"}`,
-        variant: included ? theme.primaryBlue : theme.error,
+        variant: included ? (isLightTheme ? "#009aff" : "#6cc5ff") : isLightTheme ? "#f60c36" : "#ff5a78",
         subtitle: formatDate(request.resolutionTime),
         rightSided: true,
         party: "",
@@ -114,7 +89,7 @@ const constructItemsFromRequest = (
   } else if (request.requestType === Status.ClearingRequested) {
     historyItems.push({
       title: "Removal Requested",
-      variant: theme.primaryBlue,
+      variant: isLightTheme ? "#009aff" : "#6cc5ff",
       subtitle: formatDate(request.submissionTime),
       rightSided: true,
       party: <Party {...{ request }} isRemoval />,
@@ -123,7 +98,7 @@ const constructItemsFromRequest = (
     if (request.disputed && request.challenger) {
       historyItems.push({
         title: `Removal Challenged - Case ${request.disputeID}`,
-        variant: theme.secondaryPurple,
+        variant: isLightTheme ? "#9013fe" : "#b45fff",
         party: <Party {...{ request }} />,
         subtitle: formatDate(request.submissionTime),
         rightSided: true,
@@ -133,14 +108,15 @@ const constructItemsFromRequest = (
       const removed = request.disputed ? request.finalRuling === Ruling.Accept : request.finalRuling === null;
       historyItems.push({
         title: `${isItem ? "Item" : "List"} ${removed ? "Removed" : "Included"}`,
-        variant: removed ? theme.error : theme.success,
+        variant: removed ? (isLightTheme ? "#f60c36" : "#ff5a78") : isLightTheme ? "#00c42b" : "#65dc7f",
         subtitle: formatDate(request.resolutionTime),
         rightSided: true,
         party: "",
-        Icon: removed ? CheckIcon : ClosedIcon,
+        Icon: removed ? ClosedIcon : CheckIcon,
       });
     }
   }
+
   return historyItems;
 };
 
diff --git a/web/src/components/InfoCard.tsx b/web/src/components/InfoCard.tsx
index 4d23d86..fa21d8e 100644
--- a/web/src/components/InfoCard.tsx
+++ b/web/src/components/InfoCard.tsx
@@ -1,17 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import InfoCircle from "svgs/icons/info-circle.svg";
-
-const InfoContainer = styled.div`
-  display: grid;
-  grid-template-columns: 16px auto;
-  gap: ${responsiveSize(6, 8, 300)};
-  align-items: center;
-  justify-items: start;
-  text-align: start;
-  color: ${({ theme }) => theme.secondaryText};
-`;
+import { cn } from "~src/utils";
 
 interface IInfoCard {
   msg: string;
@@ -20,10 +10,16 @@ interface IInfoCard {
 
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
-    <InfoContainer {...{ className }}>
+    <div
+      className={cn(
+        "grid grid-cols-[16px_auto] items-center justify-start text-start text-klerosUIComponentsSecondaryText",
+        className
+      )}
+      style={{ gap: responsiveSize(6, 8, 300) }}
+    >
       <InfoCircle />
       {msg}
-    </InfoContainer>
+    </div>
   );
 };
 
diff --git a/web/src/components/InformationCards/ItemInformationCard/FieldsDisplay.tsx b/web/src/components/InformationCards/ItemInformationCard/FieldsDisplay.tsx
index ce4cab6..7336d2d 100644
--- a/web/src/components/InformationCards/ItemInformationCard/FieldsDisplay.tsx
+++ b/web/src/components/InformationCards/ItemInformationCard/FieldsDisplay.tsx
@@ -1,17 +1,9 @@
 import React, { useCallback, useMemo } from "react";
-import styled from "styled-components";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import ItemField from "components/ItemCard/ItemField";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 
-const FieldsContainer = styled.div`
-  display: flex;
-  width: 100%;
-  gap: 16px;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-`;
+const fieldsContainerStyle = "flex w-full gap-4 flex-row items-center flex-wrap";
 
 interface IFieldsDisplay {
   props: ItemDetailsFragment["props"];
@@ -46,17 +38,17 @@ const FieldsDisplay: React.FC<IFieldsDisplay> = ({ props, registryAddress }) =>
   return (
     <>
       {imageFields.length || textFields.length ? (
-        <FieldsContainer>
+        <div className={fieldsContainerStyle}>
           {imageFields.map((field) => (
             <ItemField key={field.label} {...field} detailed isUnrecognized={isUnrecognized(field)} />
           ))}
           {textFields.map((field) => (
             <ItemField key={field.label} {...field} detailed isUnrecognized={isUnrecognized(field)} />
           ))}
-        </FieldsContainer>
+        </div>
       ) : null}
       {displayField ? (
-        <FieldsContainer>
+        <div className={fieldsContainerStyle}>
           {addressFields.map((field) => (
             <ItemField key={field.label} {...field} detailed isUnrecognized={isUnrecognized(field)} />
           ))}
@@ -66,13 +58,13 @@ const FieldsDisplay: React.FC<IFieldsDisplay> = ({ props, registryAddress }) =>
           {fileFields.map((field) => (
             <ItemField key={field.label} {...field} detailed isUnrecognized={isUnrecognized(field)} />
           ))}
-        </FieldsContainer>
+        </div>
       ) : null}
-      <FieldsContainer>
+      <div className={fieldsContainerStyle}>
         {restOfFields.map((field) => (
           <ItemField key={field.label} {...field} detailed isUnrecognized={isUnrecognized(field)} />
         ))}
-      </FieldsContainer>
+      </div>
     </>
   );
 };
diff --git a/web/src/components/InformationCards/ItemInformationCard/index.tsx b/web/src/components/InformationCards/ItemInformationCard/index.tsx
index ff3dfdd..a90a334 100644
--- a/web/src/components/InformationCards/ItemInformationCard/index.tsx
+++ b/web/src/components/InformationCards/ItemInformationCard/index.tsx
@@ -1,101 +1,17 @@
 import React from "react";
 import { Card, Copiable } from "@kleros/ui-components-library";
-import styled, { css } from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import ActionButton from "components/ActionButton";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
 import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Policies } from "../RegistryInformationCard/Policies";
 import FieldsDisplay from "./FieldsDisplay";
 import StatusDisplay from "../StatusDisplay";
 import { ItemDetailsQuery } from "src/graphql/graphql";
 import { Address } from "viem";
 import { validateItem } from "src/types/CurateItem";
-import { isUndefined } from "src/utils";
-
-const StyledCard = styled(Card)`
-  display: flex;
-  width: 100%;
-  height: auto;
-  flex-direction: column;
-  margin-bottom: 64px;
-`;
-
-const TopInfo = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 12px 32px;
-  ${landscapeStyle(
-    () => css`
-      flex-wrap: nowrap;
-    `
-  )};
-`;
-
-const TopLeftInfo = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding-top: 16px;
-`;
-
-const TopRightInfo = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: start;
-  gap: 48px;
-  padding-top: 20px;
-  flex-shrink: 1;
-  ${landscapeStyle(
-    () => css`
-      flex-shrink: 0;
-    `
-  )}
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryBlue};
-`;
-
-const Divider = styled.hr`
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: ${responsiveSize(20, 28)} 32px;
-`;
-
-const BottomInfo = styled.div`
-  display: flex;
-  padding: 0 32px;
-  padding-bottom: 12px;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: space-between;
-`;
-
-const AliasContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-`;
-
-const WarningContainer = styled.p`
-  width: 100%;
-  padding: 8px 32px;
-  margin: 0;
-  background-color: ${({ theme }) => theme.warningLight};
-  font-size: 14px;
-  font-weight: 500;
-  color: ${({ theme }) => theme.warning};
-  text-align: center;
-`;
+import { cn, isUndefined } from "src/utils";
 
 type ItemDetails = NonNullable<ItemDetailsQuery["item"]>;
 interface IItemInformationCard extends ItemDetails {
@@ -105,6 +21,8 @@ interface IItemInformationCard extends ItemDetails {
   isPreview?: boolean;
 }
 
+const aliasContainerStyle = "flex flex-wrap gap-2 items-center";
+
 const ItemInformationCard: React.FC<IItemInformationCard> = ({
   className,
   registerer,
@@ -121,32 +39,37 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
   const showWarning = isPreview || isUndefined(data) ? false : !validateItem(data).success;
 
   return (
-    <StyledCard {...{ className }}>
+    <Card className={cn("flex flex-col w-full h-auto mb-16", className)}>
       {showWarning ? (
-        <WarningContainer>This item does not pass the validation checks. Please review carefully.</WarningContainer>
+        <p className="w-full py-1 px-8 bg-klerosUIComponentsWarningLight text-sm font-medium text-center text-klerosUIComponentsWarning">
+          This item does not pass the validation checks. Please review carefully.
+        </p>
       ) : null}
-      <TopInfo>
-        <TopLeftInfo>
+      <div className="flex justify-between flex-wrap gap-3 py-3 px-8 lg:flex-nowrap">
+        <div className="flex grow flex-col flex-wrap gap-4 pt-4">
           {props ? <FieldsDisplay {...{ props, registryAddress }} /> : <Skeleton height={80} width={160} />}
-        </TopLeftInfo>
-        <TopRightInfo>
+        </div>
+        <div className="flex flex-row items-start gap-12 pt-5 shrink lg:shrink-0">
           <Copiable copiableContent={itemID ?? ""} info="Copy Item Id" iconPlacement="left">
-            <StyledLabel>Item Id</StyledLabel>
+            <label className="text-klerosUIComponentsPrimaryBlue">Item Id</label>
           </Copiable>
           <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
-        </TopRightInfo>
-      </TopInfo>
-      <Divider />
-      <BottomInfo>
+        </div>
+      </div>
+      <hr
+        className="border-none h-px bg-klerosUIComponentsStroke mx-8"
+        style={{ marginBlock: responsiveSize(20, 28) }}
+      />
+      <div className="flex px-8 pb-3 flex-wrap gap-3 justify-between">
         {registerer?.id ? (
-          <AliasContainer>
+          <div className={aliasContainerStyle}>
             <small>Submitted by:</small>
             <Copiable copiableContent={registerer.id}>
-              <AliasContainer>
+              <div className={aliasContainerStyle}>
                 <AliasDisplay address={registerer.id} />
-              </AliasContainer>
+              </div>
             </Copiable>
-          </AliasContainer>
+          </div>
         ) : (
           <Skeleton height={24} />
         )}
@@ -158,9 +81,9 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
             isItem: true,
           }}
         />
-      </BottomInfo>
+      </div>
       <Policies policyURI={policyURI} isItem />
-    </StyledCard>
+    </Card>
   );
 };
 export default ItemInformationCard;
diff --git a/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx b/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
index 7530308..9110535 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { responsiveSize } from "styles/responsiveSize";
 
 import Skeleton from "react-loading-skeleton";
@@ -11,60 +8,10 @@ import PolicyIcon from "svgs/icons/policy.svg";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
-import { InternalLink } from "components/InternalLink";
+import { Link } from "react-router-dom";
 
-const ShadeArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  padding: 24px ${responsiveSize(24, 32)};
-  margin-top: 16px;
-  background-color: ${({ theme }) => theme.mediumBlue};
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      justify-content: space-between;
-    `
-  )};
-`;
-
-const StyledP = styled.p`
-  font-size: 14px;
-  margin-top: 0;
-  margin-bottom: 16px;
-  color: ${({ theme }) => theme.primaryBlue};
-  ${landscapeStyle(
-    () => css`
-      margin-bottom: 0;
-    `
-  )};
-`;
-
-const StyledPolicyIcon = styled(PolicyIcon)`
-  width: 16px;
-  fill: ${({ theme }) => theme.primaryBlue};
-`;
-
-const LinkContainer = styled.div`
-  display: flex;
-  gap: ${responsiveSize(16, 24)};
-  flex-wrap: wrap;
-`;
-
-const StyledInternalLink = styled(InternalLink)`
-  ${hoverShortTransitionTiming}
-  display: flex;
-  gap: 4px;
-  align-items: center;
-
-  &:hover {
-    svg {
-      fill: ${({ theme }) => theme.secondaryBlue};
-    }
-  }
-`;
+const internalLinkStyle =
+  "flex gap-1 items-center transition duration-100 hover:[&_svg]:fill-klerosUIComponentsSecondaryBlue";
 
 interface IPolicies {
   policyURI: string;
@@ -75,30 +22,38 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
   const { data: parentRegistryDetails } = useRegistryDetailsQuery(MAIN_CURATE_ADDRESS);
 
   return (
-    <ShadeArea>
-      <StyledP>Make sure you read and understand the Policies</StyledP>
-      <LinkContainer>
+    <div
+      className="flex flex-col justify-center w-full py-6 mt-4 bg-klerosUIComponentsMediumBlue leading-6 lg:flex-row lg:justify-between"
+      style={{ paddingInline: responsiveSize(24, 32) }}
+    >
+      <p className="text-sm mt-0 mb-4 text-klerosUIComponentsPrimaryBlue lg:mb-0">
+        Make sure you read and understand the Policies
+      </p>
+      <div className="flex flex-wrap" style={{ gap: responsiveSize(16, 24) }}>
         {!isItem ? (
           <>
             {parentRegistryDetails ? (
-              <StyledInternalLink to={`/attachment/?url=${getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}`}>
-                <StyledPolicyIcon />
+              <Link
+                className={internalLinkStyle}
+                to={`/attachment/?url=${getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}`}
+              >
+                <PolicyIcon width={16} className="fill-klerosUIComponentsPrimaryBlue" />
                 Curation Policy
-              </StyledInternalLink>
+              </Link>
             ) : (
               <Skeleton width={116} />
             )}
           </>
         ) : null}
         {policyURI ? (
-          <StyledInternalLink to={`/attachment/?url=${getIpfsUrl(policyURI)}`}>
-            <StyledPolicyIcon />
+          <Link className={internalLinkStyle} to={`/attachment/?url=${getIpfsUrl(policyURI)}`}>
+            <PolicyIcon width={16} className="fill-klerosUIComponentsPrimaryBlue" />
             List Policy
-          </StyledInternalLink>
+          </Link>
         ) : (
           <Skeleton width={80} />
         )}
-      </LinkContainer>
-    </ShadeArea>
+      </div>
+    </div>
   );
 };
diff --git a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
index 8852460..a1865b5 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
@@ -2,100 +2,16 @@ import React, { useEffect, useState } from "react";
 import { Copiable } from "@kleros/ui-components-library";
 import Skeleton from "react-loading-skeleton";
 import { RegistryDetails } from "context/RegistryDetailsContext";
-import styled, { css } from "styled-components";
 import StatusDisplay from "../StatusDisplay";
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "src/consts/chains";
-import { landscapeStyle } from "src/styles/landscapeStyle";
 import { responsiveSize } from "src/styles/responsiveSize";
-import { isUndefined } from "src/utils";
+import { cn, isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 import { Link } from "react-router-dom";
 
-const TopInfoContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: ${responsiveSize(20, 24)} ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
-  ${landscapeStyle(
-    () => css`
-      flex-wrap: nowrap;
-    `
-  )}
-`;
-
-const LogoAndTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-`;
-
-const TopLeftInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${responsiveSize(8, 16)} 0;
-`;
-
-const TopRightInfo = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 32px;
-  flex-wrap: wrap;
-  flex-shrink: 1;
-  align-items: start;
-  padding-top: 20px;
-  ${landscapeStyle(
-    () => css`
-      flex-shrink: 0;
-      gap: 0 ${responsiveSize(24, 32, 900)};
-    `
-  )}
-`;
-
-const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  object-fit: contain;
-  margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
-`;
-
-const StyledTitle = styled.h1`
-  margin: 0;
-`;
-
-const StyledP = styled.p`
-  color: ${({ theme }) => theme.secondaryText};
-  margin: 0;
-`;
-
-const StyledA = styled.a`
-  color: ${({ theme }) => theme.primaryBlue};
-  text-decoration: none;
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
-const SkeletonLogo = styled(Skeleton)`
-  width: 125px;
-  height: 125px;
-  border-radius: 62.5px;
-  margin-bottom: 8px;
-`;
-
-const SkeletonTitle = styled(Skeleton)`
-  width: 180px;
-  height: 30px;
-`;
-
-const SkeletonDescription = styled(Skeleton)`
-  width: 90%;
-  height: 21px;
-`;
-
+const landscapeColumnGapCalc = "lg:gap-x-[calc(24px+(32-24)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 interface ITopInfo
   extends Pick<
     RegistryDetails,
@@ -117,42 +33,65 @@ const TopInfo: React.FC<ITopInfo> = ({
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
   useEffect(() => setImageSrc(getIpfsUrl(logoURI ?? "")), [logoURI]);
   return (
-    <TopInfoContainer>
-      <TopLeftInfo>
-        <LogoAndTitle>
+    <div
+      className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3"
+      style={{ paddingTop: responsiveSize(20, 24), paddingInline: responsiveSize(24, 32) }}
+    >
+      <div className="flex flex-col" style={{ rowGap: responsiveSize(8, 16) }}>
+        <div className="flex flex-wrap items-center gap-4">
           {isUndefined(logoURI) ? (
-            <SkeletonLogo />
+            <Skeleton width={125} height={125} borderRadius="62.5px" className="mb-2" />
           ) : (
             <Link to={`/attachment/?url=${imageSrc}`}>
-              <StyledLogo
+              <img
+                width={125}
+                height={125}
+                className="object-contain mb-2"
                 src={imageSrc}
                 onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
                 alt="List Img"
-                isListView={false}
               />
             </Link>
           )}
-          {isUndefined(title) ? <SkeletonTitle /> : <StyledTitle>{title}</StyledTitle>}
-        </LogoAndTitle>
-        {isUndefined(description) ? <SkeletonDescription /> : <StyledP>{description}</StyledP>}
-      </TopLeftInfo>
-      <TopRightInfo>
+          {isUndefined(title) ? <Skeleton width={180} height={30} /> : <h1 className="m-0">{title}</h1>}
+        </div>
+        {isUndefined(description) ? (
+          <Skeleton width="90%" height={21} />
+        ) : (
+          <p className="m-0 text-klerosUIComponentsSecondaryText">{description}</p>
+        )}
+      </div>
+      <div
+        className={cn(
+          "flex flex-row flex-wrap shrink gap-8 items-start pt-5",
+          "lg:shrink-0 lg:gap-y-0",
+          landscapeColumnGapCalc
+        )}
+      >
         {id !== "" ? (
-          <Copiable copiableContent={id} info="Copy Registry Address" iconPlacement="left">
-            <StyledA
+          <Copiable
+            copiableContent={id}
+            info="Copy Registry Address"
+            iconPlacement="left"
+            tooltipProps={{
+              small: true,
+            }}
+          >
+            <a
+              className="text-klerosUIComponentsPrimaryBlue no-underline hover:underline"
               href={`${SUPPORTED_CHAINS[DEFAULT_CHAIN].blockExplorers?.default.url}/address/${id}`}
               target="_blank"
               rel="noreferrer"
             >
               {shortenAddress(id)}
-            </StyledA>
+            </a>
           </Copiable>
         ) : (
           <Skeleton width={80} height={16} />
         )}
         <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
-      </TopRightInfo>
-    </TopInfoContainer>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/src/components/InformationCards/RegistryInformationCard/index.tsx b/web/src/components/InformationCards/RegistryInformationCard/index.tsx
index 4c207dc..2f77804 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/index.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import { Card, Copiable } from "@kleros/ui-components-library";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
@@ -9,47 +8,7 @@ import ActionButton from "../../ActionButton";
 import TopInfo from "./TopInfo";
 import { RegistryDetails } from "context/RegistryDetailsContext";
 import { validateList } from "src/types/ListMetadata";
-
-const StyledCard = styled(Card)`
-  display: flex;
-  width: 100%;
-  height: auto;
-  flex-direction: column;
-  margin-bottom: 64px;
-`;
-
-const Divider = styled.hr`
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: ${responsiveSize(20, 28)} ${responsiveSize(24, 32)};
-`;
-
-const BottomInfo = styled.div`
-  display: flex;
-  padding: 0 ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: space-between;
-`;
-
-const AliasContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-`;
-
-const WarningContainer = styled.p`
-  width: 100%;
-  padding: 8px 32px;
-  margin: 0;
-  background-color: ${({ theme }) => theme.warningLight};
-  font-size: 14px;
-  font-weight: 500;
-  color: ${({ theme }) => theme.warning};
-  text-align: center;
-`;
+import { cn } from "~src/utils";
 
 interface IInformationCard
   extends Pick<
@@ -89,9 +48,11 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
 }) => {
   const showWarning = isPreview || !metadata ? false : !validateList(metadata).success;
   return (
-    <StyledCard {...{ className }}>
+    <Card className={cn("flex flex-col w-full h-auto mb-16", className)}>
       {showWarning ? (
-        <WarningContainer>This list does not pass the validation checks. Please review carefully.</WarningContainer>
+        <p className="w-full py-2 px-8 m-0 text-sm font-medium text-center bg-klerosUIComponentsWarningLight text-klerosUIComponentsWarning">
+          This list does not pass the validation checks. Please review carefully.
+        </p>
       ) : null}
       <TopInfo
         {...{
@@ -105,14 +66,17 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
           registryAddress: parentRegistryAddress,
         }}
       />
-      <Divider />
-      <BottomInfo>
-        <AliasContainer>
+      <hr
+        className="border-none h-px bg-klerosUIComponentsStroke"
+        style={{ marginBlock: responsiveSize(20, 28), marginInline: responsiveSize(24, 32) }}
+      />
+      <div className="flex flex-wrap justify-between gap-5 pb-3" style={{ paddingInline: responsiveSize(24, 32) }}>
+        <div className="flex flex-wrap gap-2 items-center leading-18px">
           <small>Submitted by:</small>
-          <Copiable copiableContent={registerer?.id ?? ""}>
+          <Copiable copiableContent={registerer?.id ?? ""} tooltipProps={{ small: true }}>
             <AliasDisplay address={registerer?.id} />
           </Copiable>
-        </AliasContainer>
+        </div>
         <ActionButton
           {...{
             status: mapFromSubgraphStatus(status, disputed),
@@ -121,9 +85,9 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
             isItem: false,
           }}
         />
-      </BottomInfo>
+      </div>
       <Policies policyURI={policyURI ?? ""} />
-    </StyledCard>
+    </Card>
   );
 };
 
diff --git a/web/src/components/InformationCards/StatusDisplay.tsx b/web/src/components/InformationCards/StatusDisplay.tsx
index 503c3eb..043a10a 100644
--- a/web/src/components/InformationCards/StatusDisplay.tsx
+++ b/web/src/components/InformationCards/StatusDisplay.tsx
@@ -1,38 +1,28 @@
 import React, { useMemo } from "react";
-import { getStatusColor, getStatusLabel, mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
-import styled, { css, useTheme } from "styled-components";
+import { getStatusLabel, mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import { Status } from "consts/status";
 import { Status as SubgraphStatus } from "src/graphql/graphql";
 import { useCountdown } from "hooks/useCountdown";
 import { secondsToDayHourMinute } from "utils/date";
 import { useReadCurateV2ChallengePeriodDuration } from "hooks/useContract";
+import { cn } from "~src/utils";
 
-const StatusContainer = styled.div`
-  display: flex;
-  gap: 4px 8px;
-  flex-wrap: wrap;
-`;
+const colorStyles: Record<Status, string> = {
+  [Status.RegistrationPending]: "text-klerosUIComponentsPrimaryBlue",
+  [Status.ClearingPending]: "text-klerosUIComponentsPrimaryBlue",
+  [Status.Disputed]: "text-klerosUIComponentsSecondaryPurple",
+  [Status.Included]: "text-klerosUIComponentsSuccess",
+  [Status.Removed]: "text-klerosUIComponentsError",
+};
+
+const dotStyles: Record<Status, string> = {
+  [Status.RegistrationPending]: "before:bg-klerosUIComponentsPrimaryBlue",
+  [Status.ClearingPending]: "before:bg-klerosUIComponentsPrimaryBlue",
+  [Status.Disputed]: "before:bg-klerosUIComponentsSecondaryPurple",
+  [Status.Included]: "before:bg-klerosUIComponentsSuccess",
+  [Status.Removed]: "before:bg-klerosUIComponentsError",
+};
 
-const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean }>`
-  display: flex;
-  align-items: center;
-  color: ${({ frontColor }) => frontColor};
-  ${({ withDot, frontColor }) =>
-    withDot
-      ? css`
-          ::before {
-            content: "";
-            display: inline-block;
-            height: 8px;
-            width: 8px;
-            border-radius: 50%;
-            margin-right: 8px;
-            background-color: ${frontColor};
-            flex-shrink: 0;
-          }
-        `
-      : null}
-`;
 interface IStatusDisplay {
   status: SubgraphStatus;
   disputed: boolean;
@@ -45,10 +35,7 @@ const StatusDisplay: React.FC<IStatusDisplay> = ({
   registryAddress,
   latestRequestSubmissionTime,
 }) => {
-  const theme = useTheme();
-
   const processedStatus = mapFromSubgraphStatus(status, disputed);
-  const [frontColor] = getStatusColor(processedStatus, theme);
 
   const { data: challengePeriodDuration } = useReadCurateV2ChallengePeriodDuration({
     address: registryAddress as `0x${string}`,
@@ -69,12 +56,21 @@ const StatusDisplay: React.FC<IStatusDisplay> = ({
     countdown && countdown > 0 && [Status.ClearingPending, Status.RegistrationPending].includes(processedStatus);
 
   return (
-    <StatusContainer>
-      <StyledLabel frontColor={frontColor} withDot>
+    <div className="flex flex-wrap gap-y-1 gap-x-2">
+      <label
+        className={cn(
+          "flex items-center",
+          "before:content-[''] before:inline-block before:h-2 before:w-2 before:rounded-[50%] before:mr-2 before:shrink-0",
+          colorStyles[processedStatus],
+          dotStyles[processedStatus]
+        )}
+      >
         {getStatusLabel(processedStatus)}
-      </StyledLabel>
-      <StyledLabel {...{ frontColor }}>{showCountdown ? secondsToDayHourMinute(countdown) : ""}</StyledLabel>
-    </StatusContainer>
+      </label>
+      <label className={cn("flex items-center", colorStyles[processedStatus])}>
+        {showCountdown ? secondsToDayHourMinute(countdown) : ""}
+      </label>
+    </div>
   );
 };
 
diff --git a/web/src/components/InternalLink.tsx b/web/src/components/InternalLink.tsx
deleted file mode 100644
index 2025427..0000000
--- a/web/src/components/InternalLink.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-
-export const InternalLink = styled(Link)`
-  :hover {
-    color: ${({ theme }) => theme.secondaryBlue} !important;
-  }
-`;
diff --git a/web/src/components/ItemCard/ItemField/AddressField.tsx b/web/src/components/ItemCard/ItemField/AddressField.tsx
index 075d674..7b1988a 100644
--- a/web/src/components/ItemCard/ItemField/AddressField.tsx
+++ b/web/src/components/ItemCard/ItemField/AddressField.tsx
@@ -1,18 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import Etherscan from "svgs/icons/etherscan.svg";
 import { getChainById } from "utils/getChainById";
 import { shortenAddress } from "utils/shortenAddress";
-
-const Container = styled.a`
-  display: flex;
-  gap: 8px;
-`;
-
-const StyledEtherscanIcon = styled(Etherscan)`
-  width: 16px;
-  height: 16px;
-`;
 export interface IAddressField {
   value: string;
   chainId: number;
@@ -23,15 +12,16 @@ const AddressField: React.FC<IAddressField> = ({ value, chainId }) => {
   const explorerUrl = chain?.blockExplorers?.default.url;
 
   return (
-    <Container
+    <a
+      className="flex gap-2"
       href={`${explorerUrl}/address/${value}`}
       onClick={(event) => event.stopPropagation()}
-      target="blank"
-      rel="noreferrer"
+      target="_blank"
+      rel="noopener noreferrer"
     >
-      <StyledEtherscanIcon />
+      <Etherscan width={16} height={16} />
       {shortenAddress(value)}
-    </Container>
+    </a>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/BooleanField.tsx b/web/src/components/ItemCard/ItemField/BooleanField.tsx
index 4545d57..75412da 100644
--- a/web/src/components/ItemCard/ItemField/BooleanField.tsx
+++ b/web/src/components/ItemCard/ItemField/BooleanField.tsx
@@ -1,14 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import WithHelpTooltip from "components/WithHelpTooltip";
 
-const Container = styled.p`
-  margin: 0px;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
 export interface IBooleanField {
   value: string;
   label: string;
@@ -18,7 +10,7 @@ export interface IBooleanField {
 const BooleanField: React.FC<IBooleanField> = ({ value, label, detailed, description }) => {
   const text = value ? `true` : `false`;
   return (
-    <Container>
+    <p className="flex gap-2 items-center m-0">
       {detailed ? (
         <>
           {label}: <WithHelpTooltip tooltipMsg={description ?? ""}>{text}</WithHelpTooltip>
@@ -26,7 +18,7 @@ const BooleanField: React.FC<IBooleanField> = ({ value, label, detailed, descrip
       ) : (
         <WithHelpTooltip tooltipMsg={label ?? ""}>{text}</WithHelpTooltip>
       )}
-    </Container>
+    </p>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/ChainField.tsx b/web/src/components/ItemCard/ItemField/ChainField.tsx
index 4ef62f1..2609573 100644
--- a/web/src/components/ItemCard/ItemField/ChainField.tsx
+++ b/web/src/components/ItemCard/ItemField/ChainField.tsx
@@ -1,18 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import { getChainById } from "utils/getChainById";
 import ChainIcon, { getChainName } from "components/ChainIcon";
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const StyledP = styled.p`
-  margin: 0px;
-`;
-
 export interface IChainField {
   value: string;
 }
@@ -23,10 +12,10 @@ const ChainField: React.FC<IChainField> = ({ value }) => {
   const chainName = getChainName(chain.id);
 
   return (
-    <Container>
+    <div className="flex gap-2 items-center">
       <ChainIcon chainId={chain.id} />
-      <StyledP>{chainName}</StyledP>
-    </Container>
+      <p className="m-0">{chainName}</p>
+    </div>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/FileField.tsx b/web/src/components/ItemCard/ItemField/FileField.tsx
index 8f7e870..caa73f0 100644
--- a/web/src/components/ItemCard/ItemField/FileField.tsx
+++ b/web/src/components/ItemCard/ItemField/FileField.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 import PDFIcon from "svgs/icons/pdf.svg";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
-const Container = styled(Link)`
-  display: flex;
-  gap: 8px;
-`;
-
 export interface IFileField {
   value: string;
   label: string;
@@ -18,10 +12,10 @@ export interface IFileField {
 const FileField: React.FC<IFileField> = ({ value, label }) => {
   const fileUrl = getIpfsUrl(value);
   return (
-    <Container to={`/attachment/?url=${fileUrl}`} onClick={(event) => event.stopPropagation()}>
+    <Link className="flex gap-2" to={`/attachment/?url=${fileUrl}`} onClick={(event) => event.stopPropagation()}>
       <PDFIcon />
       {label}
-    </Container>
+    </Link>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/ImageField.tsx b/web/src/components/ItemCard/ItemField/ImageField.tsx
index e149826..b19c593 100644
--- a/web/src/components/ItemCard/ItemField/ImageField.tsx
+++ b/web/src/components/ItemCard/ItemField/ImageField.tsx
@@ -1,14 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
-const StyledImg = styled.img<{ detailed?: boolean }>`
-  width: ${({ detailed }) => (detailed ? "125px" : "40px")};
-  height: ${({ detailed }) => (detailed ? "125px" : "40px")};
-  object-fit: contain;
-`;
-
 export interface IImageField {
   value: string;
   detailed?: boolean;
@@ -18,7 +11,13 @@ const ImageField: React.FC<IImageField> = ({ value, detailed }) => {
   const imgUrl = getIpfsUrl(value);
   return (
     <Link to={`/attachment/?url=${imgUrl}`}>
-      <StyledImg src={imgUrl} {...{ detailed }} />
+      <img
+        className="object-contain"
+        width={detailed ? 125 : 40}
+        height={detailed ? 125 : 40}
+        src={imgUrl}
+        alt="Item image"
+      />
     </Link>
   );
 };
diff --git a/web/src/components/ItemCard/ItemField/LinkField.tsx b/web/src/components/ItemCard/ItemField/LinkField.tsx
index 46da8d5..a66b5ff 100644
--- a/web/src/components/ItemCard/ItemField/LinkField.tsx
+++ b/web/src/components/ItemCard/ItemField/LinkField.tsx
@@ -1,12 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import Globe from "svgs/icons/globe.svg";
 
-const Container = styled.a`
-  display: flex;
-  gap: 8px;
-`;
-
 export interface ILinkField {
   value: string;
   detailed?: boolean;
@@ -14,10 +8,16 @@ export interface ILinkField {
 
 const LinkField: React.FC<ILinkField> = ({ value }) => {
   return (
-    <Container href={value} onClick={(event) => event.stopPropagation()} target="blank" rel="noreferrer">
+    <a
+      className="flex gap-2"
+      href={value}
+      onClick={(event) => event.stopPropagation()}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <Globe />
       {value}
-    </Container>
+    </a>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/LongTextField.tsx b/web/src/components/ItemCard/ItemField/LongTextField.tsx
index a4ff6e7..f832c9c 100644
--- a/web/src/components/ItemCard/ItemField/LongTextField.tsx
+++ b/web/src/components/ItemCard/ItemField/LongTextField.tsx
@@ -1,35 +1,16 @@
 import React from "react";
-import styled from "styled-components";
 import WithHelpTooltip from "components/WithHelpTooltip";
 import TruncatedText from "components/TruncatedText";
 import { Overlay } from "components/Overlay";
-import { Textarea } from "@kleros/ui-components-library";
+import { TextArea } from "@kleros/ui-components-library";
 import { useToggle } from "react-use";
 import Modal from "components/Modal";
 
-const Container = styled.p`
-  margin: 0px;
-`;
-
-const StyledModal = styled(Modal)`
-  padding: 0;
-`;
-
-const TextDisplay = styled(Textarea)`
-  width: 100%;
-  height: 80vh;
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryBlue};
-  cursor: pointer;
-`;
-
 const LongTextFullDisplay: React.FC<{ text: string; toggleModal: () => void }> = ({ text, toggleModal }) => (
   <Overlay>
-    <StyledModal {...{ toggleModal }}>
-      <TextDisplay value={text} disabled />
-    </StyledModal>
+    <Modal className="p-0" {...{ toggleModal }}>
+      <TextArea className="w-full h-[80vh]" value={text} isDisabled />
+    </Modal>
   </Overlay>
 );
 
@@ -43,16 +24,19 @@ const LongTextField: React.FC<ILongTextField> = ({ value, detailed, label }) =>
   const [isModalOpen, toggleModal] = useToggle(false);
   return (
     <>
-      <Container>
+      <p className="m-0">
         {detailed ? (
           <WithHelpTooltip tooltipMsg={label ?? ""}>
             <TruncatedText text={value} maxLength={40} />
-            &nbsp; <StyledLabel onClick={toggleModal}>[Read More]</StyledLabel>
+            &nbsp;{" "}
+            <label className="cursor-pointer text-klerosUIComponentsPrimaryBlue" onClick={toggleModal}>
+              [Read More]
+            </label>
           </WithHelpTooltip>
         ) : (
           <TruncatedText text={value} maxLength={30} />
         )}
-      </Container>
+      </p>
       {isModalOpen && <LongTextFullDisplay text={value} toggleModal={toggleModal} />}
     </>
   );
diff --git a/web/src/components/ItemCard/ItemField/NumberField.tsx b/web/src/components/ItemCard/ItemField/NumberField.tsx
index db960e5..93826e0 100644
--- a/web/src/components/ItemCard/ItemField/NumberField.tsx
+++ b/web/src/components/ItemCard/ItemField/NumberField.tsx
@@ -1,14 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import WithHelpTooltip from "components/WithHelpTooltip";
 
-const Container = styled.p`
-  margin: 0px;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
 export interface INumberField {
   value: string;
   detailed?: boolean;
@@ -17,7 +9,7 @@ export interface INumberField {
 }
 const NumberField: React.FC<INumberField> = ({ value, detailed, label, description }) => {
   return (
-    <Container>
+    <p className="flex gap-2 items-center m-0">
       {detailed ? (
         <>
           {label}: <WithHelpTooltip tooltipMsg={description ?? ""}>{value}</WithHelpTooltip>
@@ -25,7 +17,7 @@ const NumberField: React.FC<INumberField> = ({ value, detailed, label, descripti
       ) : (
         <WithHelpTooltip tooltipMsg={label ?? ""}>{value}</WithHelpTooltip>
       )}
-    </Container>
+    </p>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/TextField.tsx b/web/src/components/ItemCard/ItemField/TextField.tsx
index 56f00ea..c978973 100644
--- a/web/src/components/ItemCard/ItemField/TextField.tsx
+++ b/web/src/components/ItemCard/ItemField/TextField.tsx
@@ -1,12 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import WithHelpTooltip from "components/WithHelpTooltip";
 import TruncatedText from "components/TruncatedText";
 
-const Container = styled.p`
-  margin: 0px;
-`;
-
 export interface ITextField {
   value: string;
   detailed?: boolean;
@@ -14,13 +9,13 @@ export interface ITextField {
 }
 const TextField: React.FC<ITextField> = ({ value, detailed, label }) => {
   return (
-    <Container>
+    <p className="m-0">
       {detailed ? (
         <WithHelpTooltip tooltipMsg={label ?? ""}>{value}</WithHelpTooltip>
       ) : (
         <TruncatedText text={value} maxLength={100} />
       )}
-    </Container>
+    </p>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/index.tsx b/web/src/components/ItemCard/ItemField/index.tsx
index cbe5bc2..e9804b2 100644
--- a/web/src/components/ItemCard/ItemField/index.tsx
+++ b/web/src/components/ItemCard/ItemField/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import TextField, { ITextField } from "./TextField";
 import AddressField, { IAddressField } from "./AddressField";
@@ -15,24 +14,6 @@ import { arbitrum, arbitrumSepolia } from "@reown/appkit/networks";
 import { Tooltip } from "@kleros/ui-components-library";
 import WarningIcon from "src/assets/svgs/icons/warning-outline.svg";
 
-const Container = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-const StyledTooltip = styled(Tooltip)`
-  height: 14px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
-
-const StyledWarningIcon = styled(WarningIcon)`
-  width: 14px;
-  height: 14px;
-`;
-
 type ItemDetails = ItemDetailsFragment["props"][number];
 
 export interface IItemField extends ItemDetails {
@@ -100,14 +81,18 @@ const ItemField: React.FC<IItemField> = ({ detailed, type, isUnrecognized = fals
     }
   }
   return (
-    <Container>
+    <div className="flex gap-2 items-center">
       {FieldComponent}
       {isUnrecognized ? (
-        <StyledTooltip text="This field is not defined in list's metadata." small>
-          <StyledWarningIcon />
-        </StyledTooltip>
+        <Tooltip
+          className="flex items-center cursor-pointer h-3.5"
+          text="This field is not defined in list's metadata."
+          small
+        >
+          <WarningIcon width={14} height={14} />
+        </Tooltip>
       ) : null}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/ItemCard/index.tsx b/web/src/components/ItemCard/index.tsx
index 9a24984..704cba9 100644
--- a/web/src/components/ItemCard/index.tsx
+++ b/web/src/components/ItemCard/index.tsx
@@ -1,80 +1,18 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import { Button, Card } from "@kleros/ui-components-library";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { responsiveSize } from "styles/responsiveSize";
 import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import ArrowIcon from "svgs/icons/arrow.svg";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import ItemField from "./ItemField";
+import { cn } from "~src/utils";
+import clsx from "clsx";
 
-const StyledListItem = styled(Card)`
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-  height: max-content;
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-    `
-  )}
-`;
+const landscapeGridColsCalc =
+  "lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 
-const Container = styled.div`
-  width: 100%;
-  height: max-content;
-  align-items: center;
-  display: grid;
-  grid-template-rows: repeat(3, min-content);
-  grid-template-columns: 1fr min-content;
-  column-gap: ${responsiveSize(12, 32, 900)};
-  row-gap: 8px;
-  padding: 16px;
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-      justify-content: space-between;
-      grid-template-rows: 1fr;
-      grid-template-columns: 1fr ${responsiveSize(150, 180, 900)} max-content;
-      padding: 0 32px;
-    `
-  )}
-`;
-
-const StyledButton = styled(Button)`
-  background-color: transparent;
-  padding: 0;
-  flex-direction: row-reverse;
-  gap: 8px;
-  .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-weight: 400;
-  }
-
-  :focus,
-  :hover {
-    background-color: transparent;
-  }
-`;
-
-const FieldsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: start;
-  width: fit-content;
-  gap: 16px;
-  grid-column: span 2;
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      align-items: center;
-      grid-column: span 1;
-      gap: ${responsiveSize(16, 36, 900)};
-    `
-  )}
-`;
 interface IItemCard extends ItemDetailsFragment {}
 
 const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
@@ -84,13 +22,41 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
   const sortedProps = sortItemProps(props);
 
   return (
-    <StyledListItem hover onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}>
-      <Container>
-        <FieldsContainer>{sortedProps.map((prop) => prop.isIdentifier && <ItemField {...prop} />)}</FieldsContainer>
+    <Card
+      className="flex grow w-full h-max lg:h-16"
+      hover
+      onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}
+    >
+      <div
+        className={cn(
+          "grid grid-rows-[repeat(3,min-content)] grid-cols-[1fr_min-content]",
+          "w-full h-max p-4 gap-y-2 items-center",
+          "lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
+          landscapeGridColsCalc
+        )}
+        style={{ columnGap: responsiveSize(12, 32, 900) }}
+      >
+        <div
+          className={cn(
+            "flex flex-col justify-between items-start gap-4 w-fit col-span-2",
+            "lg:flex-row lg:items-center lg:col-span-1",
+            landscapeGapCalc
+          )}
+        >
+          {sortedProps.map((prop) => prop.isIdentifier && <ItemField key={prop.label} {...prop} />)}
+        </div>
         <StatusBanner {...{ status: mapFromSubgraphStatus(status, disputed) }} isListView />
-        <StyledButton text="Open" Icon={ArrowIcon} />
-      </Container>
-    </StyledListItem>
+        <Button
+          className={clsx(
+            "bg-transparent p-0 flex-row-reverse gap-2",
+            "[&_.button-text]:text-klerosUIComponentsPrimaryBlue [&_.button-text]:font-normal",
+            "focus:bg-transparent hover:bg-transparent"
+          )}
+          text="Open"
+          Icon={ArrowIcon}
+        />
+      </div>
+    </Card>
   );
 };
 
diff --git a/web/src/components/LabeledInput.tsx b/web/src/components/LabeledInput.tsx
index 7ad4e31..ce9e701 100644
--- a/web/src/components/LabeledInput.tsx
+++ b/web/src/components/LabeledInput.tsx
@@ -1,39 +1,11 @@
-import { Field, FieldProps } from "@kleros/ui-components-library";
-import React from "react";
-import styled from "styled-components";
-import { isUndefined } from "utils/index";
+import React, { ReactNode } from "react";
+import { cn, isUndefined } from "utils/index";
 import WithHelpTooltip from "./WithHelpTooltip";
+import { TextField } from "@kleros/ui-components-library";
 
-const Container = styled.div`
-  width: 100%;
-  height: min-content;
-  display: grid;
-  grid-template-columns: auto auto;
-  .field {
-    grid-column: span 2;
-  }
-`;
-
-const StyledField = styled(Field)`
-  width: 100%;
-`;
-
-const StyledLabel = styled.label<{ alignRight?: boolean; top?: boolean }>`
-  text-align: ${({ alignRight }) => (alignRight ? "end" : "start")};
-  float: ${({ alignRight }) => (alignRight ? "right" : "left")};
-  color: ${({ theme, top }) => (top ? theme.primaryText : theme.secondaryText)};
-`;
-
-const Wrapper = styled.div<{ top?: boolean }>`
-  ${({ top }) => (top ? "margin-bottom: 12px;" : "margin-top: 12px")}
-`;
-
-const ElementWrapper = styled.div<{ alignRight?: boolean }>`
-  width: 100%;
-  display: flex;
-  justify-content: ${({ alignRight }) => (alignRight ? "end" : "start")};
-  align-items: top;
-`;
+const ElementWrapper: React.FC<{ children: ReactNode; alignRight?: boolean }> = ({ children, alignRight = false }) => {
+  return <div className={cn("flex items-start w-full", alignRight ? "justify-end" : "justify-start")}>{children}</div>;
+};
 
 const Label: React.FC<{
   label: string;
@@ -42,19 +14,29 @@ const Label: React.FC<{
   top?: boolean;
 }> = ({ label, tooltipMsg, alignRight, top }) => {
   return (
-    <Wrapper {...{ top }}>
+    <div className={cn(top ? "mb-3" : "mt-3")}>
       {tooltipMsg ? (
         <WithHelpTooltip tooltipMsg={tooltipMsg} place="top">
-          <StyledLabel id={label} {...{ alignRight, top }}>
+          <label
+            className={cn(
+              alignRight ? "text-end float-right" : "text-start float-left",
+              top ? "text-klerosUIComponentsPrimaryText" : "text-klerosUIComponentsSecondaryText"
+            )}
+          >
             {label}
-          </StyledLabel>
+          </label>
         </WithHelpTooltip>
       ) : (
-        <StyledLabel id={label} {...{ alignRight, top }}>
+        <label
+          className={cn(
+            alignRight ? "text-end float-right" : "text-start float-left",
+            top ? "text-klerosUIComponentsPrimaryText" : "text-klerosUIComponentsSecondaryText"
+          )}
+        >
           {label}
-        </StyledLabel>
+        </label>
       )}
-    </Wrapper>
+    </div>
   );
 };
 
@@ -63,7 +45,7 @@ interface LabelOptions {
   tooltipMsg?: string;
   tooltipPlace?: "top" | "bottom" | "left" | "right";
 }
-interface ILabeledInput extends FieldProps {
+interface ILabeledInput {
   topLeftLabel?: LabelOptions;
   topRightLabel?: LabelOptions;
   bottomLeftLabel?: LabelOptions;
@@ -74,7 +56,7 @@ const LabeledInput: React.FC<ILabeledInput> = (props) => {
   const { topLeftLabel, topRightLabel, bottomLeftLabel, bottomRightLabel } = props;
 
   return (
-    <Container>
+    <div className="grid auto-cols-auto w-full h-min">
       {/* top left label */}
       {!isUndefined(topLeftLabel) && typeof topLeftLabel.text === `string` ? (
         <Label label={topLeftLabel.text} tooltipMsg={topLeftLabel.tooltipMsg} top />
@@ -93,7 +75,7 @@ const LabeledInput: React.FC<ILabeledInput> = (props) => {
         <ElementWrapper alignRight>{topRightLabel.text}</ElementWrapper>
       ) : null}
 
-      <StyledField {...props} className="field" />
+      <TextField {...props} className="col-span-2 w-full" />
 
       {/* bottom left label */}
       {!isUndefined(bottomLeftLabel) && typeof bottomLeftLabel.text === `string` ? (
@@ -112,7 +94,7 @@ const LabeledInput: React.FC<ILabeledInput> = (props) => {
       {!isUndefined(bottomRightLabel) && isReactElement(bottomRightLabel.text) ? (
         <ElementWrapper alignRight>{bottomRightLabel.text}</ElementWrapper>
       ) : null}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx
index 86307d5..4bbd06a 100644
--- a/web/src/components/LightButton.tsx
+++ b/web/src/components/LightButton.tsx
@@ -1,39 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import { Button } from "@kleros/ui-components-library";
-
-const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
-  ${hoverShortTransitionTiming}
-  background-color: transparent;
-  padding: 8px !important;
-  border-radius: 7px;
-  .button-text {
-    color: ${({ theme }) => theme.primaryText};
-    font-weight: 400;
-  }
-  .button-svg {
-    fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
-  }
-
-  &:hover {
-    .button-svg {
-      fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
-    }
-    background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
-  }
-
-  ${landscapeStyle(
-    () => css`
-      padding: 8px !important;
-      .button-svg {
-        margin-right: 0;
-      }
-    `
-  )}
-`;
+import { cn } from "~src/utils";
 
 interface ILightButton {
   text: string;
@@ -45,7 +12,21 @@ interface ILightButton {
 }
 
 const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
-  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
+  <Button
+    variant="primary"
+    small
+    className={cn(
+      "p-2 rounded-[7px]!",
+      "bg-transparent hover:bg-white-low-opacity-strong transition duration-100",
+      "[&_.button-text]:text-klerosUIComponentsPrimaryText [&_.button-text]:font-normal",
+      "lg:[&_.button-svg]:mr-0",
+      isMobileNavbar
+        ? "[&_.button-svg]:fill-klerosUIComponentsSecondaryText hover:[&_.button-svg]:fill-klerosUIComponentsPrimaryText"
+        : "[&_.button-svg]:fill-white/75 hover:[&_.button-svg]:fill-white",
+      className
+    )}
+    {...{ text, Icon, onClick, disabled }}
+  />
 );
 
 export default LightButton;
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 7fde443..14867e2 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -1,28 +1,7 @@
 import React, { useRef } from "react";
-import styled from "styled-components";
 import { Overlay } from "./Overlay";
 import { useClickAway } from "react-use";
-
-const StyledModal = styled.div`
-  display: flex;
-  position: fixed;
-  top: 10vh;
-  left: 50%;
-  transform: translateX(-50%);
-  max-height: 80vh;
-  overflow-y: auto;
-
-  z-index: 10;
-  flex-direction: column;
-  align-items: center;
-  width: 86vw;
-  max-width: 600px;
-  border-radius: 3px;
-  border: 1px solid ${({ theme }) => theme.stroke};
-  background-color: ${({ theme }) => theme.whiteBackground};
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
-  padding: 32px 32px 32px 36px;
-`;
+import { cn } from "~src/utils";
 
 const Modal: React.FC<{ children: React.ReactNode; toggleModal: () => void; className?: string }> = ({
   children,
@@ -33,9 +12,20 @@ const Modal: React.FC<{ children: React.ReactNode; toggleModal: () => void; clas
   useClickAway(containerRef, () => toggleModal());
   return (
     <Overlay>
-      <StyledModal {...{ className }} ref={containerRef}>
+      <div
+        className={cn(
+          "flex flex-col items-center bg-klerosUIComponentsWhiteBackground",
+          "fixed top-[10vh] left-1/2 overflow-y-auto z-10",
+          "w-[86vw] max-w-[600px] max-h-[80vh] py-8 pr-8 pl-9",
+          "transform -translate-x-1/2",
+          "border rounded-[3px] border-klerosUIComponentsStroke",
+          "shadow-default",
+          className
+        )}
+        ref={containerRef}
+      >
         {children}
-      </StyledModal>
+      </div>
     </Overlay>
   );
 };
diff --git a/web/src/components/Overlay.tsx b/web/src/components/Overlay.tsx
index b9b2978..37d29c1 100644
--- a/web/src/components/Overlay.tsx
+++ b/web/src/components/Overlay.tsx
@@ -1,11 +1,5 @@
-import styled from "styled-components";
+import React from "react";
 
-export const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: ${({ theme }) => theme.blackLowOpacity};
-  z-index: 30;
-`;
+export const Overlay: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div className="fixed top-0 left-0 w-screen h-screen bg-black-low-opacity z-30">{children}</div>
+);
diff --git a/web/src/components/OverlayPortal.tsx b/web/src/components/OverlayPortal.tsx
index b2f3c94..9d3e4ca 100644
--- a/web/src/components/OverlayPortal.tsx
+++ b/web/src/components/OverlayPortal.tsx
@@ -1,18 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import styled from "styled-components";
-
-const PortalContainer = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-`;
 
 const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, document.body);
+  return ReactDOM.createPortal(
+    <div className="fixed top-0 left-0 z-9999 w-full h-full">{children}</div>,
+    document.body
+  );
 };
 
 export default OverlayPortal;
diff --git a/web/src/components/RegistriesDisplay/RegistriesGrid.tsx b/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
index 6de6a0f..e5c7542 100644
--- a/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
+++ b/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
@@ -1,37 +1,15 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { useWindowSize } from "react-use";
 import { useParams } from "react-router-dom";
 import { SkeletonRegistryCard, SkeletonRegistryListItem } from "../StyledSkeleton";
 import { StandardPagination } from "@kleros/ui-components-library";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useIsListView } from "context/IsListViewProvider";
 import { isUndefined } from "utils/index";
 import { decodeListURIFilter } from "utils/uri";
 // import { RegistryDetailsFragment } from "queries/useCasesQuery";
 import RegistryCard from "components/RegistryCard";
 import { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
-
-const GridContainer = styled.div`
-  --gap: 16px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(274px, (100% - var(--gap) * 2)/3)), 1fr));
-  align-items: center;
-  gap: var(--gap);
-`;
-
-const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-`;
-
-const StyledPagination = styled(StandardPagination)`
-  margin-top: 24px;
-  margin-left: auto;
-  margin-right: auto;
-`;
+import { LG_BREAKPOINT } from "~src/styles/breakpoints";
 
 export interface IRegistriesGrid {
   registries?: [];
@@ -57,12 +35,12 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
   const { id: searchValue } = decodedFilter;
   const { isListView } = useIsListView();
   const { width } = useWindowSize();
-  const screenIsBig = useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
+  const screenIsBig = useMemo(() => width > LG_BREAKPOINT, [width]);
 
   return (
     <>
       {isListView && screenIsBig ? (
-        <ListContainer>
+        <div className="flex flex-col justify-center gap-2">
           {isUndefined(registries) || registriesLoading
             ? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryListItem key={i} />)
             : registries.map((registry) => {
@@ -74,9 +52,9 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
                   />
                 );
               })}
-        </ListContainer>
+        </div>
       ) : (
-        <GridContainer>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,max(274px,(100%-16px*2)/3)),1fr))] items-center gap-4">
           {isUndefined(registries) || registriesLoading
             ? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryCard key={i} />)
             : registries.map((registry) => {
@@ -89,11 +67,12 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
                   />
                 );
               })}
-        </GridContainer>
+        </div>
       )}
 
       {isUndefined(searchValue) && showPagination ? (
-        <StyledPagination
+        <StandardPagination
+          className="mt-6 mx-auto"
           currentPage={currentPage}
           numPages={Math.ceil(totalPages ?? 0)}
           callback={(page: number) => setCurrentPage(page)}
diff --git a/web/src/components/RegistryCard/RegistryInfo.tsx b/web/src/components/RegistryCard/RegistryInfo.tsx
index 8f8adda..ca5be27 100644
--- a/web/src/components/RegistryCard/RegistryInfo.tsx
+++ b/web/src/components/RegistryCard/RegistryInfo.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
-import styled, { css } from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
 import Skeleton from "react-loading-skeleton";
 import { Button } from "@kleros/ui-components-library";
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -10,85 +8,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import StatusBanner from "./StatusBanner";
 import { DEFAULT_LIST_LOGO } from "consts/index";
 import TruncatedText from "../TruncatedText";
-
-const Container = styled.div<{ isListView: boolean }>`
-  height: calc(100% - 45px);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-
-  // css for isList view
-  ${({ isListView }) =>
-    isListView &&
-    css`
-      width: 100%;
-      height: max-content;
-      display: grid;
-      grid-template-rows: repeat(3, min-content);
-      grid-template-columns: 21px max-content 1fr max-content;
-      column-gap: ${responsiveSize(8, 24, 900)};
-      row-gap: 16px;
-      padding: 16px;
-      h3,
-      img {
-        grid-column: span 4;
-      }
-      ${landscapeStyle(
-        () => css`
-          height: 64px;
-          justify-content: space-between;
-          grid-template-rows: 1fr;
-          grid-template-columns: auto 1fr ${responsiveSize(80, 100, 900)} ${responsiveSize(100, 150, 900)} max-content;
-          padding: 0 32px;
-          img {
-            grid-column: 1;
-          }
-          h3 {
-            grid-column: 2;
-          }
-        `
-      )}
-    `}
-`;
-
-const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  object-fit: contain;
-  margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.secondaryText};
-`;
-
-const StyledButton = styled(Button)`
-  background-color: transparent;
-  padding: 0;
-  flex-direction: row-reverse;
-  gap: 8px;
-  .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-weight: 400;
-  }
-  .button-svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
-  }
-
-  :focus,
-  :hover {
-    background-color: transparent;
-  }
-`;
-
-const SkeletonLogo = styled(Skeleton)<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
-  border-radius: ${({ isListView }) => (isListView ? "24px" : "62.5px")};
-  margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
-`;
+import { cn } from "~src/utils";
 
 interface IListInfo {
   title?: string;
@@ -98,6 +18,9 @@ interface IListInfo {
   isListView?: boolean;
 }
 
+const landscapeGridColsCalc =
+  "lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? DEFAULT_LIST_LOGO));
@@ -108,21 +31,51 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
   }, [logoURI]);
 
   return (
-    <Container {...{ isListView }}>
-      {!imageLoaded ? <SkeletonLogo isListView={isListView} /> : null}
-      <StyledLogo
+    <div
+      className={cn(
+        "flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
+        isListView && [
+          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
+          "w-full h-max lg:h-16 p-4",
+          "[&_h3]:col-span-4 [&_img]:col-span-4",
+          "lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
+          "lg:[&_img]:col-span-1 lg:[&_h3]:col-span-2",
+          landscapeGridColsCalc,
+        ]
+      )}
+      style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
+    >
+      {!imageLoaded ? (
+        <Skeleton
+          className={cn(isListView ? "mb-0" : "mb-2")}
+          height={isListView ? 40 : 125}
+          width={isListView ? 40 : 125}
+          borderRadius={isListView ? "24px" : "62.5px"}
+        />
+      ) : null}
+      <img
+        className={cn("object-contain", isListView ? "w-10 h-10 mb-0" : "w-[125px] h-[125px] mb-2")}
         src={imageSrc}
         alt="List Img"
-        isListView={isListView}
         onLoad={() => setImageLoaded(true)}
         onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
         style={{ display: imageLoaded ? "block" : "none" }}
       />
       <TruncatedText text={title ?? ""} maxLength={100} />
-      <StyledLabel>{totalItems} items</StyledLabel>
+      <label className="text-klerosUIComponentsSecondaryText">{totalItems} items</label>
       {isListView && <StatusBanner {...{ status, isListView }} />}
-      {isListView && <StyledButton text="Open" Icon={ArrowIcon} />}
-    </Container>
+      {isListView && (
+        <Button
+          className={cn(
+            "flex-row-reverse gap-2 p-0 bg-transparent",
+            "focus:bg-transparent hover:bg-transparent",
+            "[&_.button-text]:text-klerosUIComponentsPrimaryBlue [&_.button-text]:font-normal [&_.button-svg]:fill-klerosUIComponentsSecondaryPurple"
+          )}
+          text="Open"
+          Icon={ArrowIcon}
+        />
+      )}
+    </div>
   );
 };
 
diff --git a/web/src/components/RegistryCard/StatusBanner.tsx b/web/src/components/RegistryCard/StatusBanner.tsx
index 7d5ccda..1e2c94b 100644
--- a/web/src/components/RegistryCard/StatusBanner.tsx
+++ b/web/src/components/RegistryCard/StatusBanner.tsx
@@ -1,65 +1,13 @@
 import React from "react";
-import styled, { Theme } from "styled-components";
 import { Status } from "consts/status";
 import { Status as SubgraphStatus } from "src/graphql/graphql";
-
-const Container = styled.div<{ status: Status; isListView: boolean }>`
-  height: ${({ isListView }) => (isListView ? "min-content" : "45px")};
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  .dot {
-    ::before {
-      content: "";
-      display: inline-block;
-      height: 8px;
-      width: 8px;
-      border-radius: 50%;
-      margin-right: 8px;
-    }
-  }
-  ${({ theme, status, isListView }) => {
-    const [frontColor, backgroundColor] = getStatusColor(status, theme);
-    return `
-      ${!isListView && `border-top: 5px solid ${frontColor}`};
-      ${!isListView && `background-color: ${backgroundColor}`};
-      ${isListView && `padding: 0px`};
-      .front-color {
-        color: ${frontColor};
-      }
-      .dot {
-        ::before {
-          background-color: ${frontColor};
-        }
-      }
-    `;
-  }};
-`;
+import { cn } from "~src/utils";
 
 interface IStatusBanner {
   status: Status;
   isListView?: boolean;
 }
 
-export const getStatusColor = (status: Status, theme: Theme): [string, string] => {
-  switch (status) {
-    case Status.RegistrationPending:
-    case Status.ClearingPending:
-      return [theme.primaryBlue, theme.mediumBlue];
-    case Status.Disputed:
-      return [theme.secondaryPurple, theme.mediumPurple];
-    case Status.Included:
-      return [theme.success, theme.successLight];
-    case Status.Removed:
-      return [theme.error, theme.errorLight];
-    default:
-      return [theme.lightGrey, theme.lightGrey];
-  }
-};
-
 export const getStatusLabel = (status: Status): string => {
   switch (status) {
     case Status.RegistrationPending:
@@ -90,10 +38,39 @@ export const mapFromSubgraphStatus = (status: string, isDisputed: boolean) => {
       return Status.ClearingPending;
   }
 };
+
+const borderAndBgStyles: Record<Status, string> = {
+  [Status.RegistrationPending]: "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
+  [Status.ClearingPending]: "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
+  [Status.Disputed]: "border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple",
+  [Status.Included]: "border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight",
+  [Status.Removed]: "border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight",
+};
+
+const dotAndFrontColorStyles: Record<Status, string> = {
+  [Status.RegistrationPending]:
+    "[&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
+  [Status.ClearingPending]:
+    "[&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
+  [Status.Disputed]:
+    "[&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
+  [Status.Included]: "[&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
+  [Status.Removed]: "[&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
+};
+
 const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) => (
-  <Container {...{ status, isListView }}>
+  <div
+    className={cn(
+      "flex items-center justify-between px-6 rounded-t-[3px]",
+      isListView ? "h-min" : "h-11",
+      isListView && "p-0",
+      !isListView && ["border-t-[5px]", borderAndBgStyles[status]],
+      "[&_.dot::before]:content-[''] [&_.dot::before]:inline-block [&_.dot::before]:h-2 [&_.dot::before]:w-2 [&_.dot::before]:rounded-[50%] [&_.dot::before]:mr-2",
+      dotAndFrontColorStyles[status]
+    )}
+  >
     <label className="front-color dot">{getStatusLabel(status)}</label>
-  </Container>
+  </div>
 );
 
 export default StatusBanner;
diff --git a/web/src/components/RegistryCard/index.tsx b/web/src/components/RegistryCard/index.tsx
index 9f83ca2..b0780d4 100644
--- a/web/src/components/RegistryCard/index.tsx
+++ b/web/src/components/RegistryCard/index.tsx
@@ -1,31 +1,12 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import { Card } from "@kleros/ui-components-library";
 import { useIsListView } from "context/IsListViewProvider";
-import { landscapeStyle } from "styles/landscapeStyle";
 import StatusBanner from "./StatusBanner";
 import RegistryInfo from "./RegistryInfo";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
 import { Status } from "src/consts/status";
 
-const StyledCard = styled(Card)`
-  width: 100%;
-  height: 274px;
-`;
-
-const StyledListItem = styled(Card)`
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-  height: max-content;
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-    `
-  )}
-`;
-
 type List = GetRegistriesByIdsQuery["registries"][number];
 interface IListCard extends List {
   overrideIsListView?: boolean;
@@ -43,17 +24,22 @@ const RegistryCard: React.FC<IListCard> = ({ id, itemId, title, logoURI, totalIt
   return (
     <>
       {!isListView || overrideIsListView ? (
-        <StyledCard hover onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/1/desc/all`)}>
+        <Card
+          className="w-full h-[274px]"
+          hover
+          onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/1/desc/all`)}
+        >
           <StatusBanner {...{ status }} />
           <RegistryInfo {...{ title, logoURI, totalItems, status }} />
-        </StyledCard>
+        </Card>
       ) : (
-        <StyledListItem
+        <Card
+          className="flex grow w-full h-max lg:h-16"
           hover
           onClick={() => navigateAndScrollTop(`/lists/${registryAddressAndItemId}/display/desc/all`)}
         >
           <RegistryInfo {...{ title, logoURI, totalItems, status }} isListView />
-        </StyledListItem>
+        </Card>
       )}
     </>
   );
diff --git a/web/src/components/RegistryInfo/AliasDisplay.tsx b/web/src/components/RegistryInfo/AliasDisplay.tsx
index bef153b..e3df87d 100644
--- a/web/src/components/RegistryInfo/AliasDisplay.tsx
+++ b/web/src/components/RegistryInfo/AliasDisplay.tsx
@@ -1,24 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
 import { useEnsAddress } from "wagmi";
 import { isAddress } from "viem";
 import Skeleton from "react-loading-skeleton";
-
-const AliasContainer = styled.div`
-  min-height: 32px;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-const TextContainer = styled.div`
-  display: flex;
-  > label {
-    color: ${({ theme }) => theme.primaryText};
-    font-size: 14px;
-  }
-`;
+import { cn } from "~src/utils";
 
 interface IAlias {
   address: string;
@@ -35,12 +20,12 @@ const AliasDisplay: React.FC<IAlias> = ({ address, className }) => {
   const finalAddress = addressFromENS ?? address;
 
   return (
-    <AliasContainer {...{ className }}>
+    <div className={cn("flex items-center gap-2 min-h-8", className)}>
       {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={finalAddress} size="24" />}
-      <TextContainer>
+      <div className="flex [&>label]:text-sm [&>label]:text-klerosUIComponentsPrimaryText">
         {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={finalAddress} />}&nbsp;
-      </TextContainer>
-    </AliasContainer>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
index 48c2fac..37a6722 100644
--- a/web/src/components/Search.tsx
+++ b/web/src/components/Search.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useDebounce } from "react-use";
 import { Searchbar, DropdownSelect, Button } from "@kleros/ui-components-library";
@@ -9,60 +7,6 @@ import PaperIcon from "svgs/icons/paper.svg";
 import PlusIcon from "svgs/icons/plus.svg";
 import { List_filters } from "consts/filters";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-
-  ${landscapeStyle(
-    () =>
-      css`
-        flex-direction: row;
-      `
-  )}
-`;
-
-const SearchBarContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  gap: 8px;
-  z-index: 0;
-`;
-
-const StyledSearchbar = styled(Searchbar)`
-  flex: 1;
-  flex-basis: 310px;
-  input {
-    font-size: 16px;
-    height: 45px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-`;
-
-const StyledPaperIcon = styled(PaperIcon)`
-  path {
-    fill: ${({ theme }) => theme.whiteBackground};
-  }
-`;
-
-const StyledPlusIcon = styled(PlusIcon)`
-  path {
-    fill: ${({ theme }) => theme.whiteBackground};
-  }
-`;
-
-const StyledDropdownSelect = styled(DropdownSelect)`
-  [class*="button__Container"] {
-    [class*="base-item__Item"] {
-      border-left: 1px solid transparent;
-    }
-  }
-`;
-
 const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
   const { page, order, filter, id } = useParams();
   const location = useListRootPath();
@@ -70,7 +14,7 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
   const keywords = searchParams.get("keywords");
 
   const decodedFilter = decodeListURIFilter(filter ?? "all");
-  const [search, setSearch] = useState(keywords);
+  const [search, setSearch] = useState(keywords ?? undefined);
   const navigate = useNavigate();
 
   useDebounce(
@@ -91,37 +35,59 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
   };
 
   return (
-    <Container>
-      <SearchBarContainer>
-        <StyledSearchbar
+    <div className="flex flex-col flex-wrap gap-4 mb-4 lg:flex-row">
+      <div className="flex flex-1 flex-wrap gap-2 z-0">
+        <Searchbar
+          className="flex-1 basis-[310px] [&_input]:py-0"
           type="text"
           placeholder="Search by keywords"
           value={search}
-          onChange={(e) => setSearch(e.target.value)}
+          onChange={(value) => setSearch(value)}
         />
-      </SearchBarContainer>
-      <StyledDropdownSelect
+      </div>
+      <DropdownSelect
         items={[
-          { text: "All Status", dot: "grey", value: JSON.stringify({}) },
-          { text: "Active", dot: "orange", value: JSON.stringify(List_filters.Active) },
+          { id: JSON.stringify({}), text: "All Status", dot: "grey", itemValue: JSON.stringify({}) },
           {
+            id: JSON.stringify(List_filters.Active),
+            text: "Active",
+            dot: "orange",
+            itemValue: JSON.stringify(List_filters.Active),
+          },
+          {
+            id: JSON.stringify(List_filters.Pending),
             text: "Pending",
             dot: "blue",
-            value: JSON.stringify(List_filters.Pending),
+            itemValue: JSON.stringify(List_filters.Pending),
+          },
+          {
+            id: JSON.stringify(List_filters.Disputed),
+            text: "Disputed",
+            dot: "purple",
+            itemValue: JSON.stringify(List_filters.Disputed),
+          },
+          {
+            id: JSON.stringify(List_filters.Included),
+            text: "Included",
+            dot: "green",
+            itemValue: JSON.stringify(List_filters.Included),
+          },
+          {
+            id: JSON.stringify(List_filters.Removed),
+            text: "Removed",
+            dot: "red",
+            itemValue: JSON.stringify(List_filters.Removed),
           },
-          { text: "Disputed", dot: "purple", value: JSON.stringify(List_filters.Disputed) },
-          { text: "Included", dot: "green", value: JSON.stringify(List_filters.Included) },
-          { text: "Removed", dot: "red", value: JSON.stringify(List_filters.Removed) },
         ]}
-        defaultValue={JSON.stringify(decodedFilter)}
-        callback={handleStatusChange}
+        defaultSelectedKey={JSON.stringify(decodedFilter)}
+        callback={(item) => handleStatusChange(item.itemValue)}
       />
       {isList ? (
-        <Button text="Create New List" Icon={StyledPaperIcon} onClick={() => navigate("/submit-list")} />
+        <Button text="Create New List" Icon={PaperIcon} onClick={() => navigate("/submit-list")} />
       ) : (
-        <Button Icon={StyledPlusIcon} text="Submit Item" onClick={() => navigate(`/submit-item/${id}`)} />
+        <Button Icon={PlusIcon} text="Submit Item" onClick={() => navigate(`/submit-item/${id}`)} />
       )}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx
index 728b1e9..989d77d 100644
--- a/web/src/components/StatDisplay.tsx
+++ b/web/src/components/StatDisplay.tsx
@@ -1,56 +1,8 @@
-import React, { useMemo } from "react";
-import { landscapeStyle } from "styles/landscapeStyle";
-import styled, { useTheme, css } from "styled-components";
-import { responsiveSize } from "styles/responsiveSize";
-import { Theme } from "styled-components";
-
-const Container = styled.div`
-  display: flex;
-  max-width: 196px;
-  align-items: center;
-  gap: 8px;
-
-  ${landscapeStyle(
-    () => css`
-      margin-bottom: ${responsiveSize(16, 30)};
-    `
-  )}
-`;
-
-const SVGContainer = styled.div<{ iconColor: string; backgroundColor: string }>`
-  height: 48px;
-  width: 48px;
-  border-radius: 50%;
-  background-color: ${({ backgroundColor }) => backgroundColor};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    fill: ${({ iconColor }) => iconColor};
-    height: 21px;
-    width: 21px;
-  }
-`;
-
-const TextContainer = styled.div`
-  h1 {
-    margin: 0;
-  }
-`;
-
-const SubtextLabel = styled.label`
-  font-size: 12px;
-`;
-
-const COLORS: Record<string, Array<keyof Theme>> = {
-  green: ["success", "successLight"],
-  blue: ["primaryBlue", "mediumBlue"],
-  purple: ["secondaryPurple", "mediumPurple"],
-  orange: ["warning", "warningLight"],
-};
-
-export type IColors = keyof typeof COLORS;
+import React from "react";
+import clsx from "clsx";
+import { cn } from "~src/utils";
 
+export type IColors = "green" | "blue" | "purple" | "orange";
 interface IStatDisplay {
   title: string;
   text: string | React.ReactNode;
@@ -59,22 +11,29 @@ interface IStatDisplay {
   color: IColors;
 }
 
-const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
-  const theme = useTheme();
-
-  const [iconColor, backgroundColor] = useMemo(() => {
-    return COLORS[color].map((color) => theme[color]);
-  }, [theme, color]);
+const landscapeMarginBottomCalc = "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
+const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
   return (
-    <Container {...props}>
-      <SVGContainer {...{ iconColor, backgroundColor }}>{<Icon />}</SVGContainer>
-      <TextContainer>
+    <div className={clsx("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
+      <div
+        className={cn(
+          "flex items-center justify-center h-12 w-12 rounded-[50%]",
+          "[&_svg]:h-5 [&_svg]:w-5",
+          color === "green" && "bg-klerosUIComponentsSuccessLight [&_svg]:fill-klerosUIComponentsSuccess",
+          color === "blue" && "bg-klerosUIComponentsMediumBlue [&_svg]:fill-klerosUIComponentsPrimaryBlue",
+          color === "purple" && "bg-klerosUIComponentsMediumPurple [&_svg]:fill-klerosUIComponentsSecondaryPurple",
+          color === "orange" && "bg-klerosUIComponentsWarningLight [&_svg]:fill-klerosUIComponentsWarning"
+        )}
+      >
+        {<Icon />}
+      </div>
+      <div className="leading-5">
         <label>{title}</label>
-        <h1>{text}</h1>
-        <SubtextLabel>{subtext}</SubtextLabel>
-      </TextContainer>
-    </Container>
+        <h1 className="m-0">{text}</h1>
+        <label className="text-xs">{subtext}</label>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/src/components/StatsAndFilters/Filters.tsx b/web/src/components/StatsAndFilters/Filters.tsx
index e9c11c2..c7acda2 100644
--- a/web/src/components/StatsAndFilters/Filters.tsx
+++ b/web/src/components/StatsAndFilters/Filters.tsx
@@ -1,9 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import { DropdownSelect } from "@kleros/ui-components-library";
 
 import { useIsListView } from "context/IsListViewProvider";
@@ -12,41 +9,6 @@ import GridIcon from "svgs/icons/grid.svg";
 import { useItemRootPath, useListRootPath } from "utils/uri";
 import useIsDesktop from "hooks/useIsDesktop";
 
-const Container = styled.div`
-  display: flex;
-  justify-content: end;
-  gap: 12px;
-  width: fit-content;
-`;
-
-const IconsContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-`;
-
-const BaseIconStyles = css`
-  ${hoverShortTransitionTiming}
-  cursor: pointer;
-  fill: ${({ theme }) => theme.primaryBlue};
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-
-  :hover {
-    fill: ${({ theme }) => theme.secondaryBlue};
-  }
-`;
-
-const StyledGridIcon = styled(GridIcon)`
-  ${BaseIconStyles}
-`;
-
-const StyledListIcon = styled(ListIcon)`
-  ${BaseIconStyles}
-`;
-
 export interface IFilters {
   isListFilter?: boolean;
 }
@@ -69,23 +31,28 @@ const Filters: React.FC<IFilters> = ({ isListFilter = false }) => {
   const isDesktop = useIsDesktop();
 
   return (
-    <Container>
+    <div className="flex justify-end gap-3 w-fit **:focus:shadow-none">
       <DropdownSelect
+        className="self-center [&_button]:p-0"
         smallButton
         simpleButton
         items={[
-          { value: "desc", text: "Newest" },
-          { value: "asc", text: "Oldest" },
+          { id: "desc", itemValue: "desc", text: "Newest" },
+          { id: "asc", itemValue: "asc", text: "Oldest" },
         ]}
-        defaultValue={order}
-        callback={handleOrderChange}
+        defaultSelectedKey={order}
+        callback={(item) => handleOrderChange(item.itemValue)}
       />
       {isDesktop && isListFilter ? (
-        <IconsContainer>
+        <div className="flex justify-center items-center gap-1">
           {isListView ? (
-            <StyledGridIcon onClick={() => setIsListView(false)} />
+            <GridIcon
+              className="w-4 h-4 overflow-hidden cursor-pointer fill-klerosUIComponentsPrimaryBlue hover:fill-klerosUIComponentsSecondaryBlue transition duration-100"
+              onClick={() => setIsListView(false)}
+            />
           ) : (
-            <StyledListIcon
+            <ListIcon
+              className="w-4 h-4 overflow-hidden cursor-pointer fill-klerosUIComponentsPrimaryBlue hover:fill-klerosUIComponentsSecondaryBlue transition duration-100"
               onClick={() => {
                 if (isDesktop) {
                   setIsListView(true);
@@ -93,9 +60,9 @@ const Filters: React.FC<IFilters> = ({ isListFilter = false }) => {
               }}
             />
           )}
-        </IconsContainer>
+        </div>
       ) : null}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/components/StatsAndFilters/Stats.tsx b/web/src/components/StatsAndFilters/Stats.tsx
index 7f741ae..aecb59a 100644
--- a/web/src/components/StatsAndFilters/Stats.tsx
+++ b/web/src/components/StatsAndFilters/Stats.tsx
@@ -1,28 +1,13 @@
 import React from "react";
-import styled from "styled-components";
-
-const FieldWrapper = styled.div`
-  display: inline-flex;
-  gap: 4px;
-`;
-
-const SeparatorLabel = styled.label`
-  margin: 0 8px;
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
-`;
 
 const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => (
-  <FieldWrapper>
+  <div className="inline-flex gap-1">
     <small>{value}</small>
-    <StyledLabel>{label}</StyledLabel>
-  </FieldWrapper>
+    <label className="text-klerosUIComponentsPrimaryText">{label}</label>
+  </div>
 );
 
-const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
+const Separator: React.FC = () => <label className="text-klerosUIComponentsPrimaryText">|</label>;
 
 type Field = {
   label: string;
diff --git a/web/src/components/StatsAndFilters/index.tsx b/web/src/components/StatsAndFilters/index.tsx
index 52fe1a1..83ec637 100644
--- a/web/src/components/StatsAndFilters/index.tsx
+++ b/web/src/components/StatsAndFilters/index.tsx
@@ -1,22 +1,12 @@
 import React from "react";
-import styled from "styled-components";
 import Stats, { IStats } from "./Stats";
 import Filters, { IFilters } from "./Filters";
 
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 11px;
-  margin-bottom: 48px;
-  justify-content: space-between;
-`;
-
 const StatsAndFilters: React.FC<IStats & IFilters> = ({ fields, isListFilter }) => (
-  <Container>
+  <div className="flex flex-wrap gap-2 mt-3 mb-12 justify-between">
     <Stats {...{ fields }} />
     <Filters {...{ isListFilter }} />
-  </Container>
+  </div>
 );
 
 export default StatsAndFilters;
diff --git a/web/src/components/StyledIcons/ClosedCircleIcon.tsx b/web/src/components/StyledIcons/ClosedCircleIcon.tsx
index 29b7e47..e3ddc94 100644
--- a/web/src/components/StyledIcons/ClosedCircleIcon.tsx
+++ b/web/src/components/StyledIcons/ClosedCircleIcon.tsx
@@ -1,14 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import ClosedCircle from "svgs/icons/close-circle.svg";
 
-const StyledClosedCircle = styled(ClosedCircle)`
-  path {
-    fill: ${({ theme }) => theme.error};
-  }
-`;
-
 const ClosedCircleIcon: React.FC = () => {
-  return <StyledClosedCircle />;
+  return <ClosedCircle className="fill-klerosUIComponentsError" />;
 };
 export default ClosedCircleIcon;
diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx
index 02e4def..75e58ca 100644
--- a/web/src/components/StyledSkeleton.tsx
+++ b/web/src/components/StyledSkeleton.tsx
@@ -1,88 +1,30 @@
 import React from "react";
-import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import { responsiveSize } from "styles/responsiveSize";
 
-export const StyledSkeleton = styled(Skeleton)`
-  z-index: 0;
-`;
-
-const SkeletonRegistryCardContainer = styled.div`
-  width: 100%;
-`;
-
-const StyledSkeletonRegistryCard = styled(Skeleton)`
-  height: ${responsiveSize(270, 296)};
-`;
-
-const StyledSkeletonRegistryListItem = styled(Skeleton)`
-  height: 62px;
-`;
-
-const StyledSkeletonEvidenceCard = styled(Skeleton)`
-  height: 146px;
-  width: 76vw;
-`;
-
-const HistorySkeletonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const HistoryStatusSkeleton = styled(Skeleton)`
-  height: 24px;
-  width: 160px;
-`;
-const HistoryDateSkeleton = styled(Skeleton)`
-  height: 18px;
-  width: 100px;
-`;
-
-const SkeletonJustificationContainer = styled.div`
-  width: 100%;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-`;
-
-const SkeletonJustificationTitle = styled(Skeleton)`
-  width: ${responsiveSize(100, 160)};
-  height: 24px;
-  margin-left: auto;
-`;
-
-const SkeletonJustificationDescription = styled(Skeleton)`
-  height: 60px;
-`;
-
-const SkeletonJustificationAttachment = styled(Skeleton)`
-  width: ${responsiveSize(60, 80)};
-  height: 24px;
-`;
-
 export const HistorySkeletonCard = () => (
-  <HistorySkeletonContainer>
-    <HistoryStatusSkeleton />
-    <HistoryDateSkeleton />
-    <HistoryStatusSkeleton />
-    <HistoryDateSkeleton />
-  </HistorySkeletonContainer>
+  <div className="flex flex-col gap-2">
+    <Skeleton height={24} width={160} />
+    <Skeleton height={18} width={100} />
+    <Skeleton height={24} width={160} />
+    <Skeleton height={18} width={100} />
+  </div>
 );
 
 export const SkeletonRegistryCard = () => (
-  <SkeletonRegistryCardContainer>
-    <StyledSkeletonRegistryCard />
-  </SkeletonRegistryCardContainer>
+  <div className="w-full">
+    <Skeleton height={responsiveSize(270, 296)} />
+  </div>
 );
 
 export const SkeletonJustificationCard = () => (
-  <SkeletonJustificationContainer>
-    <SkeletonJustificationTitle />
-    <SkeletonJustificationDescription />
-    <SkeletonJustificationAttachment />
-  </SkeletonJustificationContainer>
+  <div className="flex flex-col gap-4 w-full">
+    <Skeleton className="ml-auto" height={24} width={responsiveSize(100, 160)} />
+    <Skeleton height={60} />
+    <Skeleton height={24} width={responsiveSize(60, 80)} />
+  </div>
 );
 
-export const SkeletonRegistryListItem = () => <StyledSkeletonRegistryListItem />;
+export const SkeletonRegistryListItem = () => <Skeleton height={62} />;
 
-export const SkeletonEvidenceCard = () => <StyledSkeletonEvidenceCard />;
+export const SkeletonEvidenceCard = () => <Skeleton height={146} width="76vw" />;
diff --git a/web/src/components/TruncatedText.tsx b/web/src/components/TruncatedText.tsx
index 5056fb5..894cebf 100644
--- a/web/src/components/TruncatedText.tsx
+++ b/web/src/components/TruncatedText.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledText = styled.h3`
-  font-weight: 400;
-  margin: 0px;
-`;
+import { cn } from "~src/utils";
 
 interface ITruncatedText {
   text: string;
@@ -19,7 +14,7 @@ interface ITruncatedText {
  */
 const TruncatedText: React.FC<ITruncatedText> = ({ text, maxLength, className }) => {
   const truncatedText = text?.length <= maxLength ? text : text?.slice(0, maxLength) + "…";
-  return <StyledText {...{ className }}>{truncatedText}</StyledText>;
+  return <div className={cn("text-klerosUIComponentsPrimaryText font-normal m-0", className)}>{truncatedText}</div>;
 };
 
 export default TruncatedText;
diff --git a/web/src/components/WithHelpTooltip.tsx b/web/src/components/WithHelpTooltip.tsx
index 395b0ea..4fa564f 100644
--- a/web/src/components/WithHelpTooltip.tsx
+++ b/web/src/components/WithHelpTooltip.tsx
@@ -1,29 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Tooltip } from "@kleros/ui-components-library";
-import _HelpIcon from "svgs/menu-icons/help.svg";
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const HelpIcon = styled(_HelpIcon)`
-  display: flex;
-  align-items: center;
-  height: 12px;
-  width: 12px;
-  fill: ${({ theme }) => theme.secondaryText};
-  margin: 0 0 0 8px;
-
-  ${landscapeStyle(
-    () => css`
-      height: 14px;
-      width: 14px;
-    `
-  )}
-`;
+import HelpIcon from "svgs/menu-icons/help.svg";
 
 interface IWithHelpTooltip {
   tooltipMsg: string;
@@ -32,12 +9,12 @@ interface IWithHelpTooltip {
 }
 
 const WithHelpTooltip: React.FC<IWithHelpTooltip> = ({ tooltipMsg, children, place }) => (
-  <Container>
+  <div className="flex items-center">
     {children}
     <Tooltip small text={tooltipMsg} {...{ place }}>
-      <HelpIcon />
+      <HelpIcon className="flex items-center fill-klerosUIComponentsSecondaryText ml-2 w-3 h-3 lg:w-3.5 lg:h-3.5" />
     </Tooltip>
-  </Container>
+  </div>
 );
 
 export default WithHelpTooltip;
diff --git a/web/src/context/StyledComponentsProvider.tsx b/web/src/context/StyledComponentsProvider.tsx
deleted file mode 100644
index 7d11c34..0000000
--- a/web/src/context/StyledComponentsProvider.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { useLocalStorage } from "hooks/useLocalStorage";
-import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
-import { GlobalStyle } from "styles/global-style";
-import { lightTheme, darkTheme } from "styles/themes";
-
-const StyledComponentsProvider: React.FC<{
-  children: React.ReactNode;
-}> = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage<string>("theme", "dark");
-  const toggleTheme = () => {
-    if (theme === "light") setTheme("dark");
-    else setTheme("light");
-  };
-  return (
-    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
-      <ToggleThemeProvider {...{ theme, toggleTheme }}>
-        <GlobalStyle />
-        {children}
-      </ToggleThemeProvider>
-    </ThemeProvider>
-  );
-};
-
-export default StyledComponentsProvider;
diff --git a/web/src/context/ThemeProvider.tsx b/web/src/context/ThemeProvider.tsx
new file mode 100644
index 0000000..9530cce
--- /dev/null
+++ b/web/src/context/ThemeProvider.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
+
+type Theme = "light" | "dark";
+
+const ThemeProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage<Theme>("theme", "dark");
+
+  const toggleTheme = () => {
+    if (theme === "light") setTheme("dark");
+    else setTheme("light");
+  };
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [theme]);
+
+  return <ToggleThemeProvider {...{ theme, toggleTheme }}>{children}</ToggleThemeProvider>;
+};
+
+export default ThemeProvider;
diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx
index fff5fe5..daf99b9 100644
--- a/web/src/context/Web3Provider.tsx
+++ b/web/src/context/Web3Provider.tsx
@@ -7,8 +7,6 @@ import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import { isProductionDeployment } from "consts/index";
 
-import { lightTheme } from "styles/themes";
-
 const alchemyApiKey = import.meta.env.ALCHEMY_API_KEY ?? "";
 const isProduction = isProductionDeployment();
 
@@ -61,7 +59,7 @@ createAppKit({
   defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
   projectId,
   themeVariables: {
-    "--w3m-color-mix": lightTheme.primaryPurple,
+    "--w3m-color-mix": "#4D00B4",
     "--w3m-color-mix-strength": 20,
     // overlay portal is at 9999
     "--w3m-z-index": 10000,
diff --git a/web/src/global.css b/web/src/global.css
new file mode 100644
index 0000000..45f5410
--- /dev/null
+++ b/web/src/global.css
@@ -0,0 +1,187 @@
+@import "../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
+@tailwind utilities;
+@source "../../node_modules/@kleros/ui-components-library";
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-white: #ffffff;
+  --color-white-73: #ffffffba;
+  --color-black: #000000;
+  --color-light-blue-65: #2a1260a6;
+  --color-light-grey: #f0f0f0;
+  --color-dark-purple: #220050;
+  --color-violet-purple: #6a1dcd;
+  --color-lavender-purple: #bb72ff;
+  --color-pale-cyan: #acffff;
+  --color-lime-green: #f3ffd9;
+  --color-white-low-opacity-subtle: #ffffff0d;
+  --color-white-low-opacity-strong: #ffffff26;
+  --color-black-low-opacity: #00000080;
+  --color-primary-text-73: color-mix(in srgb, var(--klerosUIComponentsPrimaryText) 73%, transparent);
+  --color-skeleton-bg: #ebebeb;
+  --color-skeleton-highlight: #f5f5f5;
+  --max-width-landscape: 87.5rem;
+  --shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
+  --leading-18px: 18px;
+}
+
+.dark {
+  --color-skeleton-bg: #3a2270;
+  --color-skeleton-highlight: #3e307c;
+}
+
+:root {
+  --toastify-color-info: var(--klerosUIComponentsPrimaryBlue);
+  --toastify-color-success: var(--klerosUIComponentsSuccess);
+  --toastify-color-warning: var(--klerosUIComponentsWarning);
+  --toastify-color-error: var(--klerosUIComponentsError);
+}
+
+.react-loading-skeleton {
+  z-index: 0;
+  --base-color: var(--color-skeleton-bg);
+  --highlight-color: var(--color-skeleton-highlight);
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+  background-color: var(--klerosUIComponentsLightBlue);
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--klerosUIComponentsPrimaryBlue);
+  outline-offset: 2px;
+}
+
+h1 {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+h2 {
+  margin: 0 0 16px 0;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+h3 {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+p {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+textarea {
+  font-family: "Open Sans";
+  font-size: 14px;
+}
+
+small {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+label {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--klerosUIComponentsSecondaryText);
+}
+
+a {
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  color: var(--klerosUIComponentsPrimaryBlue);
+}
+
+hr {
+  opacity: 1;
+  border: 1px solid var(--klerosUIComponentsStroke);
+}
+
+svg,
+img {
+  display: inline-block;
+  vertical-align: middle;
+  visibility: visible;
+}
+
+ul li {
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+.os-theme-dark {
+  --os-handle-bg: var(--color-violet-purple);
+  --os-handle-bg-hover: var(--klerosUIComponentsSecondaryPurple);
+  --os-handle-bg-active: var(--color-lavender-purple);
+}
+
+.Toastify__toast-container.Toastify__toast-container {
+  top: unset;
+  padding-top: 20px;
+}
+
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-violet-purple);
+  border-radius: 10px;
+  transition:
+    opacity 0.15s,
+    background-color 0.15s,
+    border-color 0.15s,
+    width 0.15s;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--klerosUIComponentsSecondaryPurple);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: var(--color-lavender-purple);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-violet-purple) transparent;
+}
diff --git a/web/src/hooks/useIsDesktop.tsx b/web/src/hooks/useIsDesktop.tsx
index 1b0928f..89e9477 100644
--- a/web/src/hooks/useIsDesktop.tsx
+++ b/web/src/hooks/useIsDesktop.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 import { useWindowSize } from "react-use";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+import { LG_BREAKPOINT } from "~src/styles/breakpoints";
 
 const useIsDesktop = () => {
   const { width } = useWindowSize();
-  return useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
+  return useMemo(() => width > LG_BREAKPOINT, [width]);
 };
 
 export default useIsDesktop;
diff --git a/web/src/hooks/useToggleThemeContext.tsx b/web/src/hooks/useToggleThemeContext.tsx
index 9c2017d..610bb46 100644
--- a/web/src/hooks/useToggleThemeContext.tsx
+++ b/web/src/hooks/useToggleThemeContext.tsx
@@ -12,11 +12,9 @@ export const ToggleThemeProvider: React.FC<{
   theme: string;
   toggleTheme: () => void;
 }> = ({ theme, toggleTheme, children }) => {
-  return (
-    <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>
-  );
+  return <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>;
 };
 
-export const useToggleTheme: () => [string, () => void] = () => {
+export const useTheme: () => [string, () => void] = () => {
   return useContext(Context);
 };
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 08bcb91..cc2ad2d 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,11 +1,9 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./app";
-import Modal from "react-modal";
 import { HashRouter } from "react-router-dom";
 
 const container = document.getElementById("app");
-Modal.setAppElement(container!);
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
@@ -13,4 +11,4 @@ root.render(
       <App />
     </HashRouter>
   </React.StrictMode>
-);
\ No newline at end of file
+);
diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx
index bebb00c..892bb69 100644
--- a/web/src/layout/Footer/index.tsx
+++ b/web/src/layout/Footer/index.tsx
@@ -1,79 +1,39 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { landscapeStyle } from "styles/landscapeStyle";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
+import clsx from "clsx";
 
 import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
 
 import { socialmedia } from "consts/socialmedia";
 
 import LightButton from "components/LightButton";
-import { ExternalLink } from "components/ExternalLink";
-
-const Container = styled.div`
-  height: 114px;
-  width: 100%;
-  background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 8px;
-  gap: 16px;
-
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-      flex-direction: row;
-      justify-content: space-between;
-      padding: 0 32px;
-    `
-  )}
-`;
-
-const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
-  ${hoverShortTransitionTiming}
-  min-height: 24px;
-
-  path {
-    fill: ${({ theme }) => theme.white}BF;
-  }
-
-  :hover path {
-    fill: ${({ theme }) => theme.white};
-  }
-`;
-
-const StyledSocialMedia = styled.div`
-  display: flex;
-
-  .button-svg {
-    margin-right: 0;
-  }
-`;
 
 const SecuredByKleros: React.FC = () => (
-  <ExternalLink to="https://kleros.io" target="_blank" rel="noreferrer">
-    <StyledSecuredByKlerosLogo />
-  </ExternalLink>
+  <a href="https://kleros.io" target="_blank" rel="noopener noreferrer">
+    <SecuredByKlerosLogo className="min-h-6 transition duration-100 [&_path]:fill-white/75 hover:[&_path]:fill-white" />
+  </a>
 );
 
 const SocialMedia = () => (
-  <StyledSocialMedia>
+  <div className="flex [&_.button-svg]:mr-0">
     {Object.values(socialmedia).map((site, i) => (
-      <ExternalLink key={site.url} to={site.url} target="_blank" rel="noreferrer">
+      <a key={site.url} href={site.url} target="_blank" rel="noopener noreferrer">
         <LightButton Icon={site.icon} text="" />
-      </ExternalLink>
+      </a>
     ))}
-  </StyledSocialMedia>
+  </div>
 );
 
 const Footer: React.FC = () => (
-  <Container>
+  <div
+    className={clsx(
+      "flex flex-col justify-center items-center gap-4 p-2 w-full h-[114px]",
+      "bg-klerosUIComponentsPrimaryPurple dark:bg-klerosUIComponentsLightBlue",
+      "lg:h-16 lg:flex-row lg:justify-between lg:px-8"
+    )}
+  >
     <SecuredByKleros />
     <SocialMedia />
-  </Container>
+  </div>
 );
 
 export default Footer;
diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx
index cf30e78..d1877bb 100644
--- a/web/src/layout/Header/DesktopHeader.tsx
+++ b/web/src/layout/Header/DesktopHeader.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled, { css } from "styled-components";
 
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
@@ -9,7 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import ConnectWallet from "components/ConnectWallet";
@@ -24,61 +22,6 @@ import Menu from "./navbar/Menu";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
 
-const Container = styled.div`
-  display: none;
-  position: absolute;
-  height: 64px;
-
-  ${landscapeStyle(
-    () => css`
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      position: relative;
-    `
-  )};
-`;
-
-const LeftSide = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-const MiddleSide = styled.div`
-  display: flex;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-`;
-
-const RightSide = styled.div`
-  display: flex;
-  gap: ${responsiveSize(4, 8)};
-
-  margin-left: 8px;
-  canvas {
-    width: 20px;
-  }
-`;
-
-const LightButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
-  fill: ${({ theme }) => theme.white} !important;
-`;
-
-const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>`
-  label {
-    color: ${({ theme }) => theme.white};
-    cursor: pointer;
-  }
-`;
-
 const DesktopHeader: React.FC = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
@@ -89,34 +32,34 @@ const DesktopHeader: React.FC = () => {
 
   return (
     <>
-      <Container>
-        <LeftSide>
-          <LightButtonContainer>
+      <div className="hidden h-16 lg:flex lg:items-center lg:justify-between lg:w-full lg:relative">
+        <div className="flex gap-2">
+          <div className="flex items-center">
             <LightButton
               text=""
               onClick={() => {
                 toggleIsDappListOpen();
               }}
-              Icon={StyledKlerosSolutionsIcon}
+              Icon={KlerosSolutionsIcon}
             />
-          </LightButtonContainer>
+          </div>
           <Logo />
-        </LeftSide>
+        </div>
 
-        <MiddleSide>
+        <div className="flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Explore />
-        </MiddleSide>
+        </div>
 
-        <RightSide>
-          <ConnectWalletContainer
-            {...{ isConnected, isDefaultChain }}
+        <div className="flex ml-2 [&_canvas]:w-5" style={{ gap: responsiveSize(4, 8) }}>
+          <div
+            className="[&_label]:cursor-pointer [&_label]:text-white/80"
             onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
           >
             <ConnectWallet />
-          </ConnectWalletContainer>
+          </div>
           <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
-        </RightSide>
-      </Container>
+        </div>
+      </div>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <OverlayPortal>
           <Overlay>
diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx
index 243ffa2..04a08b2 100644
--- a/web/src/layout/Header/Logo.tsx
+++ b/web/src/layout/Header/Logo.tsx
@@ -1,38 +1,16 @@
 import React from "react";
-import styled from "styled-components";
-
-import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { Link } from "react-router-dom";
 
 import CurateLogo from "svgs/header/curate.svg";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 16px;
-`;
-
-const StyledCurateLogo = styled(CurateLogo)`
-  ${hoverShortTransitionTiming}
-  max-height: 48px;
-  width: auto;
-
-  &:hover {
-    path {
-      fill: ${({ theme }) => theme.white}BF;
-    }
-  }
-`;
-
 const Logo: React.FC = () => (
-  <Container>
+  <div className="flex flex-row items-center gap-4">
     {" "}
     <Link to={"/"}>
-      <StyledCurateLogo />
+      <CurateLogo className="transition duration-100 max-h-12 w-auto hover:[&_path]:fill-white/75" />
     </Link>
-  </Container>
+  </div>
 );
 
 export default Logo;
diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx
index 280881c..5296bce 100644
--- a/web/src/layout/Header/MobileHeader.tsx
+++ b/web/src/layout/Header/MobileHeader.tsx
@@ -1,39 +1,14 @@
 import React, { useContext, useMemo, useRef } from "react";
-import styled, { css } from "styled-components";
 
 import { useClickAway, useToggle } from "react-use";
 
 import HamburgerIcon from "svgs/header/hamburger.svg";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 import LightButton from "components/LightButton";
 
 import Logo from "./Logo";
 import NavBar from "./navbar";
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 64px;
-
-  ${landscapeStyle(
-    () => css`
-      display: none;
-    `
-  )}
-`;
-
-const StyledLightButton = styled(LightButton)`
-  padding: 0 !important;
-
-  .button-svg {
-    margin-right: 0px;
-  }
-`;
-
 const OpenContext = React.createContext({
   isOpen: false,
   toggleIsOpen: () => {
@@ -51,13 +26,13 @@ const MobileHeader = () => {
   useClickAway(containerRef, () => toggleIsOpen(false));
   const memoizedContext = useMemo(() => ({ isOpen, toggleIsOpen }), [isOpen, toggleIsOpen]);
   return (
-    <Container ref={containerRef}>
+    <div ref={containerRef} className="flex items-center justify-between w-full h-16 lg:hidden">
       <OpenContext.Provider value={memoizedContext}>
         <Logo />
         <NavBar />
-        <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
+        <LightButton className="p-0 [&_.button-svg]:mr-0" text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
       </OpenContext.Provider>
-    </Container>
+    </div>
   );
 };
 export default MobileHeader;
diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index 2f926ab..e70ffd6 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
 
 import { StatusBanner } from "subgraph-status";
 
@@ -8,46 +7,18 @@ import { getGraphqlUrl } from "utils/getGraphqlUrl";
 import DesktopHeader from "./DesktopHeader";
 import MobileHeader from "./MobileHeader";
 
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  position: sticky;
-  z-index: 10;
-  top: 0;
-  width: 100%;
-  background-color: ${({ theme }) => (theme.name === "dark" ? `${theme.lightBlue}A6` : theme.primaryPurple)};
-  backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")};
-  -webkit-backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")}; // Safari support
-`;
-
-const HeaderContainer = styled.div`
-  width: 100%;
-  padding: 0px 24px;
-`;
-
-const StyledBanner = styled(StatusBanner)`
-  position: sticky !important;
-  .status-text {
-    h2 {
-      margin: 0;
-      line-height: 24px;
-    }
-  }
-`;
-
 const Header: React.FC = () => {
-  const theme = useTheme();
-
   return (
-    <Container>
-      <StyledBanner
+    <div className="flex flex-wrap sticky z-10 top-0 w-full bg-klerosUIComponentsPrimaryPurple dark:bg-light-blue-65 backdrop-blur-none dark:backdrop-blur-md">
+      <StatusBanner
+        className="sticky! [&_.status-text_h2]:m-0 [&_.status-text_h2]:leading-6"
         autoHide
         watcherOptions={{ threshold: 5000, interval: 60_000 }} // 5000 blocks threshold, 60 sec interval check
         theme={{
           colors: {
-            main: theme.whiteBackground,
-            primary: theme.primaryText,
-            secondary: theme.secondaryText,
+            main: "var(--klerosUIComponentsWhiteBackground)",
+            primary: "var(--klerosUIComponentsPrimaryText)",
+            secondary: "var(--klerosUIComponentsSecondaryText)",
           },
         }}
         subgraphs={[
@@ -55,11 +26,11 @@ const Header: React.FC = () => {
           { name: "Kleros Core", url: getGraphqlUrl(true) },
         ]}
       />
-      <HeaderContainer>
+      <div className="w-full px-6">
         <DesktopHeader />
         <MobileHeader />
-      </HeaderContainer>
-    </Container>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx
index 5c00e38..4b8fdf0 100644
--- a/web/src/layout/Header/navbar/DappList.tsx
+++ b/web/src/layout/Header/navbar/DappList.tsx
@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import styled, { css } from "styled-components";
 
 import { useClickAway } from "react-use";
 
@@ -11,65 +10,10 @@ import Court from "svgs/icons/kleros.svg";
 import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
 
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import Product from "./Product";
-
-const Container = styled.div`
-  display: flex;
-  position: absolute;
-  max-height: 340px;
-  top: 5%;
-  left: 50%;
-  transform: translate(-50%);
-  z-index: 1;
-  flex-direction: column;
-  align-items: center;
-
-  width: 86vw;
-  max-width: 480px;
-  border-radius: 3px;
-  border: 1px solid ${({ theme }) => theme.stroke};
-  background-color: ${({ theme }) => theme.whiteBackground};
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
-
-  svg {
-    visibility: visible;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      margin-top: 64px;
-      top: 0;
-      left: 0;
-      right: auto;
-      transform: none;
-      width: ${responsiveSize(300, 480)};
-      max-height: 80vh;
-    `
-  )}
-`;
-
-const Header = styled.h1`
-  padding-top: 24px;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 32.68px;
-`;
-
-const ItemsDiv = styled.div`
-  display: grid;
-  overflow-y: auto;
-  padding: 4px ${responsiveSize(8, 24)} 16px;
-  row-gap: 8px;
-  column-gap: 2px;
-  justify-items: center;
-  max-width: 480px;
-  min-width: 300px;
-  width: ${responsiveSize(300, 480)};
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-`;
+import clsx from "clsx";
 
 const ITEMS = [
   {
@@ -138,19 +82,34 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
+const landscapeWidthCalc = "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
+
 const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsDappListOpen());
 
   return (
-    <Container ref={containerRef}>
-      <Header>Kleros Solutions</Header>
-      <ItemsDiv>
+    <div
+      ref={containerRef}
+      className={clsx(
+        "flex flex-col items-center absolute max-h-[340px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 w-[86vw] max-w-[480px]",
+        "border border-klerosUIComponentsStroke rounded-[3px]",
+        "bg-klerosUIComponentsWhiteBackground shadow-custom",
+        "[&_svg]:visible",
+        "lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]",
+        landscapeWidthCalc
+      )}
+    >
+      <h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>
+      <div
+        className="grid overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px] grid-cols-[repeat(auto-fit,minmax(100px,1fr))]"
+        style={{ padding: `4px ${responsiveSize(8, 24)} 16px`, width: responsiveSize(300, 480) }}
+      >
         {ITEMS.map((item) => {
           return <Product {...item} key={item.text} />;
         })}
-      </ItemsDiv>
-    </Container>
+      </div>
+    </div>
   );
 };
 export default DappList;
diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx
index 1be2281..f2d4db2 100644
--- a/web/src/layout/Header/navbar/Debug.tsx
+++ b/web/src/layout/Header/navbar/Debug.tsx
@@ -1,22 +1,16 @@
 import React from "react";
-import styled from "styled-components";
 // import { useSortitionModulePhase } from "hooks/contracts/generated";
 import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index";
 
-const Container = styled.div`
-  label,
-  a {
-    font-family: "Roboto Mono", monospace;
-    line-height: 10px;
-    font-size: 10px;
-    color: ${({ theme }) => theme.stroke};
-  }
-`;
-
 const Version = () => (
-  <label>
+  <label className="text-[10px] leading-2.5 text-klerosUIComponentsStroke font-[Roboto_Mono,monospace]">
     v{RELEASE_VERSION}{" "}
-    <a href={GIT_URL} target="_blank" rel="noreferrer">
+    <a
+      className="text-inherit text-[10px] leading-2.5 font-[Roboto_Mono,monospace]"
+      href={GIT_URL}
+      target="_blank"
+      rel="noreferrer"
+    >
       #{GIT_HASH}
     </a>
     {GIT_BRANCH && GIT_BRANCH !== "HEAD" && ` ${GIT_BRANCH}`}
@@ -49,10 +43,10 @@ enum Phases {
 
 const Debug: React.FC = () => {
   return (
-    <Container>
+    <div>
       <Version />
       {/* <Phase /> */}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx
index 18c8a96..51a5199 100644
--- a/web/src/layout/Header/navbar/Explore.tsx
+++ b/web/src/layout/Header/navbar/Explore.tsx
@@ -1,57 +1,11 @@
 import React, { useMemo } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Link, useLocation } from "react-router-dom";
 import { useOpenContext } from "../MobileHeader";
 import { MAIN_CURATE_ADDRESS } from "consts/index";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
-import { isUndefined } from "utils/index";
+import { cn, isUndefined } from "utils/index";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-    `
-  )};
-`;
-
-const Title = styled.h1`
-  display: block;
-  margin-bottom: 8px;
-
-  ${landscapeStyle(
-    () => css`
-      display: none;
-    `
-  )};
-`;
-
-const StyledLink = styled(Link)<{ isActive: boolean; isMobileNavbar?: boolean }>`
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  font-size: 16px;
-  color: ${({ isActive, theme }) => (isActive ? theme.primaryText : `${theme.primaryText}BA`)};
-  font-weight: ${({ isActive, isMobileNavbar }) => (isMobileNavbar && isActive ? "600" : "normal")};
-  padding: 8px 8px 8px 0;
-  border-radius: 7px;
-
-  &:hover {
-    color: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : theme.white)} !important;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      color: ${({ isActive, theme }) => (isActive ? theme.white : `${theme.white}BA`)};
-      padding: 16px 8px;
-    `
-  )};
-`;
-
 interface IExplore {
   isMobileNavbar?: boolean;
 }
@@ -60,6 +14,8 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
   const location = useLocation();
   const { toggleIsOpen } = useOpenContext();
   const { data: mainCurate } = useRegistryDetailsQuery(MAIN_CURATE_ADDRESS);
+  const isActive = (to: string) =>
+    to === "/" ? location.pathname === "/" : location.pathname.split("/")[1] === to.split("/")[1];
 
   const links = useMemo(
     () => [
@@ -74,19 +30,25 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
   );
 
   return (
-    <Container>
-      <Title>Explore</Title>
+    <div className="flex flex-col lg:flex-row">
+      <h1 className="block mb-2 lg:hidden">Explore</h1>
       {links.map(({ to, text, identifier }) => (
-        <StyledLink
+        <Link
           key={text}
+          className={cn(
+            "flex items-center p-2 pl-0 rounded-[7px] lg:py-4 lg:px-2",
+            "no-underline text-base leading-tight",
+            isActive(to) ? "text-klerosUIComponentsPrimaryText lg:text-white" : "text-primary-text-73 lg:text-white-73",
+            isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white",
+            isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"
+          )}
           onClick={toggleIsOpen}
-          isActive={to === "/" ? location.pathname === "/" : location.pathname.split("/")[1] === to.split("/")[1]}
-          {...{ to, isMobileNavbar }}
+          {...{ to }}
         >
           {text}
-        </StyledLink>
+        </Link>
       ))}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx
index d9cb12d..4278c42 100644
--- a/web/src/layout/Header/navbar/Menu/Help.tsx
+++ b/web/src/layout/Header/navbar/Menu/Help.tsx
@@ -1,6 +1,4 @@
 import React, { useRef } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 
 import { useClickAway } from "react-use";
 
@@ -12,65 +10,7 @@ import Telegram from "svgs/socialmedia/telegram.svg";
 
 import Debug from "../Debug";
 import { IHelp } from "../index";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  max-height: 80vh;
-  overflow-y: auto;
-  width: 86vw;
-  max-width: 444px;
-  top: 5%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-  padding: 12px 12px 24px 12px;
-  border: 1px solid ${({ theme }) => theme.stroke};
-  background-color: ${({ theme }) => theme.whiteBackground};
-  border-radius: 3px;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
-
-  ${landscapeStyle(
-    () => css`
-      margin-top: 64px;
-      width: 260px;
-      top: 0;
-      right: 0;
-      left: auto;
-      transform: none;
-    `
-  )}
-`;
-
-const ListItem = styled.a`
-  display: flex;
-  gap: 8px;
-  padding: 12px 8px;
-  cursor: pointer;
-  transition: transform 0.2s;
-
-  small {
-    font-size: 16px;
-    font-weight: 400;
-  }
-
-  :hover {
-    transform: scale(1.02);
-  }
-
-  :hover small {
-    transition: color 0.1s;
-    color: ${({ theme }) => theme.secondaryPurple};
-  }
-`;
-
-const Icon = styled.svg`
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  fill: ${({ theme }) => theme.secondaryPurple};
-`;
+import clsx from "clsx";
 
 const ITEMS = [
   {
@@ -106,15 +46,34 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
 
   return (
     <>
-      <Container ref={containerRef}>
+      <div
+        ref={containerRef}
+        className={clsx(
+          "flex flex-col absolute max-h-[80vh] overflow-y-auto w-[86vw] max-w-[444px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 p-3 pb-6",
+          "border border-klerosUIComponentsStroke rounded-[3px]",
+          "bg-klerosUIComponentsWhiteBackground shadow-custom",
+          "lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none lg:translate-x-0 lg:max-w-[260px]"
+        )}
+      >
         {ITEMS.map((item, index) => (
-          <ListItem href={item.url} key={item.text} target="_blank">
-            <Icon as={item.Icon} />
-            <small>{item.text}</small>
-          </ListItem>
+          <a
+            href={item.url}
+            key={item.text}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={clsx(
+              "flex gap-2 py-3 px-2 cursor-pointer transition-transform duration-200",
+              "hover:scale-[1.02] group"
+            )}
+          >
+            <item.Icon className="inline-block w-4 h-4 fill-klerosUIComponentsSecondaryPurple" />
+            <small className="text-base leading-18px font-normal transition-colors duration-100 group-hover:text-klerosUIComponentsSecondaryPurple">
+              {item.text}
+            </small>
+          </a>
         ))}
         <Debug />
-      </Container>
+      </div>
     </>
   );
 };
diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
index b1ff04a..f2f1a85 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
@@ -1,80 +1,9 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { useAccount, useDisconnect } from "wagmi";
 import { Button } from "@kleros/ui-components-library";
 import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
 import { EnsureChain } from "components/EnsureChain";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: 12px;
-`;
-
-const StyledChainContainer = styled.div`
-  display: flex;
-  height: 34px;
-  gap: 0.5rem;
-  justify-content: center;
-  align-items: center;
-  :before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.success};
-  }
-  > label {
-    color: ${({ theme }) => theme.success};
-  }
-`;
-
-const StyledAddressContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  > label {
-    color: ${({ theme }) => theme.primaryText};
-    font-size: 16px;
-    font-weight: 600;
-  }
-`;
-
-const StyledAvatarContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 12px;
-`;
-
-const StyledButton = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-`;
-
-const EnsureChainContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-`;
-
-const UserContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const StyledA = styled.a`
-  text-decoration: none;
-  label {
-    cursor: pointer;
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
 export const DisconnectWalletButton: React.FC = () => {
   const { disconnect } = useDisconnect();
   return <Button text={`Disconnect`} onClick={() => disconnect()} />;
@@ -88,30 +17,35 @@ const General: React.FC = () => {
   }, [address, chain]);
 
   return (
-    <EnsureChainContainer>
+    <div className="flex justify-center p-4">
       <EnsureChain>
-        <Container>
+        <div className="flex flex-col justify-center mt-3">
           {address && (
-            <UserContainer>
-              <StyledAvatarContainer>
+            <div className="flex flex-col gap-3">
+              <div className="flex justify-center mt-3">
                 <IdenticonOrAvatar size="48" />
-              </StyledAvatarContainer>
-              <StyledAddressContainer>
-                <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
+              </div>
+              <div className="flex justify-center [&>label]:text-base [&>label]:font-semibold [&>label]:text-klerosUIComponentsPrimaryText">
+                <a
+                  href={addressExplorerLink}
+                  rel="noreferrer"
+                  target="_blank"
+                  className="no-underline hover:underline [&_label]:cursor-pointer [&_label]:text-klerosUIComponentsPrimaryBlue"
+                >
                   <AddressOrName />
-                </StyledA>
-              </StyledAddressContainer>
-              <StyledChainContainer>
+                </a>
+              </div>
+              <div className="flex h-[34px] gap-2 justify-center items-center before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess [&>label]:text-klerosUIComponentsSuccess">
                 <ChainDisplay />
-              </StyledChainContainer>
-              <StyledButton>
+              </div>
+              <div className="flex justify-center mt-4">
                 <DisconnectWalletButton />
-              </StyledButton>
-            </UserContainer>
+              </div>
+            </div>
           )}
-        </Container>
+        </div>
       </EnsureChain>
-    </EnsureChainContainer>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
index 5e8d652..f9a746d 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
@@ -1,60 +1,11 @@
 import React, { useCallback } from "react";
-import styled from "styled-components";
 
 import { Button } from "@kleros/ui-components-library";
 
 import HourglassIcon from "svgs/icons/hourglass.svg";
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-
-const InfoContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  padding-top: 16px;
-  margin-top: 32px;
-  border-top: 1px solid ${({ theme }) => theme.stroke};
-`;
-
-const InfoInnerContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 8px;
-`;
-
-const InfoTitle = styled.h3`
-  margin: 0;
-`;
-const InfoSubtitle = styled.label``;
-
-const StyledHourglassIcon = styled(HourglassIcon)`
-  width: 32px;
-  height: 32px;
-  fill: ${({ theme }) => theme.primaryBlue};
-`;
-
-const StyledButton = styled(Button)`
-  display: inline-block;
-  background-color: transparent;
-  padding: 0;
-  .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-weight: 400;
-    font-size: 14px;
-  }
-  .button-svg {
-    path {
-      fill: ${({ theme }) => theme.primaryBlue};
-    }
-  }
-  :focus,
-  :hover {
-    background-color: transparent;
-  }
-`;
+import clsx from "clsx";
 
 interface IEmailInfo {
   toggleIsSettingsOpen: () => void;
@@ -84,16 +35,25 @@ const EmailVerificationInfo: React.FC<IEmailInfo> = ({ toggleIsSettingsOpen }) =
   );
 
   return userExists && !user?.isEmailVerified ? (
-    <InfoContainer>
-      <StyledHourglassIcon />
-      <InfoInnerContainer>
-        <InfoTitle>Email Verification Pending</InfoTitle>
-        <InfoSubtitle>
+    <div className="flex flex-row items-center gap-4 w-full pt-4 mt-8 border-t border-klerosUIComponentsStroke">
+      <HourglassIcon width={32} height={32} className="fill-klerosUIComponentsPrimaryBlue" />
+      <div className="flex flex-col items-start gap-2">
+        <h3 className="m-0">Email Verification Pending</h3>
+        <label>
           We sent you a verification email. Please, verify it.
-          <br /> Didn’t receive the email? <StyledButton text="Resend it" onClick={resendVerificationEmail} />
-        </InfoSubtitle>
-      </InfoInnerContainer>
-    </InfoContainer>
+          <br /> Didn’t receive the email?{" "}
+          <Button
+            variant="secondary"
+            className={clsx(
+              "inline-block bg-transparent p-0 border-none focus:bg-transparent hover:bg-transparent",
+              "[&_.button-text]:text-sm [&_.button-text]:font-normal"
+            )}
+            text="Resend it"
+            onClick={resendVerificationEmail}
+          />
+        </label>
+      </div>
+    </div>
   ) : (
     <></>
   );
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
index e16a7ad..608a49b 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
@@ -1,22 +1,8 @@
 import React, { Dispatch, SetStateAction, useMemo, useEffect } from "react";
-import styled from "styled-components";
 
-import { Field } from "@kleros/ui-components-library";
+import { TextField } from "@kleros/ui-components-library";
 import { isEmpty } from "src/utils";
 
-const StyledLabel = styled.label`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-`;
-
-const StyledField = styled(Field)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
-
 interface IForm {
   contactLabel: string;
   contactPlaceholder: string;
@@ -42,11 +28,6 @@ const FormContact: React.FC<IForm> = ({
     setContactIsValid(validator.test(contactInput));
   }, [contactInput, setContactIsValid, validator]);
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    setContactInput(event.target.value);
-  };
-
   const fieldVariant = useMemo(() => {
     if (isEmpty(contactInput) || !isEditing) {
       return undefined;
@@ -56,11 +37,15 @@ const FormContact: React.FC<IForm> = ({
 
   return (
     <>
-      <StyledLabel>{contactLabel}</StyledLabel>
-      <StyledField
+      <label htmlFor="contact-input" className="flex mb-[10px]">
+        {contactLabel}
+      </label>
+      <TextField
+        className="items-center w-full [&_input]:text-sm"
+        id="contact-input"
         variant={fieldVariant}
         value={contactInput}
-        onChange={handleInputChange}
+        onChange={(value) => setContactInput(value)}
         placeholder={contactPlaceholder}
       />
     </>
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
index b392280..ce12065 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 
 import { useAccount } from "wagmi";
 
@@ -19,33 +18,6 @@ import { timeLeftUntil } from "utils/date";
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-const FormContainer = styled.form`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: 0 ${responsiveSize(12, 32, 300)};
-  padding-bottom: 16px;
-  gap: 16px;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: end;
-`;
-
-const FormContactContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledInfoCard = styled(InfoCard)`
-  width: fit-content;
-  font-size: 14px;
-  margin-bottom: 8px;
-  word-wrap: break-word;
-`;
-
 const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const [emailInput, setEmailInput] = useState<string>("");
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
@@ -100,7 +72,11 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   };
 
   return (
-    <FormContainer onSubmit={handleSubmit}>
+    <form
+      className="w-full relative flex flex-col py-0 pb-4 gap-4"
+      style={{ paddingInline: responsiveSize(12, 32, 300) }}
+      onSubmit={handleSubmit}
+    >
       {/* <FormContactContainer>
         <FormContact
           contactLabel="Telegram"
@@ -113,7 +89,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
           isEditing={isEditingTelegram}
         />
       </FormContactContainer> */}
-      <FormContactContainer>
+      <div className="flex flex-col">
         <FormContact
           contactLabel="Email"
           contactPlaceholder="your.email@email.com"
@@ -124,20 +100,24 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
           validator={EMAIL_REGEX}
           isEditing={isEditingEmail}
         />
-      </FormContactContainer>
+      </div>
       {!isEmailUpdateable ? (
-        <StyledInfoCard msg={`You can update email again ${timeLeftUntil(user?.emailUpdateableAt!)}`} />
+        <InfoCard
+          className="w-fit text-sm mb-2 wrap-break-word"
+          msg={`You can update email again ${timeLeftUntil(user?.emailUpdateableAt!)}`}
+        />
       ) : null}
-      <ButtonContainer>
+      <div className="flex justify-end">
         <Button
+          type="submit"
           text="Save"
-          disabled={
+          isDisabled={
             !isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser || !isEmailUpdateable
           }
         />
-      </ButtonContainer>
+      </div>
       <EmailVerificationInfo toggleIsSettingsOpen={toggleIsSettingsOpen} />
-    </FormContainer>
+    </form>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
index 1209048..63c2bd8 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
@@ -1,54 +1,32 @@
 import React from "react";
-import styled from "styled-components";
 import { ISettings } from "../../../index";
 
 import FormContactDetails from "./FormContactDetails";
 import { EnsureChain } from "components/EnsureChain";
 import EnsureAuth from "components/EnsureAuth";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-`;
-
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.primaryText};
-  margin-top: 16px;
-  margin-bottom: 12px;
-`;
-
 const HeaderNotifs: React.FC = () => {
-  return <HeaderContainer>Contact Details</HeaderContainer>;
+  return (
+    <div className="flex justify-center text-base font-semibold mt-4 mb-3 text-klerosUIComponentsPrimaryText">
+      Contact Details
+    </div>
+  );
 };
 
-const EnsureChainContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding-top: 16px;
-  padding-bottom: 16px;
-`;
-
 const NotificationSettings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   return (
-    <EnsureChainContainer>
+    <div className="flex justify-center py-4">
       <EnsureChain>
-        <Container>
+        <div className="flex flex-col w-full h-full items-center">
           <EnsureAuth>
             <>
               <HeaderNotifs />
               <FormContactDetails toggleIsSettingsOpen={toggleIsSettingsOpen} />
             </>
           </EnsureAuth>
-        </Container>
+        </div>
       </EnsureChain>
-    </EnsureChainContainer>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index e898aee..5e29cfe 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -1,73 +1,32 @@
 import React, { useRef, useState } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useClickAway } from "react-use";
 import { Tabs } from "@kleros/ui-components-library";
 import General from "./General";
 import NotificationSettings from "./Notifications";
 import { ISettings } from "../../index";
 import { useLocation, useNavigate } from "react-router-dom";
-
-const Container = styled.div`
-  display: flex;
-  position: absolute;
-  max-height: 80vh;
-  overflow-y: auto;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  flex-direction: column;
-  top: 5%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  border: 1px solid ${({ theme }) => theme.stroke};
-  border-radius: 3px;
-  overflow-y: auto;
-
-  ${landscapeStyle(
-    () => css`
-      margin-top: 64px;
-      top: 0;
-      right: 0;
-      left: auto;
-      transform: none;
-    `
-  )}
-`;
-
-const StyledSettingsText = styled.div`
-  display: flex;
-  justify-content: center;
-  font-size: 24px;
-  color: ${({ theme }) => theme.primaryText};
-  margin-top: 24px;
-`;
-
-const StyledTabs = styled(Tabs)`
-  padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  width: 86vw;
-  max-width: 660px;
-
-  ${landscapeStyle(
-    () => css`
-      width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
-    `
-  )}
-`;
+import clsx from "clsx";
 
 const TABS = [
   {
-    text: "General",
+    id: 0,
     value: 0,
+    text: "General",
+    content: null,
   },
   {
-    text: "Notifications",
+    id: 1,
     value: 1,
+    text: "Notifications",
+    content: null,
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
-  const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
+const inlinePaddingCalc = "px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
+const landscapeWidthCalc = "lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]";
+
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+  const [currentTab, setCurrentTab] = useState<number>(0);
   const containerRef = useRef(null);
   const location = useLocation();
   const navigate = useNavigate();
@@ -75,18 +34,26 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
     toggleIsSettingsOpen();
     if (location.hash.includes("#notifications")) navigate("#", { replace: true });
   });
+
   return (
-    <Container ref={containerRef}>
-      <StyledSettingsText>Settings</StyledSettingsText>
-      <StyledTabs
-        currentValue={currentTab}
+    <div
+      ref={containerRef}
+      className={clsx(
+        "flex flex-col absolute max-h-[80vh] overflow-y-auto top-[5%] left-1/2 transform -translate-x-1/2 z-1",
+        "bg-klerosUIComponentsWhiteBackground border border-solid border-klerosUIComponentsStroke rounded-[3px]",
+        "lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none lg:translate-x-0"
+      )}
+    >
+      <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
+      <Tabs
+        className={clsx(`py-0 ${inlinePaddingCalc}`, `max-w-[660px] w-[86vw] ${landscapeWidthCalc}`)}
         items={TABS}
-        callback={(n: number) => {
-          setCurrentTab(n);
+        callback={(_, value: number) => {
+          setCurrentTab(value);
         }}
       />
       {currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
index d1f4325..bd24f31 100644
--- a/web/src/layout/Header/navbar/Menu/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -1,57 +1,15 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import LightButton from "components/LightButton";
 import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
 import HelpIcon from "svgs/menu-icons/help.svg";
 import LightModeIcon from "svgs/menu-icons/light-mode.svg";
 // import NotificationsIcon from "svgs/menu-icons/notifications.svg";
 import SettingsIcon from "svgs/menu-icons/settings.svg";
-import { useToggleTheme } from "hooks/useToggleThemeContext";
+import { useTheme } from "hooks/useToggleThemeContext";
 import { IHelp, ISettings } from "..";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-    `
-  )}
-`;
-
-const ButtonContainer = styled.div`
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-
-  button {
-    padding: 0px;
-  }
-
-  .button-text {
-    display: block;
-  }
-
-  .button-svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
-  }
-
-  ${landscapeStyle(
-    () => css`
-      .button-svg {
-        fill: ${({ theme }) => theme.white};
-      }
-      .button-text {
-        display: none;
-      }
-    `
-  )}
-`;
-
 const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => {
-  const [theme, toggleTheme] = useToggleTheme();
+  const [theme, toggleTheme] = useTheme();
   const isLightTheme = theme === "light";
 
   const buttons = [
@@ -76,13 +34,16 @@ const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsO
   ];
 
   return (
-    <Container>
-      {buttons.map(({ text, Icon, onClick }) => (
-        <ButtonContainer key={Icon}>
+    <div className="flex flex-col lg:flex-row">
+      {buttons.map(({ text, Icon, onClick }, index) => (
+        <div
+          key={index}
+          className="flex items-center min-h-8 [&_.button-text]:block lg:[&_.button-text]:hidden not-dark:not-lg:[&_.button-svg]:fill-black/75 not-dark:not-lg:hover:[&_.button-svg]:fill-black"
+        >
           <LightButton {...{ text, onClick, Icon }} />
-        </ButtonContainer>
+        </div>
       ))}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx
index 2c33dcc..fd0ec46 100644
--- a/web/src/layout/Header/navbar/Product.tsx
+++ b/web/src/layout/Header/navbar/Product.tsx
@@ -1,45 +1,9 @@
+import clsx from "clsx";
 import React, { useState } from "react";
-import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-const Container = styled.a`
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px 8px 28px 8px;
-  max-width: 100px;
-  border-radius: 3px;
-  :hover {
-    transition: transform 0.15s, background-color 0.3s;
-    transform: scale(1.02);
-    background-color: ${({ theme }) => theme.lightGrey};
-  }
-  gap: 8px;
-  width: ${responsiveSize(100, 130)};
-  background-color: ${({ theme }) => theme.lightBackground};
-`;
-
-const StyledIcon = styled.svg`
-  width: 48px;
-  height: 48px;
-`;
-
-const StyledImg = styled.img<{ isLoaded: boolean }>`
-  width: 48px;
-  height: 48px;
-  display: ${({ isLoaded }) => (isLoaded ? "block" : "none")};
-`;
-
-const StyledSmall = styled.small`
-  display: flex;
-  font-weight: 400;
-  line-height: 19px;
-  text-align: center;
-`;
-
 interface IProduct {
   text: string;
   url: string;
@@ -50,17 +14,32 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
   const [isImgLoaded, setIsImgLoaded] = useState(false);
 
   return (
-    <Container href={url} target="_blank">
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={clsx(
+        "flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2",
+        "cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-light-grey dark:hover:bg-klerosUIComponentsLightGrey",
+        "hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]"
+      )}
+      style={{ width: responsiveSize(100, 130) }}
+    >
       {typeof Icon === "string" ? (
         <>
           {!isImgLoaded ? <Skeleton width={48} height={46} circle /> : null}
-          <StyledImg alt={Icon} src={Icon} isLoaded={isImgLoaded} onLoad={() => setIsImgLoaded(true)} />
+          <img
+            className={`w-12 h-12 ${isImgLoaded ? "block" : "hidden"}`}
+            alt={Icon}
+            src={Icon}
+            onLoad={() => setIsImgLoaded(true)}
+          />
         </>
       ) : (
-        <StyledIcon as={Icon} />
+        <Icon className="w-12 h-12" />
       )}
-      <StyledSmall>{text}</StyledSmall>
-    </Container>
+      <small className="flex font-normal text-center leading-snug">{text}</small>
+    </a>
   );
 };
 
diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx
index 2f26d63..709e1f8 100644
--- a/web/src/layout/Header/navbar/index.tsx
+++ b/web/src/layout/Header/navbar/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
@@ -15,41 +14,7 @@ import Menu from "./Menu";
 import Help from "./Menu/Help";
 import Settings from "./Menu/Settings";
 import { DisconnectWalletButton } from "./Menu/Settings/General";
-
-const Container = styled.div<{ isOpen: boolean }>`
-  position: absolute;
-  top: 64px;
-  left: 0;
-  right: 0;
-  max-height: calc(100vh - 64px);
-  overflow-y: auto;
-  z-index: 1;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
-  transform-origin: top;
-  transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
-  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
-  transition-property: transform, visibility;
-  transition-duration: ${({ theme }) => theme.transitionSpeed};
-  transition-timing-function: ease;
-  padding: 24px;
-
-  hr {
-    margin: 24px 0;
-  }
-`;
-
-const WalletContainer = styled.div`
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-`;
-
-const DisconnectWalletButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
+import { cn } from "~src/utils";
 
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
@@ -73,8 +38,16 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <Container {...{ isOpen }}>
+      <div
+        className={cn(
+          "absolute top-16 left-0 right-0 max-h-[calc(100vh-64px)] p-6 overflow-y-auto z-10",
+          "bg-klerosUIComponentsWhiteBackground shadow-default origin-top transition-[transform,visibility] duration-[klerosUIComponentsTransitionSpeed] ease-in-out",
+          "[&_hr]:my-6",
+          isOpen ? "scale-y-100 visible" : "scale-y-0 invisible"
+        )}
+      >
         <LightButton
+          className="not-dark:[&_.button-svg]:fill-black/75 not-dark:hover:[&_.button-svg]:fill-black"
           text="Kleros Solutions"
           onClick={() => {
             toggleIsDappListOpen();
@@ -84,18 +57,18 @@ const NavBar: React.FC = () => {
         <hr />
         <Explore isMobileNavbar={true} />
         <hr />
-        <WalletContainer>
+        <div className="flex gap-4 justify-between flex-wrap">
           <ConnectWallet />
           {isConnected && (
-            <DisconnectWalletButtonContainer>
+            <div className="flex items-center">
               <DisconnectWalletButton />
-            </DisconnectWalletButtonContainer>
+            </div>
           )}
-        </WalletContainer>
+        </div>
         <hr />
         <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
         <br />
-      </Container>
+      </div>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <OverlayPortal>
           <Overlay>
diff --git a/web/src/layout/index.tsx b/web/src/layout/index.tsx
index cbaac20..4f79be0 100644
--- a/web/src/layout/index.tsx
+++ b/web/src/layout/index.tsx
@@ -1,6 +1,4 @@
 import React, { useRef } from "react";
-import styled from "styled-components";
-import "overlayscrollbars/styles/overlayscrollbars.css";
 import { Outlet } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@@ -8,43 +6,25 @@ import { OverlayScrollContext } from "context/OverlayScrollContext";
 import Header from "./Header";
 import Footer from "./Footer";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  width: 100%;
-`;
-
-const StyledOverlayScrollbarsComponent = styled(OverlayScrollbarsComponent)`
-  height: 100vh;
-  width: 100vw;
-`;
-
-const StyledToastContainer = styled(ToastContainer)`
-  padding: 16px;
-  padding-top: 70px;
-`;
-
-const OutletContainer = styled.div`
-  flex: 1;
-  background-color: ${({ theme }) => theme.lightBackground};
-`;
-
 const Layout: React.FC = () => {
   const containerRef = useRef(null);
 
   return (
     <OverlayScrollContext.Provider value={containerRef}>
-      <StyledOverlayScrollbarsComponent ref={containerRef} options={{ showNativeOverlaidScrollbars: true }}>
-        <Container>
+      <OverlayScrollbarsComponent
+        className="h-screen w-full"
+        ref={containerRef}
+        options={{ showNativeOverlaidScrollbars: true }}
+      >
+        <div className="flex flex-col min-h-full w-full">
           <Header />
-          <StyledToastContainer />
-          <OutletContainer>
+          <ToastContainer className="p-4 pt-[70px]" />
+          <div className="flex-1 bg-klerosUIComponentsLightBackground">
             <Outlet />
-          </OutletContainer>
+          </div>
           <Footer />
-        </Container>
-      </StyledOverlayScrollbarsComponent>
+        </div>
+      </OverlayScrollbarsComponent>
     </OverlayScrollContext.Provider>
   );
 };
diff --git a/web/src/pages/AllLists/RegistriesFetcher.tsx b/web/src/pages/AllLists/RegistriesFetcher.tsx
index c05932f..46072b0 100644
--- a/web/src/pages/AllLists/RegistriesFetcher.tsx
+++ b/web/src/pages/AllLists/RegistriesFetcher.tsx
@@ -3,7 +3,6 @@ import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useWindowSize } from "react-use";
 import { useListRootPath, decodeListURIFilter } from "utils/uri";
 import RegistriesDisplay from "components/RegistriesDisplay";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useItemsQuery } from "queries/useItemsQuery";
 import { useRegistriesByIdsQuery } from "queries/useRegistriesByIdsQuery";
 import { isUndefined } from "utils/index";
@@ -12,6 +11,7 @@ import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
 import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
+import { LG_BREAKPOINT } from "~src/styles/breakpoints";
 
 const RegistriesFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
@@ -21,8 +21,7 @@ const RegistriesFetcher: React.FC = () => {
   const navigate = useNavigate();
   const { width } = useWindowSize();
   const location = useListRootPath();
-  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
-  const registriesPerPage = screenIsBig ? 9 : 3;
+  const registriesPerPage = width > LG_BREAKPOINT ? 9 : 3;
   const pageNumber = parseInt(page ?? "1", 10);
   const registrySkip = registriesPerPage * (pageNumber - 1);
 
diff --git a/web/src/pages/AllLists/RegistryDetails/ItemsDownloadLabel.tsx b/web/src/pages/AllLists/RegistryDetails/ItemsDownloadLabel.tsx
index 76720a3..e823f37 100644
--- a/web/src/pages/AllLists/RegistryDetails/ItemsDownloadLabel.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/ItemsDownloadLabel.tsx
@@ -1,26 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
-import styled from "styled-components";
 import { useRegistryItemsQuery } from "queries/useRegistryAllItemsQuery";
 import { json2csv } from "json-2-csv";
 import ExportIcon from "svgs/icons/export.svg";
-
-const StyledLink = styled.a`
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  gap: 8px;
-  text-decoration: none;
-  color: ${({ theme }) => theme.primaryBlue};
-  margin-top: 48px;
-  align-self: flex-end;
-  cursor: pointer;
-`;
-
-const StyledExportIcon = styled(ExportIcon)`
-  path {
-    stroke: ${({ theme }) => theme.primaryBlue};
-  }
-`;
+import clsx from "clsx";
 
 const ItemsDownloadLabel: React.FC<{ registryAddress?: string }> = ({ registryAddress }) => {
   const [isPreparing, setIsPreparing] = useState(false);
@@ -60,15 +42,23 @@ const ItemsDownloadLabel: React.FC<{ registryAddress?: string }> = ({ registryAd
   }, [items]);
 
   return (
-    <StyledLink onClick={() => refetch()} aria-disabled={isRefetching} ref={ref}>
+    <a
+      className={clsx(
+        "flex flex-row items-center self-end gap-2 mt-12",
+        "leading-18px no-underline text-klerosUIComponentsPrimaryBlue cursor-pointer"
+      )}
+      onClick={() => refetch()}
+      aria-disabled={isRefetching}
+      ref={ref}
+    >
       {isRefetching || isPreparing ? (
         <>Exporting list...</>
       ) : (
         <>
-          Export as csv <StyledExportIcon />
+          Export as csv <ExportIcon className="[&_path]:stroke-klerosUIComponentsPrimaryBlue" />
         </>
       )}
-    </StyledLink>
+    </a>
   );
 };
 
diff --git a/web/src/pages/AllLists/RegistryDetails/List/index.tsx b/web/src/pages/AllLists/RegistryDetails/List/index.tsx
index ba7aef1..eff347f 100644
--- a/web/src/pages/AllLists/RegistryDetails/List/index.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/List/index.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import StatsAndFilters from "components/StatsAndFilters";
 import ItemCard from "components/ItemCard";
@@ -11,17 +10,6 @@ import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
 import { Address } from "viem";
 
-const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-`;
-
-const SkeletonItemCard = styled(Skeleton)`
-  height: 64px;
-`;
-
 interface IList {
   registryAddress: Address;
 }
@@ -68,11 +56,11 @@ const List: React.FC<IList> = ({ registryAddress }) => {
     <>
       <Search />
       <StatsAndFilters fields={[{ label: "Items", value: totalItems?.toString() }]} />
-      <ListContainer>
+      <div className="flex flex-col gap-2 justify-center">
         {registryDetails?.registry?.items
           ? registryDetails?.registry.items.map((item) => <ItemCard key={item.id} {...(item as ItemDetailsFragment)} />)
-          : Array.from({ length: 3 }).map((_, index) => <SkeletonItemCard key={index} />)}
-      </ListContainer>
+          : Array.from({ length: 3 }).map((_, index) => <Skeleton height={64} key={index} />)}
+      </div>
     </>
   );
 };
diff --git a/web/src/pages/AllLists/RegistryDetails/Tabs.tsx b/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
index 3b1e2b8..3d35fa3 100644
--- a/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
@@ -1,38 +1,30 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { Tabs as TabsComponent } from "@kleros/ui-components-library";
 import PaperIcon from "assets/svgs/icons/paper.svg";
 import HistoryIcon from "assets/svgs/icons/history.svg";
 import { encodeListURIFilter } from "utils/uri";
 import { List_filters } from "consts/filters";
-
-const StyledTabs = styled(TabsComponent)`
-  width: 100%;
-  margin-bottom: 48px;
-  > * {
-    display: flex;
-    flex-wrap: wrap;
-    > svg {
-      margin-right: 8px !important;
-    }
-  }
-`;
+import clsx from "clsx";
 
 const TABS = [
   {
+    id: 0,
     text: "List",
     value: 0,
     Icon: PaperIcon,
     path: `list/1/desc/${encodeListURIFilter(List_filters.Active)}`,
     identifier: "list",
+    content: null,
   },
   {
+    id: 1,
     text: "History",
     value: 1,
     Icon: HistoryIcon,
     path: "history",
     identifier: "history",
+    content: null,
   },
 ];
 
@@ -59,7 +51,13 @@ const Tabs: React.FC = () => {
     }
   };
 
-  return <StyledTabs currentValue={currentTab} items={TABS} callback={handleTabChange} />;
+  return (
+    <TabsComponent
+      className={clsx("w-full mb-12", "*:flex *:flex-wrap", "*:[&_svg]:mr-2")}
+      items={TABS}
+      callback={(_, value: number) => handleTabChange(value)}
+    />
+  );
 };
 
 export default Tabs;
diff --git a/web/src/pages/AllLists/RegistryDetails/index.tsx b/web/src/pages/AllLists/RegistryDetails/index.tsx
index b368148..2a8ac9a 100644
--- a/web/src/pages/AllLists/RegistryDetails/index.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/index.tsx
@@ -9,12 +9,6 @@ import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 import { useItemDetailsQuery } from "queries/useItemDetailsQuery";
 import { List_filters } from "consts/filters";
 import ItemsDownloadLabel from "./ItemsDownloadLabel";
-import styled from "styled-components";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
 
 const RegistryDetails: React.FC = () => {
   const { id } = useParams();
@@ -48,7 +42,7 @@ const RegistryDetails: React.FC = () => {
   }, [itemDetails, registryDetails, setRegistryDetails]);
 
   return (
-    <Container>
+    <div className="flex flex-col">
       <RegistryInformationCard
         id={listAddress}
         {...{
@@ -72,7 +66,7 @@ const RegistryDetails: React.FC = () => {
         <Route path="*" element={<Navigate to={`list/1/desc/${JSON.stringify(List_filters.Active)}`} replace />} />
       </Routes>
       <ItemsDownloadLabel registryAddress={listAddress} />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/AllLists/StyledBreadcrumb.tsx b/web/src/pages/AllLists/StyledBreadcrumb.tsx
index 89d8095..24cce66 100644
--- a/web/src/pages/AllLists/StyledBreadcrumb.tsx
+++ b/web/src/pages/AllLists/StyledBreadcrumb.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { Breadcrumb as BreadcrumbBase } from "@kleros/ui-components-library";
 import { useLocation, useNavigate } from "react-router-dom";
 import HomeIcon from "svgs/icons/home.svg";
@@ -8,18 +7,6 @@ import { useLocalStorage } from "hooks/useLocalStorage";
 import { encodeListURIFilter } from "utils/uri";
 import { List_filters } from "consts/filters";
 
-const StyledBreadcrumb = styled(BreadcrumbBase)`
-  margin-bottom: 32px;
-  align-items: center;
-`;
-
-const StyledHomeIcon = styled(HomeIcon)`
-  path {
-    fill: ${({ theme }) => theme.secondaryText};
-  }
-  margin-bottom: 3.5px;
-`;
-
 const Breadcrumb: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -47,7 +34,7 @@ const Breadcrumb: React.FC = () => {
 
   const breadcrumbItems = useMemo(() => {
     const baseItems = [
-      { text: <StyledHomeIcon />, value: "/" },
+      { text: <HomeIcon className="fill-klerosUIComponentsSecondaryText mb-[3.5px]" />, value: "/" },
       { text: "All Lists", value: `/lists/display/1/desc/${encodeListURIFilter(List_filters.Active)}` },
     ];
     switch (page) {
@@ -75,7 +62,14 @@ const Breadcrumb: React.FC = () => {
     return baseItems;
   }, [page, listAddress, registryDetails, location]);
 
-  return <StyledBreadcrumb items={breadcrumbItems} clickable callback={(val: string) => navigate(val)} />;
+  return (
+    <BreadcrumbBase
+      className="mb-8 [&_small]:text-sm [&_small]:font-normal"
+      items={breadcrumbItems}
+      clickable
+      callback={(val: string) => navigate(val)}
+    />
+  );
 };
 
 export default Breadcrumb;
diff --git a/web/src/pages/AllLists/index.tsx b/web/src/pages/AllLists/index.tsx
index a5bb8cd..fa97a59 100644
--- a/web/src/pages/AllLists/index.tsx
+++ b/web/src/pages/AllLists/index.tsx
@@ -1,8 +1,4 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
 
 import { Route, Routes } from "react-router-dom";
 
@@ -12,31 +8,17 @@ import RegistriesFetcher from "./RegistriesFetcher";
 import RegistryDetails from "./RegistryDetails";
 import ItemDisplay from "./ItemDisplay";
 import Breadcrumb from "./StyledBreadcrumb";
+import clsx from "clsx";
 
-const Container = styled.div`
-  width: 100%;
-  background-color: ${({ theme }) => theme.lightBackground};
-  padding: 32px 16px 40px;
-  max-width: ${MAX_WIDTH_LANDSCAPE};
-  margin: 0 auto;
-
-  ${landscapeStyle(
-    () => css`
-      padding: 48px ${responsiveSize(0, 132)} 60px;
-    `
-  )}
-`;
-
-export const ConnectWalletContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  color: ${({ theme }) => theme.primaryText};
-`;
+const landscapePaddingCalc = "lg:p-[48px_calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))_60px]";
 
 const AllLists: React.FC = () => (
-  <Container>
+  <div
+    className={clsx(
+      "w-full bg-klerosUIComponentsLightBackground px-4 pt-8 pb-10 mx-auto max-w-landscape",
+      landscapePaddingCalc
+    )}
+  >
     <Breadcrumb />
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<RegistriesFetcher />} />
@@ -50,7 +32,7 @@ const AllLists: React.FC = () => (
         }
       />
     </Routes>
-  </Container>
+  </div>
 );
 
 export default AllLists;
diff --git a/web/src/pages/Home/Header.tsx b/web/src/pages/Home/Header.tsx
index 689232b..c937ee8 100644
--- a/web/src/pages/Home/Header.tsx
+++ b/web/src/pages/Home/Header.tsx
@@ -1,23 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 
-const StyledHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledH1 = styled.h1`
-  font-size: ${responsiveSize(21, 24)};
-  font-weight: 500;
-  margin-bottom: 48px;
-  letter-spacing: 1px;
-`;
-
-const StyledSpan = styled.span`
-  color: ${({ theme }) => theme.secondaryPurple};
-`;
-
 const Header: React.FC = () => {
   const [currentWordIndex, setCurrentWordIndex] = useState(0);
   const words = ["Lists", "Knowledge"];
@@ -31,11 +14,11 @@ const Header: React.FC = () => {
   }, []);
 
   return (
-    <StyledHeader>
-      <StyledH1>
-        Community Curated <StyledSpan>{words[currentWordIndex]}</StyledSpan>
-      </StyledH1>
-    </StyledHeader>
+    <div className="flex justify-between">
+      <h1 className="font-medium mb-12 tracking-[1px]" style={{ fontSize: responsiveSize(21, 24) }}>
+        Community Curated <span className="text-klerosUIComponentsSecondaryPurple">{words[currentWordIndex]}</span>
+      </h1>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Home/Highlights/Header.tsx b/web/src/pages/Home/Highlights/Header.tsx
index 7dada97..99cb4fb 100644
--- a/web/src/pages/Home/Highlights/Header.tsx
+++ b/web/src/pages/Home/Highlights/Header.tsx
@@ -1,36 +1,25 @@
+import clsx from "clsx";
 import React from "react";
-import styled from "styled-components";
 import PaperIcon from "svgs/icons/paper.svg";
 
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-top: 3px solid ${({ theme }) => theme.secondaryPurple};
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  background-color: ${({ theme }) => theme.whiteBackground};
-`;
-
-const SVGContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
-    height: 24px;
-    width: 24px;
-  }
-`;
 const Header: React.FC = () => {
   return (
-    <Container>
-      <SVGContainer>
+    <div
+      className={clsx(
+        "flex justify-center items-center gap-2",
+        "bg-klerosUIComponentsWhiteBackground border-t-[3px] border-t-klerosUIComponentsSecondaryPurple rounded-t-[3px]"
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center justify-center",
+          "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:fill-klerosUIComponentsSecondaryPurple"
+        )}
+      >
         <PaperIcon />
-      </SVGContainer>
-      <p>Highlights</p>
-    </Container>
+      </div>
+      <p className="my-4">Highlights</p>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Home/Highlights/index.tsx b/web/src/pages/Home/Highlights/index.tsx
index 0b7deab..056ea0d 100644
--- a/web/src/pages/Home/Highlights/index.tsx
+++ b/web/src/pages/Home/Highlights/index.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import Header from "./Header";
 import RegistryCard from "components/RegistryCard";
@@ -15,26 +14,6 @@ import { List_filters } from "consts/filters";
 import { encodeListURIFilter } from "utils/uri";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
 
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 32px;
-`;
-
-const GridContainer = styled.div`
-  --gap: 16px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(274px, (100% - var(--gap) * 2)/3)), 1fr));
-  align-items: center;
-  gap: var(--gap);
-`;
-
-const StyledButton = styled(Button)`
-  margin: 0 auto;
-`;
-
 const HighlightedLists = () => {
   const navigateAndScrollTop = useNavigateAndScrollTop();
 
@@ -76,9 +55,9 @@ const HighlightedLists = () => {
   const registriesLoading = isUndefined(combinedListsData) || isItemsDataLoading || isRegistriesDataLoading;
 
   return (
-    <Container>
+    <div className="flex flex-col w-full justify-center gap-8">
       <Header />
-      <GridContainer>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,max(274px,(100%-16px*2)/3)),1fr))] items-center gap-4">
         {registriesLoading
           ? [...Array(6)].map((_, i) => <SkeletonRegistryCard key={i} />)
           : combinedListsData?.map((registry, i) => (
@@ -93,13 +72,14 @@ const HighlightedLists = () => {
                 overrideIsListView
               />
             ))}
-      </GridContainer>
-      <StyledButton
+      </div>
+      <Button
+        className="mx-auto"
         onClick={() => navigateAndScrollTop(`/lists/display/1/desc/${encodeListURIFilter(List_filters.Active)}`)}
         text="Show All"
         variant="secondary"
       />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Home/Stats/index.tsx b/web/src/pages/Home/Stats/index.tsx
index a3df3bd..bca8386 100644
--- a/web/src/pages/Home/Stats/index.tsx
+++ b/web/src/pages/Home/Stats/index.tsx
@@ -1,6 +1,4 @@
 import React, { useMemo } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Card } from "@kleros/ui-components-library";
 import StatDisplay, { IColors } from "components/StatDisplay";
 import PaperIcon from "svgs/icons/paper.svg";
@@ -12,25 +10,7 @@ import { useCoinPrice } from "hooks/useCoinPrice";
 import { CoinIds } from "consts/coingecko";
 import { useCounter } from "hooks/queries/useCounter";
 import { formatUSD, formatUnitsWei } from "utils/format";
-
-const StyledCard = styled(Card)`
-  width: 100%;
-  height: fit-content;
-  gap: 32px;
-  padding: ${responsiveSize(16, 30)};
-  padding-left: ${responsiveSize(16, 54)};
-  padding-bottom: 16px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  margin-bottom: 64px;
-
-  ${landscapeStyle(
-    () => css`
-      padding-bottom: 0px;
-      gap: 0px;
-    `
-  )}
-`;
+import clsx from "clsx";
 
 interface IStat {
   title: string;
@@ -87,12 +67,22 @@ const Stats = () => {
       },
     ];
   }, [counters, pricesData]);
+
   return (
-    <StyledCard>
+    <Card
+      className={clsx(
+        "grid grid-cols-[repeat(auto-fit,minmax(190px,1fr))] gap-8",
+        "w-full h-fit mb-16 pb-4! lg:gap-0 lg:pb-0!"
+      )}
+      style={{
+        padding: responsiveSize(16, 30),
+        paddingLeft: responsiveSize(16, 54),
+      }}
+    >
       {stats.map(({ title, coinId, text, subtext, color, icon }, i) => {
         return <StatDisplay key={i} {...{ title, color, icon, text, subtext }} />;
       })}
-    </StyledCard>
+    </Card>
   );
 };
 
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index 5588205..c4ccf0b 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -1,37 +1,27 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { responsiveSize } from "styles/responsiveSize";
-import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import clsx from "clsx";
 
 import HeroImage from "components/HeroImage";
 import Header from "./Header";
 import Stats from "./Stats";
 import HighlightedLists from "./Highlights";
 
-const Container = styled.div`
-  width: 100%;
-  background-color: ${({ theme }) => theme.lightBackground};
-  padding: 16px 16px 40px;
-  max-width: ${MAX_WIDTH_LANDSCAPE};
-  margin: 0 auto;
-
-  ${landscapeStyle(
-    () => css`
-      padding: 16px ${responsiveSize(0, 132)} 60px;
-    `
-  )}
-`;
+const landscapeInlinePaddingCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
 const Home: React.FC = () => {
   return (
     <>
       <HeroImage />
-      <Container>
+      <div
+        className={clsx(
+          "w-full max-w-landscape mx-auto bg-klerosUIComponentsLightBackground px-4 pt-4 pb-10",
+          `${landscapeInlinePaddingCalc} lg:pb-[60px]`
+        )}
+      >
         <Header />
         <Stats />
         <HighlightedLists />
-      </Container>
+      </div>
     </>
   );
 };
diff --git a/web/src/pages/SubmitItem/Header/index.tsx b/web/src/pages/SubmitItem/Header/index.tsx
index 9537ab9..4acc2d7 100644
--- a/web/src/pages/SubmitItem/Header/index.tsx
+++ b/web/src/pages/SubmitItem/Header/index.tsx
@@ -1,6 +1,4 @@
 import React, { useEffect } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
@@ -13,76 +11,7 @@ import { formatUnitsWei, formatValue } from "utils/format";
 import { useReadCurateV2GetArbitratorExtraData, useReadCurateV2SubmissionBaseDeposit } from "hooks/useContract";
 import { isUndefined } from "src/utils";
 import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
-const StyledCard = styled(Card)`
-  display: flex;
-  margin-top: 60px;
-  margin-bottom: ${responsiveSize(36, 36)};
-  padding: 24px ${responsiveSize(24, 32)};
-  width: 80vw;
-  height: auto;
-  justify-content: space-between;
-  gap: 24px;
-  flex-wrap: wrap;
-
-  ${landscapeStyle(
-    () => css`
-      width: 91vw;
-    `
-  )}
-`;
-
-const LeftContent = styled.div`
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-`;
-
-const Title = styled.p`
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const ListName = styled.p`
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-  color: ${({ theme }) => theme.secondaryPurple};
-`;
-
-const RightContent = styled.div`
-  display: flex;
-  gap: 16px 48px;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-const DepositRequired = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-
-  svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
-    margin-right: 8px;
-    width: 16px;
-  }
-`;
-
-const StyledP = styled.p`
-  margin: 0;
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const Amount = styled.p`
-  margin: 0;
-`;
+import clsx from "clsx";
 
 interface IHeader {}
 
@@ -111,25 +40,32 @@ const Header: React.FC<IHeader> = ({}) => {
   }, [deposit, arbitrationCost]);
 
   return (
-    <Container>
-      <StyledCard>
-        <LeftContent>
-          <Title>Submit Item to</Title>
-          {title ? <ListName>{title}</ListName> : <Skeleton width={100} height={26} />}
-        </LeftContent>
-        <RightContent>
-          <DepositRequired>
-            <PileCoinsIcon />
-            <StyledP>Deposit required:&nbsp;</StyledP>
+    <div className="flex justify-center">
+      <Card
+        className={clsx("flex flex-wrap justify-between gap-6", "h-auto w-[80vw] lg:w-[91vw]", "mt-[60px] py-6")}
+        style={{ marginBottom: responsiveSize(36, 36), paddingInline: responsiveSize(24, 32) }}
+      >
+        <div className="flex flex-wrap gap-2">
+          <p className="m-0 text-2xl font-semibold text-klerosUIComponentsPrimaryText">Submit Item to</p>
+          {title ? (
+            <p className="m-0 text-2xl font-semibold text-klerosUIComponentsSecondaryPurple">{title}</p>
+          ) : (
+            <Skeleton width={100} height={26} />
+          )}
+        </div>
+        <div className="flex flex-wrap items-center gap-y-4 gap-x-12">
+          <div className="flex flex-wrap">
+            <PileCoinsIcon width={16} className="mr-2 fill-klerosUIComponentsSecondaryPurple" />
+            <p className="m-0">Deposit required:&nbsp;</p>
             {submissionDeposit ? (
-              <Amount>{formatValue(formatUnitsWei(BigInt(submissionDeposit)), 5, false)} ETH</Amount>
+              <p className="m-0">{formatValue(formatUnitsWei(BigInt(submissionDeposit)), 5, false)} ETH</p>
             ) : (
               <Skeleton width={60} height={24} />
             )}
-          </DepositRequired>
-        </RightContent>
-      </StyledCard>
-    </Container>
+          </div>
+        </div>
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
index 5b9c8a0..50b83b2 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
@@ -1,19 +1,24 @@
 import React, { useState } from "react";
 import { IFieldInput } from ".";
-import StyledField from "./StyledField";
 import { isAddress } from "viem";
+import { TextField } from "@kleros/ui-components-library";
+import { responsiveSize } from "~src/styles/responsiveSize";
+import { cn } from "~src/utils";
+import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const AddressInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const [isError, setIsError] = useState(false);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isAddress(event.target.value)) {
+  const handleChange = (value: string) => {
+    if (!isAddress(value)) {
       setIsError(true);
       return;
     }
-    handleWrite(event.target.value);
+    handleWrite(value);
   };
   return (
-    <StyledField
+    <TextField
+      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
+      style={{ marginBottom: responsiveSize(68, 40) }}
       value={fieldProp.value}
       onChange={handleChange}
       variant={isError ? "error" : "info"}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/BooleanInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/BooleanInput.tsx
index 8dc6e81..054aaf3 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/BooleanInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/BooleanInput.tsx
@@ -7,7 +7,7 @@ const BooleanInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const handleChange = () => {
     handleWrite(valueAsBool ? "false" : "true");
   };
-  return <Switch name={fieldProp.description} checked={valueAsBool} onChange={handleChange} />;
+  return <Switch name={fieldProp.description} isSelected={valueAsBool} onChange={handleChange} />;
 };
 
 export default BooleanInput;
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/ChainInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/ChainInput.tsx
index f83648a..b6c76a0 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/ChainInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/ChainInput.tsx
@@ -11,12 +11,12 @@ const ChainInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   return (
     <DropdownSelect
       items={[
-        { text: getChainName(mainnet.id), value: mainnet.id },
-        { text: getChainName(arbitrum.id), value: arbitrum.id },
-        { text: getChainName(gnosis.id), value: gnosis.id },
-        { text: getChainName(polygon.id), value: polygon.id },
+        { id: mainnet.id, text: getChainName(mainnet.id), itemValue: mainnet.id },
+        { id: arbitrum.id, text: getChainName(arbitrum.id), itemValue: arbitrum.id },
+        { id: gnosis.id, text: getChainName(gnosis.id), itemValue: gnosis.id },
+        { id: polygon.id, text: getChainName(polygon.id), itemValue: polygon.id },
       ]}
-      callback={handleChange}
+      callback={(item) => handleChange(item.itemValue)}
       defaultValue={Number(fieldProp.value ?? mainnet.id)}
     />
   );
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
index 7d3c5f8..d6a78ed 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
@@ -1,30 +1,12 @@
 import React from "react";
 import { IFieldInput } from ".";
-import styled, { css } from "styled-components";
 import { FileUploader } from "@kleros/ui-components-library";
-import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-import { getFileUploaderMsg } from "src/utils";
+import { cn, getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
+import { LANDSCAPE_WIDTH_CALC, MARGIN_BOTTOM_CALC } from "./constants";
 
-const StyledFileUploader = styled(FileUploader)`
-  width: 84vw;
-  margin-bottom: ${responsiveSize(150, 72)};
-  path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-  small {
-    white-space: pre-line;
-    text-align: start;
-  }
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(200, 720)};
-    `
-  )};
-`;
 const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const { uploadFile, roleRestrictions } = useAtlasProvider();
   const isDesktop = useIsDesktop();
@@ -44,7 +26,13 @@ const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   };
 
   return (
-    <StyledFileUploader
+    <FileUploader
+      className={cn(
+        "w-[84vw]",
+        "[&_small]:whitespace-pre-line [&_small]:text-start",
+        MARGIN_BOTTOM_CALC,
+        LANDSCAPE_WIDTH_CALC
+      )}
       callback={handleFileUpload}
       variant={isDesktop ? "info" : undefined}
       msg={`${fieldProp.description}\n${getFileUploaderMsg(Roles.CurateItemFile, roleRestrictions)}`}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
index 3077898..3bb3c42 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
@@ -1,30 +1,11 @@
 import React from "react";
 import { IFieldInput } from ".";
-import styled, { css } from "styled-components";
 import { FileUploader } from "@kleros/ui-components-library";
-import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-import { getFileUploaderMsg } from "src/utils";
+import { cn, getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
-
-const StyledFileUploader = styled(FileUploader)`
-  width: 84vw;
-  margin-bottom: ${responsiveSize(150, 72)};
-  path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-  small {
-    white-space: pre-line;
-    text-align: start;
-  }
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(200, 720)};
-    `
-  )};
-`;
+import { LANDSCAPE_WIDTH_CALC, MARGIN_BOTTOM_CALC } from "./constants";
 
 const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -47,7 +28,13 @@ const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   };
 
   return (
-    <StyledFileUploader
+    <FileUploader
+      className={cn(
+        "w-[84vw]",
+        "[&_small]:whitespace-pre-line [&_small]:text-start",
+        MARGIN_BOTTOM_CALC,
+        LANDSCAPE_WIDTH_CALC
+      )}
       callback={handleFileUpload}
       variant={isDesktop ? "info" : undefined}
       msg={`${fieldProp.description}\n${getFileUploaderMsg(Roles.CurateItemImage, roleRestrictions)}`}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
index 3f17c52..b1c74f0 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
@@ -1,21 +1,26 @@
 import React, { useState } from "react";
 import { IFieldInput } from ".";
-import StyledField from "./StyledField";
+import { TextField } from "@kleros/ui-components-library";
+import { cn } from "~src/utils";
+import { responsiveSize } from "~src/styles/responsiveSize";
+import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const LinkInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const [isError, setIsError] = useState(false);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isValidUrl(event.target.value)) {
+  const handleChange = (value: string) => {
+    if (!isValidUrl(value)) {
       setIsError(true);
       return;
     }
-    handleWrite(event.target.value);
+    handleWrite(value);
   };
 
   return (
-    <StyledField
+    <TextField
       value={fieldProp.value}
+      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
+      style={{ marginBottom: responsiveSize(68, 40) }}
       onChange={handleChange}
       variant={isError ? "error" : "info"}
       message={fieldProp.description}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
index 6a12691..a361cee 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
@@ -1,42 +1,24 @@
 import React from "react";
 import { IFieldInput } from ".";
-import { Textarea } from "@kleros/ui-components-library";
-import styled, { css } from "styled-components";
+import { TextArea } from "@kleros/ui-components-library";
 import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
-
-const StyledField = styled(Textarea)`
-  width: 80vw;
-  margin-bottom: ${responsiveSize(68, 40)};
-  height: fit-content;
-  textarea {
-    resize: vertical;
-  }
-
-  input {
-    font-size: 16px;
-  }
-
-  svg {
-    margin-top: 8px;
-  }
-  small {
-    margin-top: 6px;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(200, 720)};
-    `
-  )};
-`;
+import { cn } from "~src/utils";
+import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const LongTextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    handleWrite(event.target.value);
+  const handleChange = (value: string) => {
+    handleWrite(value);
   };
   return (
-    <StyledField value={fieldProp.value} onChange={handleChange} variant={"info"} message={fieldProp.description} />
+    <TextArea
+      className={cn("w-[80vw] h-fit", LANDSCAPE_WIDTH_CALC)}
+      style={{ marginBottom: responsiveSize(68, 40) }}
+      resizeY
+      value={fieldProp.value}
+      onChange={handleChange}
+      variant="info"
+      message={fieldProp.description}
+    />
   );
 };
 
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
index 43216b0..57d0765 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
@@ -1,17 +1,21 @@
 import React from "react";
 import { IFieldInput } from ".";
-import StyledField from "./StyledField";
+import { NumberField } from "@kleros/ui-components-library";
+import { responsiveSize } from "~src/styles/responsiveSize";
+import { cn } from "~src/utils";
+import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const NumberInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleWrite(event.target.value);
+  const handleChange = (value: number) => {
+    handleWrite(value.toString());
   };
   return (
-    <StyledField
-      type="number"
-      value={fieldProp.value}
+    <NumberField
+      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
+      style={{ marginBottom: responsiveSize(68, 40) }}
+      value={Number(fieldProp.value) ?? 0}
       onChange={handleChange}
-      variant={"info"}
+      variant="info"
       message={fieldProp.description}
     />
   );
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/StyledField.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/StyledField.tsx
deleted file mode 100644
index 9c6b065..0000000
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/StyledField.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Field } from "@kleros/ui-components-library";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
-const StyledField = styled(Field)`
-  width: 80vw;
-  margin-bottom: ${responsiveSize(68, 40)};
-
-  input {
-    font-size: 16px;
-  }
-
-  small {
-    margin-top: 6px;
-    svg {
-      margin-top: 8px;
-    }
-  }
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(200, 720)};
-    `
-  )};
-`;
-export default StyledField;
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
index 39903e5..719ee09 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
@@ -1,13 +1,23 @@
 import React from "react";
 import { IFieldInput } from ".";
-import StyledField from "./StyledField";
+import { TextField } from "@kleros/ui-components-library";
+import { responsiveSize } from "~src/styles/responsiveSize";
+import { cn } from "~src/utils";
+import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const TextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleWrite(event.target.value);
+  const handleChange = (value: string) => {
+    handleWrite(value);
   };
   return (
-    <StyledField value={fieldProp.value} onChange={handleChange} variant={"info"} message={fieldProp.description} />
+    <TextField
+      value={fieldProp.value}
+      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
+      style={{ marginBottom: responsiveSize(68, 40) }}
+      onChange={handleChange}
+      variant="info"
+      message={fieldProp.description}
+    />
   );
 };
 
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts b/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts
new file mode 100644
index 0000000..b75a0ce
--- /dev/null
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts
@@ -0,0 +1,2 @@
+export const LANDSCAPE_WIDTH_CALC = "lg:w-[calc(200px+(720-200)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
+export const MARGIN_BOTTOM_CALC = "mb-[calc(150px+(72-150)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
diff --git a/web/src/pages/SubmitItem/ItemField/index.tsx b/web/src/pages/SubmitItem/ItemField/index.tsx
index a1904f9..a87a4be 100644
--- a/web/src/pages/SubmitItem/ItemField/index.tsx
+++ b/web/src/pages/SubmitItem/ItemField/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import Title from "../Title";
 import NavigationButtons from "../NavigationButtons";
@@ -9,16 +8,6 @@ import Skeleton from "react-loading-skeleton";
 import FieldInput from "./FieldInput";
 import { isUndefined } from "src/utils";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const StyledSkeleton = styled(Skeleton)`
-  margin-bottom: 30px;
-`;
-
 const ItemField: React.FC = () => {
   const { fields, setFields } = useSubmitItemContext();
   const { id } = useParams();
@@ -39,12 +28,12 @@ const ItemField: React.FC = () => {
   };
 
   return (
-    <Container>
-      {itemField ? <Title text={itemField?.label} /> : <StyledSkeleton width={100} height={40} />}
+    <div className="flex flex-col items-center">
+      {itemField ? <Title text={itemField?.label} /> : <Skeleton width={100} height={40} className="mb-8" />}
       {itemField ? (
         <FieldInput key={id} fieldProp={{ ...itemField, value }} handleWrite={handleWrite} />
       ) : (
-        <StyledSkeleton width={200} height={100} />
+        <Skeleton width={200} height={100} className="mb-8" />
       )}
       <NavigationButtons
         prevRoute={fieldNumber > 0 ? `../item-field/${fieldNumber - 1}` : undefined}
@@ -52,7 +41,7 @@ const ItemField: React.FC = () => {
           fieldProps && fieldProps?.length - 1 > fieldNumber ? `../item-field/${fieldNumber + 1}` : "../policy"
         }
       />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/NavigationButtons/NextButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/NextButton.tsx
index bd1481b..02ec41d 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/NextButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/NextButton.tsx
@@ -39,7 +39,7 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
     (location.pathname.includes("/submit-item/preview") && areFieldsFilled) ||
     (location.pathname.includes("/policy") && !isPolicyRead);
 
-  return <Button disabled={isButtonDisabled} onClick={() => navigate(nextRoute)} text="Next" />;
+  return <Button isDisabled={isButtonDisabled} onClick={() => navigate(nextRoute)} text="Next" />;
 };
 
 export default NextButton;
diff --git a/web/src/pages/SubmitItem/NavigationButtons/PreviousButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/PreviousButton.tsx
index ba1c3f1..5bc7125 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/PreviousButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/PreviousButton.tsx
@@ -1,13 +1,8 @@
 import React from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { useNavigate } from "react-router-dom";
 import { isEmpty } from "src/utils";
 
-const StyledButton = styled(Button)<{ prevRoute: string }>`
-  display: ${({ prevRoute }) => (isEmpty(prevRoute) ? "none" : "flex")};
-`;
-
 interface IReturnButton {
   prevRoute: string;
 }
@@ -16,12 +11,12 @@ const ReturnButton: React.FC<IReturnButton> = ({ prevRoute }) => {
   const navigate = useNavigate();
 
   return (
-    <StyledButton
-      prevRoute={prevRoute}
+    <Button
+      className={isEmpty(prevRoute) ? "hidden" : "flex"}
       onClick={() => navigate(prevRoute)}
       text="Return"
       variant="secondary"
-    ></StyledButton>
+    />
   );
 };
 
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index 011b0fc..a595609 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
 import { EnsureChain } from "components/EnsureChain";
@@ -13,8 +12,6 @@ import { useSimulateCurateV2AddItem, useWriteCurateV2AddItem } from "hooks/useCo
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 import { ErrorButtonMessage } from "components/ActionButton/Modal/Buttons/ErrorButtonMessage";
 
-const StyledButton = styled(Button)``;
-
 const SubmitItemButton: React.FC = () => {
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
   const publicClient = usePublicClient();
@@ -54,9 +51,9 @@ const SubmitItemButton: React.FC = () => {
   return (
     <EnsureChain>
       <div>
-        <StyledButton
+        <Button
           text="Submit Item"
-          disabled={isButtonDisabled}
+          isDisabled={isButtonDisabled}
           isLoading={(isConfigLoading && !insufficientBalance) || isSubmittingItem || isBalanceLoading}
           onClick={() => {
             if (submitItem && publicClient && config) {
diff --git a/web/src/pages/SubmitItem/NavigationButtons/index.tsx b/web/src/pages/SubmitItem/NavigationButtons/index.tsx
index 00c8bd0..0edc7c8 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/index.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/index.tsx
@@ -1,18 +1,8 @@
 import React from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import PreviousButton from "./PreviousButton";
 import NextButton from "./NextButton";
 import SubmitItemButton from "./SubmitItemButton";
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-  margin-top: ${responsiveSize(32, 24)};
-  flex-wrap: wrap;
-`;
-
 interface NavigationButtonsProps {
   prevRoute?: string;
   nextRoute?: string;
@@ -20,10 +10,10 @@ interface NavigationButtonsProps {
 
 const NavigationButtons: React.FC<NavigationButtonsProps> = ({ prevRoute, nextRoute }) => {
   return (
-    <Container>
+    <div className="flex flex-wrap justify-center gap-6" style={{ marginTop: responsiveSize(32, 24) }}>
       {prevRoute && <PreviousButton prevRoute={prevRoute} />}
       {prevRoute === "../policy" ? <SubmitItemButton /> : <NextButton nextRoute={nextRoute} />}
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Policy/ConfirmationBox.tsx b/web/src/pages/SubmitItem/Policy/ConfirmationBox.tsx
index 9b8de0b..14f5771 100644
--- a/web/src/pages/SubmitItem/Policy/ConfirmationBox.tsx
+++ b/web/src/pages/SubmitItem/Policy/ConfirmationBox.tsx
@@ -1,26 +1,21 @@
 import React from "react";
-import styled from "styled-components";
 import { Checkbox } from "@kleros/ui-components-library";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 
-const Container = styled.div`
-  margin-bottom: 32px;
-`;
-
 interface IConfirmationBox {}
 
 const ConfirmationBox: React.FC<IConfirmationBox> = ({}) => {
   const { isPolicyRead, setIsPolicyRead } = useSubmitItemContext();
 
   return (
-    <Container>
+    <div className="mb-8">
       <Checkbox
-        label="I certify that I read and understand the Policy "
-        checked={isPolicyRead}
+        label="I certify that I read and understand the Policy"
+        isSelected={isPolicyRead}
         small
         onChange={() => setIsPolicyRead(!isPolicyRead)}
       />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Policy/Info.tsx b/web/src/pages/SubmitItem/Policy/Info.tsx
index 738cb67..a5f29e5 100644
--- a/web/src/pages/SubmitItem/Policy/Info.tsx
+++ b/web/src/pages/SubmitItem/Policy/Info.tsx
@@ -1,21 +1,8 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { AlertMessage } from "@kleros/ui-components-library";
+import { cn } from "~src/utils";
 
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 84vw;
-  margin-bottom: 32px;
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(342, 618)};
-    `
-  )}
-`;
+const landscapeWitdhCalc = "lg:w-[calc(342px+(618-342)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
 const alertMessage =
   "The item must follow the Policy. Items that do not follow the policy risk" +
@@ -24,9 +11,9 @@ const alertMessage =
 
 const Info: React.FC = () => {
   return (
-    <Container>
-      <AlertMessage variant="info" title="Important" msg={alertMessage} />
-    </Container>
+    <div className={cn("flex justify-center w-[84vw] mb-8", landscapeWitdhCalc)}>
+      <AlertMessage className="[&_h2]:m-0" variant="info" title="Important" msg={alertMessage} />
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx b/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
index b5e1ff5..b43c8de 100644
--- a/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
+++ b/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
@@ -1,20 +1,17 @@
 import React from "react";
-import styled from "styled-components";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { Link } from "react-router-dom";
 
-const StyledA = styled(Link)`
-  align-self: center;
-  font-size: 20px;
-  margin-bottom: 32px;
-`;
-
 interface IReadPolicy {}
 
 const ReadPolicy: React.FC<IReadPolicy> = () => {
   const { policyURI } = useRegistryDetailsContext();
-  return <StyledA to={`/attachment/?url=${getIpfsUrl(policyURI ?? "")}`}>→ Read the policy here ←</StyledA>;
+  return (
+    <Link className="self-center text-xl mb-8" to={`/attachment/?url=${getIpfsUrl(policyURI ?? "")}`}>
+      → Read the policy here ←
+    </Link>
+  );
 };
 
 export default ReadPolicy;
diff --git a/web/src/pages/SubmitItem/Policy/index.tsx b/web/src/pages/SubmitItem/Policy/index.tsx
index 776f05f..c9198cb 100644
--- a/web/src/pages/SubmitItem/Policy/index.tsx
+++ b/web/src/pages/SubmitItem/Policy/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import NavigationButtons from "../NavigationButtons";
 import Title from "../Title";
 import Info from "./Info";
@@ -7,16 +6,11 @@ import ConfirmationBox from "./ConfirmationBox";
 import ReadPolicy from "./ReadPolicy";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
 const Policy: React.FC = () => {
   const { fieldProps } = useRegistryDetailsContext();
 
   return (
-    <Container>
+    <div className="flex flex-col">
       <Title text="Policy Review" />
       <ReadPolicy />
       <Info />
@@ -25,7 +19,7 @@ const Policy: React.FC = () => {
         prevRoute={`../item-field/${fieldProps?.length ? fieldProps.length - 1 : 0}`}
         nextRoute="../preview"
       />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx b/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
index 2442348..30a43a5 100644
--- a/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
+++ b/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
@@ -1,21 +1,9 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import ItemCard from "components/ItemCard";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { ItemDetailsFragment, Status } from "src/graphql/graphql";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${responsiveSize(32, 24)};
-`;
-
-const StyledP = styled.p`
-  color: ${({ theme }) => theme.primaryBlue};
-  margin: 0;
-`;
-
 interface IItemDisplay {}
 
 const ItemDisplay: React.FC<IItemDisplay> = ({}) => {
@@ -31,10 +19,10 @@ const ItemDisplay: React.FC<IItemDisplay> = ({}) => {
   );
 
   return (
-    <Container>
-      <StyledP>Check how the item is displayed on the List page:</StyledP>
+    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+      <p className="m-0 text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the List page:</p>
       <ItemCard props={props} status={Status.RegistrationRequested} />
-    </Container>
+    </div>
   );
 };
 export default ItemDisplay;
diff --git a/web/src/pages/SubmitItem/Preview/ListDisplay.tsx b/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
index b21ed46..55b0689 100644
--- a/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
+++ b/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
@@ -1,21 +1,9 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import ItemInformationCard from "components/InformationCards/ItemInformationCard";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { ItemDetailsFragment, Status } from "src/graphql/graphql";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${responsiveSize(32, 24)};
-`;
-
-const StyledP = styled.p`
-  color: ${({ theme }) => theme.primaryBlue};
-  margin: 0;
-`;
-
 interface IListDisplay {}
 
 const ListDisplay: React.FC<IListDisplay> = ({}) => {
@@ -31,8 +19,8 @@ const ListDisplay: React.FC<IListDisplay> = ({}) => {
   );
 
   return (
-    <Container>
-      <StyledP>Check how the item is displayed on the Item page:</StyledP>
+    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+      <p className="m-0 text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the Item page:</p>
       <ItemInformationCard
         props={props}
         policyURI="/ipfs/QmSxGYpXHBWBGvGnBeZD1pFxh8fRHj4Z7o3fBzrGiqNx4v/tokens-policy.pdf"
@@ -41,7 +29,7 @@ const ListDisplay: React.FC<IListDisplay> = ({}) => {
         disputed={false}
         isPreview
       />
-    </Container>
+    </div>
   );
 };
 export default ListDisplay;
diff --git a/web/src/pages/SubmitItem/Preview/index.tsx b/web/src/pages/SubmitItem/Preview/index.tsx
index d2a5c5e..0ed0140 100644
--- a/web/src/pages/SubmitItem/Preview/index.tsx
+++ b/web/src/pages/SubmitItem/Preview/index.tsx
@@ -1,62 +1,32 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import NavigationButtons from "../NavigationButtons";
 import ListDisplay from "./ListDisplay";
 import ItemDisplay from "./ItemDisplay";
+import clsx from "clsx";
 
-const Container = styled.div`
-  width: 100%;
-  padding: 0px ${responsiveSize(10, 130)};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const StyledCard = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: 1px dashed ${({ theme }) => theme.primaryBlue};
-  background-color: ${({ theme }) => theme.mediumBlue};
-  height: auto;
-  min-height: 100px;
-  margin-bottom: ${responsiveSize(0, 16)};
-  padding: ${responsiveSize(24, 48)} ${responsiveSize(24, 32)};
-  gap: 32px;
-  position: relative;
-`;
-
-const Title = styled.h2`
-  margin-bottom: 32px;
-  width: 84vw;
-  text-align: center;
-  font-weight: 600;
-
-  ${landscapeStyle(
-    () => css`
-      width: auto;
-    `
-  )}
-`;
-const Overlay = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-`;
 const Preview: React.FC = () => {
   return (
-    <Container>
-      <Title>Preview</Title>
-      <StyledCard>
+    <div className="flex flex-col items-center w-full py-0" style={{ paddingInline: responsiveSize(10, 130) }}>
+      <h2 className="text-center font-semibold mb-8 w-[84vw] lg:w-auto">Preview</h2>
+      <Card
+        className={clsx(
+          "relative flex flex-col gap-8 w-full h-auto min-h-[100px]",
+          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue"
+        )}
+        style={{
+          marginBottom: responsiveSize(0, 16),
+          paddingBlock: responsiveSize(24, 48),
+          paddingInline: responsiveSize(24, 32),
+        }}
+      >
         <ListDisplay />
         <ItemDisplay />
-        <Overlay />
-      </StyledCard>
+        <div className="absolute w-full h-full" />
+      </Card>
       <NavigationButtons prevRoute="../policy" />
-    </Container>
+    </div>
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Timeline.tsx b/web/src/pages/SubmitItem/Timeline.tsx
index d940289..565a54e 100644
--- a/web/src/pages/SubmitItem/Timeline.tsx
+++ b/web/src/pages/SubmitItem/Timeline.tsx
@@ -1,23 +1,8 @@
 import React, { useMemo } from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useLocation } from "react-router-dom";
 import { Steps } from "@kleros/ui-components-library";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 
-const StyledSteps = styled(Steps)`
-  display: none;
-
-  ${landscapeStyle(
-    () => css`
-      display: flex;
-      position: absolute;
-      left: 2%;
-      height: 220px;
-    `
-  )}
-`;
-
 const Timeline: React.FC = () => {
   const location = useLocation();
   const { fieldProps } = useRegistryDetailsContext();
@@ -45,7 +30,7 @@ const Timeline: React.FC = () => {
     0
   );
 
-  return <StyledSteps {...{ items, currentItemIndex }} />;
+  return <Steps className="hidden lg:absolute lg:flex lg:left-[2%] lg:h-[220px]" {...{ items, currentItemIndex }} />;
 };
 
 export default Timeline;
diff --git a/web/src/pages/SubmitItem/Title.tsx b/web/src/pages/SubmitItem/Title.tsx
index e65a59e..140335c 100644
--- a/web/src/pages/SubmitItem/Title.tsx
+++ b/web/src/pages/SubmitItem/Title.tsx
@@ -1,24 +1,10 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-
-const Container = styled.h1`
-  margin-bottom: 32px;
-  width: 84vw;
-  text-align: center;
-
-  ${landscapeStyle(
-    () => css`
-      width: auto;
-    `
-  )}
-`;
 
 interface ITitle {
   text: string;
 }
 
 const Title: React.FC<ITitle> = ({ text }) => {
-  return <Container>{text}</Container>;
+  return <h1 className="mb-8 text-center w-[84vw] lg:w-auto">{text}</h1>;
 };
 export default Title;
diff --git a/web/src/pages/SubmitItem/index.tsx b/web/src/pages/SubmitItem/index.tsx
index 58f1e79..b6142ec 100644
--- a/web/src/pages/SubmitItem/index.tsx
+++ b/web/src/pages/SubmitItem/index.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect } from "react";
 import { Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
-import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 import { useAccount } from "wagmi";
 import ConnectWallet from "components/ConnectWallet";
 import Timeline from "./Timeline";
@@ -13,36 +11,7 @@ import ItemField from "./ItemField";
 import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 import EnsureAuth from "components/EnsureAuth";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${({ theme }) => theme.lightBackground};
-  padding: ${responsiveSize(24, 32)};
-  padding-top: ${responsiveSize(24, 28)};
-  padding-bottom: ${responsiveSize(76, 96)};
-  max-width: ${MAX_WIDTH_LANDSCAPE};
-  margin: 0 auto;
-`;
-
-const ConnectWalletContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const StyledEnsureAuth = styled(EnsureAuth)`
-  align-self: center;
-`;
-
-const MiddleContentContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  position: relative;
-`;
+import clsx from "clsx";
 
 const SubmitItem: React.FC = () => {
   const location = useLocation();
@@ -66,10 +35,17 @@ const SubmitItem: React.FC = () => {
   return (
     <>
       {<Header />}
-      <Container>
+      <div
+        className={clsx("flex flex-col w-full max-w-landscape", "bg-klerosUIComponentsLightBackground my-0 mx-auto")}
+        style={{
+          paddingInline: responsiveSize(24, 32),
+          paddingTop: responsiveSize(24, 28),
+          paddingBottom: responsiveSize(76, 96),
+        }}
+      >
         {isConnected ? (
-          <StyledEnsureAuth>
-            <MiddleContentContainer>
+          <EnsureAuth className="self-center">
+            <div className="flex justify-center relative">
               {isConnected && !isPreviewPage ? <Timeline /> : null}
               <Routes>
                 <Route index element={<Navigate to="item-field/0" replace />} />
@@ -77,16 +53,16 @@ const SubmitItem: React.FC = () => {
                 <Route path="/policy/*" element={<Policy />} />
                 <Route path="/preview/*" element={<Preview />} />
               </Routes>
-            </MiddleContentContainer>
-          </StyledEnsureAuth>
+            </div>
+          </EnsureAuth>
         ) : (
-          <ConnectWalletContainer>
+          <div className="flex flex-col items-center text-center text-klerosUIComponentsPrimaryText">
             To submit a new item, connect first
             <hr />
             <ConnectWallet />
-          </ConnectWalletContainer>
+          </div>
         )}
-      </Container>
+      </div>
     </>
   );
 };
diff --git a/web/src/styles/breakpoints.ts b/web/src/styles/breakpoints.ts
new file mode 100644
index 0000000..b81e4fa
--- /dev/null
+++ b/web/src/styles/breakpoints.ts
@@ -0,0 +1 @@
+export const LG_BREAKPOINT = 900;
diff --git a/web/src/styles/commonStyles.ts b/web/src/styles/commonStyles.ts
deleted file mode 100644
index f6ef00e..0000000
--- a/web/src/styles/commonStyles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { css } from "styled-components";
-
-export const hoverShortTransitionTiming = css`
-  transition: 0.1s;
-`;
-
-export const hoverLongTransitionTiming = css`
-  transition: 0.2s;
-`;
diff --git a/web/src/styles/customScrollbar.ts b/web/src/styles/customScrollbar.ts
deleted file mode 100644
index eef4e58..0000000
--- a/web/src/styles/customScrollbar.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { css } from "styled-components";
-
-export const customScrollbar = css`
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: ${({ theme }) => theme.violetPurple};
-    border-radius: 10px;
-    transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: ${({ theme }) => theme.secondaryPurple};
-  }
-  ::-webkit-scrollbar-thumb:active {
-    background-color: ${({ theme }) => theme.lavenderPurple};
-  }
-
-  // firefox
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => theme.violetPurple} transparent;
-`;
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
deleted file mode 100644
index 72e917d..0000000
--- a/web/src/styles/global-style.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { createGlobalStyle } from "styled-components";
-
-export const GlobalStyle = createGlobalStyle`
-  :root {
-    --toastify-color-info: ${({ theme }) => theme.primaryBlue};
-    --toastify-color-success: ${({ theme }) => theme.success};
-    --toastify-color-warning: ${({ theme }) => theme.warning};
-    --toastify-color-error: ${({ theme }) => theme.error};
-  }
-
-  .react-loading-skeleton {
-    z-index: 0;
-    --base-color: ${({ theme }) => theme.skeletonBackground};
-    --highlight-color: ${({ theme }) => theme.skeletonHighlight};
-  }
-
-  body {
-    font-family: "Open Sans", sans-serif;
-    margin: 0px;
-    background-color: ${({ theme }) => theme.lightBlue}
-  }
-
-  html {
-    box-sizing: border-box;
-  }
-
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-
-  *:focus {
-    outline: none;
-  }
-
-  .ReactModal__Overlay {
-    background-color: #1b003fcc !important;
-  }
-
-  h1 {
-    margin: 0 0 16px 0;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 32px;
-    color: ${({ theme }) => theme.primaryText};
-  }
-
-  h2 {
-    margin: 0 0 16px 0;
-    font-weight: 400;
-    font-size: 24px;
-    line-height: 32px;
-    color: ${({ theme }) => theme.primaryText};
-  }
-
-  h3 {
-    margin: 0 0 16px 0;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
-    color: ${({ theme }) => theme.primaryText};
-  }
-
-  p {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: ${({ theme }) => theme.primaryText};
-  }
-
-  textarea {
-    font-family: "Open Sans";
-    font-size: 14px;
-  }
-
-  small {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 18px;
-    color: ${({ theme }) => theme.primaryText};
-  }
-
-  label {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-    color: ${({ theme }) => theme.secondaryText};
-  }
-
-  a {
-    font-weight: 400;
-    font-size: 14px;
-    text-decoration: none;
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-
-  hr {
-    opacity: 1;
-    border: 1px solid ${({ theme }) => theme.stroke};
-  }
-
-  svg, img {
-    display: inline-block;
-    vertical-align: middle;
-  visibility: visible;
-
-  }
-
-  ul {
-    li {
-      color: ${({ theme }) => theme.primaryText};
-    }
-  }
-
-  .os-theme-dark {
-    --os-handle-bg: ${({ theme }) => theme.violetPurple};
-    --os-handle-bg-hover: ${({ theme }) => theme.secondaryPurple};
-    --os-handle-bg-active: ${({ theme }) => theme.lavenderPurple};
-  }
-
-  [class*="Toastify__toast-container"] {
-    top: unset;
-    padding-top: 20px !important;
-  }
-`;
diff --git a/web/src/styles/landscapeStyle.ts b/web/src/styles/landscapeStyle.ts
deleted file mode 100644
index ac781c1..0000000
--- a/web/src/styles/landscapeStyle.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
-
-export const MAX_WIDTH_LANDSCAPE = "1400px";
-
-export const BREAKPOINT_LANDSCAPE = 900;
-
-export const landscapeStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`
-  @media (min-width: ${BREAKPOINT_LANDSCAPE}px) {
-    ${() => styleFn()}
-  }
-`;
diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts
deleted file mode 100644
index b44dd17..0000000
--- a/web/src/styles/themes.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { lightTheme as componentsLightTheme, darkTheme as componentsDarkTheme } from "@kleros/ui-components-library";
-
-export const lightTheme = {
-  ...componentsLightTheme,
-  name: "light",
-  white: "#FFFFFF",
-  black: "#000000",
-  primaryPurple: "#4D00B4",
-  secondaryPurple: "#9013FE",
-  darkPurple: "#220050",
-  mediumPurple: "#F8F1FF",
-  lightPurple: "#FBF9FE",
-  violetPurple: "#6A1DCD",
-  lavenderPurple: "#BB72FF",
-  primaryBlue: "#009AFF",
-  secondaryBlue: "#7BCBFF",
-  mediumBlue: "#F0F9FF",
-  lightBlue: "#FCFEFF",
-  primaryText: "#333333",
-  secondaryText: "#999999",
-  stroke: "#e5e5e5",
-  lightGrey: "#F0F0F0",
-
-  whiteBackground: "#FFFFFF",
-  lightBackground: "#FAFBFC",
-
-  defaultShadow: "#00000002",
-  hoveredShadow: "#00000002",
-  whiteLowOpacitySubtle: "#FFFFFF0D",
-  whiteLowOpacityStrong: "#FFFFFF26",
-  blackLowOpacity: "#00000080",
-
-  success: "#00C42B",
-  successLight: "#F0FBF2",
-  warning: "#FF9900",
-  warningLight: "#FFF9F0",
-  error: "#F60C36",
-  errorLight: "#FEF0F3",
-  tint: "#D14EFF",
-  tintMedium: "#FCF4FF",
-  tintPurple: "#F4F0FA",
-
-  transitionSpeed: "0.25s",
-
-  skeletonBackground: "#EBEBEB",
-  skeletonHighlight: "#F5F5F5",
-
-  paleCyan: "#ACFFFF",
-  limeGreen: "#F3FFD9",
-};
-
-export const darkTheme = {
-  ...componentsDarkTheme,
-  name: "dark",
-  white: "#FFFFFF",
-  black: "#000000",
-  primaryPurple: "#7E1BD4",
-  secondaryPurple: "#B45FFF",
-  darkPurple: "#220050",
-  mediumPurple: "#390F6C",
-  lightPurple: "#FCFBFF",
-  violetPurple: "#6A1DCD",
-  lavenderPurple: "#BB72FF",
-  primaryBlue: "#6CC5FF",
-  secondaryBlue: "#A5DBFF",
-  mediumBlue: "#2E206C",
-  lightBlue: "#2A1260",
-  primaryText: "#DAF0FF",
-  secondaryText: "#BECCE5",
-  stroke: "#392C74",
-  lightGrey: "#2D1865",
-
-  whiteBackground: "#220050",
-  lightBackground: "#1B003F",
-
-  defaultShadow: "#00000000",
-  hoveredShadow: "#42498f80",
-  whiteLowOpacitySubtle: "#FFFFFF0F",
-  whiteLowOpacityStrong: "#FFFFFF24",
-  blackLowOpacity: "#00000080",
-
-  success: "#65DC7F",
-  successLight: "#32355B",
-  warning: "#FFC46B",
-  warningLight: "#451F54",
-  error: "#FF5A78",
-  errorLight: "#360652",
-  tint: "#DDB6FF",
-  tintMedium: "#401D6C",
-  tintPurple: "#2F0960",
-
-  transitionSpeed: "0.25s",
-
-  skeletonBackground: "#3A2270",
-  skeletonHighlight: "#3E307C",
-
-  paleCyan: "#ACFFFF",
-  limeGreen: "#F3FFD9",
-};
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 625a5be..d66828c 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,4 +1,6 @@
 import { Roles } from "@kleros/kleros-app";
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
 export const capitalize = (str: string) => {
@@ -38,3 +40,7 @@ export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
     (1024 * 1024)
   ).toFixed(2)} MB.`;
 };
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
diff --git a/web/vite.config.js b/web/vite.config.js
index 72937a5..3c19c0a 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   root: "src",
@@ -28,5 +29,6 @@ export default defineConfig({
     nodePolyfills({
       include: ["fs", "stream"],
     }),
+    tailwindcss(),
   ],
 });
diff --git a/yarn.lock b/yarn.lock
index ba5852a..e52fc2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -358,7 +358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
@@ -882,7 +882,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3":
+"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
@@ -1827,7 +1827,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.8.4":
   version: 7.23.9
   resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
@@ -1876,7 +1876,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2":
+"@babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.7.2":
   version: 7.23.9
   resolution: "@babel/traverse@npm:7.23.9"
   dependencies:
@@ -2639,17 +2639,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@datepicker-react/hooks@npm:^2.8.4":
-  version: 2.8.4
-  resolution: "@datepicker-react/hooks@npm:2.8.4"
-  dependencies:
-    date-fns: "npm:^2.14.0"
-  peerDependencies:
-    react: ">= 16.8.5"
-  checksum: 1f4301bce7c32efa35b982e6697718a541e1ecb4d636d5f27240ea16780ef9e5f04e59083a364f9e4f79a5fd20a13774128bcb5e9b9a3bee0773e74d1a04277b
-  languageName: node
-  linkType: hard
-
 "@ecies/ciphers@npm:^0.2.2":
   version: 0.2.2
   resolution: "@ecies/ciphers@npm:0.2.2"
@@ -2659,21 +2648,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:1.2.2":
-  version: 1.2.2
-  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+"@emnapi/core@npm:^1.5.0":
+  version: 1.7.0
+  resolution: "@emnapi/core@npm:1.7.0"
   dependencies:
-    "@emotion/memoize": "npm:^0.8.1"
-  checksum: 0fa3960abfbe845d40cc230ab8c9408e1f33d3c03b321980359911c7212133cdcb0344d249e9dab23342b304567eece7a10ec44b986f7230e0640ba00049dceb
+    "@emnapi/wasi-threads": "npm:1.1.0"
+    tslib: "npm:^2.4.0"
+  checksum: 43bb6fd7419b9589fe8190a09fce84e52c04cef171bcb1c411c278fb5380c4a76081776e5094f42c220deaf49e2e41905de5569209790ffee9b8efa59c987829
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
-  version: 1.2.1
-  resolution: "@emotion/is-prop-valid@npm:1.2.1"
+"@emnapi/runtime@npm:^1.5.0":
+  version: 1.7.0
+  resolution: "@emnapi/runtime@npm:1.7.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 4dc726eb42fe2c7777fd32090f3e5e006c630e1a732538139caa18daf586e883e81c562cd69b0622db16e76bb572a2dde30711494edcee4a34059b62f5f46267
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.1.0, @emnapi/wasi-threads@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emnapi/wasi-threads@npm:1.1.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 0d557e75262d2f4c95cb2a456ba0785ef61f919ce488c1d76e5e3acfd26e00c753ef928cd80068363e0c166ba8cc0141305daf0f81aad5afcd421f38f11e0f4e
+  languageName: node
+  linkType: hard
+
+"@emotion/is-prop-valid@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
   dependencies:
     "@emotion/memoize": "npm:^0.8.1"
-  checksum: fe231c472d38b3bbe519bcc9a5585cd41c45604147f3a065e333caf0f695d668aa21bc4229e657c1b6ea7398e096899e6ad54662548c73f11f6ba594aebd76a1
+  checksum: 0fa3960abfbe845d40cc230ab8c9408e1f33d3c03b321980359911c7212133cdcb0344d249e9dab23342b304567eece7a10ec44b986f7230e0640ba00049dceb
   languageName: node
   linkType: hard
 
@@ -2684,13 +2692,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/stylis@npm:^0.8.4":
-  version: 0.8.5
-  resolution: "@emotion/stylis@npm:0.8.5"
-  checksum: ceaa673457f501a393cb52873b2bc34dbe35ef0fb8faa4b943d73ecbbb42bc3cea53b87cbf482038b7b9b1f95859be3d8b58d508422b4d15aec5b62314cc3c1e
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:0.8.1":
   version: 0.8.1
   resolution: "@emotion/unitless@npm:0.8.1"
@@ -2698,13 +2699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.4":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
-  languageName: node
-  linkType: hard
-
 "@esbuild/aix-ppc64@npm:0.19.12":
   version: 0.19.12
   resolution: "@esbuild/aix-ppc64@npm:0.19.12"
@@ -3999,6 +3993,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formatjs/ecma402-abstract@npm:2.3.6":
+  version: 2.3.6
+  resolution: "@formatjs/ecma402-abstract@npm:2.3.6"
+  dependencies:
+    "@formatjs/fast-memoize": "npm:2.2.7"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
+    decimal.js: "npm:^10.4.3"
+    tslib: "npm:^2.8.0"
+  checksum: 30b1b5cd6b62ba46245f934429936592df5500bc1b089dc92dd49c826757b873dd92c305dcfe370701e4df6b057bf007782113abb9b65db550d73be4961718bc
+  languageName: node
+  linkType: hard
+
+"@formatjs/fast-memoize@npm:2.2.7":
+  version: 2.2.7
+  resolution: "@formatjs/fast-memoize@npm:2.2.7"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: e7e6efc677d63a13d99a854305db471b69f64cbfebdcb6dbe507dab9aa7eaae482ca5de86f343c856ca0a2c8f251672bd1f37c572ce14af602c0287378097d43
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-messageformat-parser@npm:2.11.4":
+  version: 2.11.4
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.4"
+  dependencies:
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/icu-skeleton-parser": "npm:1.8.16"
+    tslib: "npm:^2.8.0"
+  checksum: 2acb100c06c2ade666d72787fb9f9795b1ace41e8e73bfadc2b1a7b8562e81f655e484f0f33d8c39473aa17bf0ad96fb2228871806a9b3dc4f5f876754a0de3a
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-skeleton-parser@npm:1.8.16":
+  version: 1.8.16
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.16"
+  dependencies:
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    tslib: "npm:^2.8.0"
+  checksum: 428001e5bed81889b276a2356a1393157af91dc59220b765a1a132f6407ac5832b7ac6ae9737674ac38e44035295c0c1c310b2630f383f2b5779ea90bf2849e6
+  languageName: node
+  linkType: hard
+
+"@formatjs/intl-localematcher@npm:0.6.2":
+  version: 0.6.2
+  resolution: "@formatjs/intl-localematcher@npm:0.6.2"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: eb12a7f5367bbecdfafc20d7f005559ce840f420e970f425c5213d35e94e86dfe75bde03464971a26494bf8427d4961269db22ecad2834f2a19d888b5d9cc064
+  languageName: node
+  linkType: hard
+
 "@graphprotocol/graph-cli@npm:^0.95.0":
   version: 0.95.0
   resolution: "@graphprotocol/graph-cli@npm:0.95.0"
@@ -4904,6 +4949,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@internationalized/date@npm:^3.10.0, @internationalized/date@npm:^3.7.0":
+  version: 3.10.0
+  resolution: "@internationalized/date@npm:3.10.0"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 5940667ea2b0be54b798088ef995f787508bf4305d3741babc8b1f48de008c872555a5440ae61fa7399461a7339d3257fb8e86cc2111e72e185fc37d99e06392
+  languageName: node
+  linkType: hard
+
+"@internationalized/message@npm:^3.1.8":
+  version: 3.1.8
+  resolution: "@internationalized/message@npm:3.1.8"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+    intl-messageformat: "npm:^10.1.0"
+  checksum: 8f27a31f5d1eef7084447ed141e896e12cc19d786a1346ba60137de5b8bcc58a9da978d79954e2a74302aa673f942fb772130ebd6195565e33db30bd7eb4ef47
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@internationalized/number@npm:3.6.5"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: f80618842b9b8ea04e235277911eeb8e2ee129f1b266b94704a9f773df7536486c25db41ae708f6c2f4845cdb0a25e7d1856332370daba6c530528ac0ee997e3
+  languageName: node
+  linkType: hard
+
+"@internationalized/string@npm:^3.2.7":
+  version: 3.2.7
+  resolution: "@internationalized/string@npm:3.2.7"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 38b54817cf125ba88d1136a6bca4fb57c46672d26d21490f838efe928049546800df6d9c8048411696455fc8caacb8ac23c2de2a1b61f2258b1302c1c97cc128
+  languageName: node
+  linkType: hard
+
 "@ioredis/commands@npm:^1.1.1":
   version: 1.2.0
   resolution: "@ioredis/commands@npm:1.2.0"
@@ -5246,6 +5328,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/remapping@npm:^2.3.4":
+  version: 2.3.5
+  resolution: "@jridgewell/remapping@npm:2.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: c2bb01856e65b506d439455f28aceacf130d6c023d1d4e3b48705e88def3571753e1a887daa04b078b562316c92d26ce36408a60534bceca3f830aec88a339ad
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.1
   resolution: "@jridgewell/resolve-uri@npm:3.1.1"
@@ -5291,6 +5383,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: 5d9d207b462c11e322d71911e55e21a4e2772f71ffe8d6f1221b8eb5ae6774458c1d242f897fb0814e8714ca9a6b498abfa74dfe4f434493342902b1a48b33a5
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:0.3.9":
   version: 0.3.9
   resolution: "@jridgewell/trace-mapping@npm:0.3.9"
@@ -5446,16 +5545,15 @@ __metadata:
     "@kleros/curate-v2-tsconfig": "workspace:^"
     "@kleros/kleros-app": "npm:^2.0.2"
     "@kleros/kleros-v2-contracts": "npm:^0.10.0"
-    "@kleros/ui-components-library": "npm:^2.20.0"
+    "@kleros/ui-components-library": "npm:^3.6.0"
     "@reown/appkit": "npm:^1.6.6"
     "@reown/appkit-adapter-wagmi": "npm:^1.6.6"
     "@sentry/react": "npm:^7.93.0"
     "@sentry/tracing": "npm:^7.93.0"
+    "@tailwindcss/vite": "npm:^4.1.16"
     "@tanstack/react-query": "npm:^5.66.0"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18.3.1"
-    "@types/react-modal": "npm:^3.16.3"
-    "@types/styled-components": "npm:^5.1.34"
     "@typescript-eslint/eslint-plugin": "npm:^5.62.0"
     "@typescript-eslint/parser": "npm:^5.62.0"
     "@typescript-eslint/utils": "npm:^5.62.0"
@@ -5465,6 +5563,7 @@ __metadata:
     "@yornaath/batshit": "npm:^0.9.0"
     chart.js: "npm:^3.9.1"
     chartjs-adapter-moment: "npm:^1.0.1"
+    clsx: "npm:^2.1.1"
     core-js: "npm:^3.35.0"
     eslint: "npm:^8.56.0"
     eslint-config-prettier: "npm:^8.10.0"
@@ -5486,13 +5585,13 @@ __metadata:
     react-is: "npm:^18.2.0"
     react-loading-skeleton: "npm:^3.3.1"
     react-markdown: "npm:^8.0.7"
-    react-modal: "npm:^3.16.1"
     react-router-dom: "npm:^6.21.2"
     react-scripts: "npm:^5.0.1"
     react-toastify: "npm:^9.1.3"
     react-use: "npm:^17.4.3"
-    styled-components: "npm:^5.3.11"
     subgraph-status: "npm:^1.2.4"
+    tailwind-merge: "npm:^3.3.1"
+    tailwindcss: "npm:^4.1.16"
     typescript: "npm:^5.3.3"
     viem: "npm:^2.27.2"
     vite: "npm:^5.4.2"
@@ -5535,26 +5634,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kleros/ui-components-library@npm:^2.20.0":
-  version: 2.20.0
-  resolution: "@kleros/ui-components-library@npm:2.20.0"
+"@kleros/ui-components-library@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@kleros/ui-components-library@npm:3.6.0"
   dependencies:
-    "@datepicker-react/hooks": "npm:^2.8.4"
-    "@swc/helpers": "npm:^0.3.2"
-    rc-slider: "npm:^9.7.5"
+    "@internationalized/date": "npm:^3.7.0"
+    bignumber.js: "npm:^9.1.2"
+    clsx: "npm:^2.1.1"
+    lodash: "npm:^4.17.21"
     react: "npm:^18.0.0"
+    react-aria-components: "npm:^1.7.1"
     react-dom: "npm:^18.0.0"
     react-is: "npm:^18.0.0"
     simplebar: "npm:^5.3.6"
     simplebar-react: "npm:^2.3.6"
-    smooth-scroll-into-view-if-needed: "npm:^1.1.33"
+    tailwind-merge: "npm:^3.0.2"
+    tailwindcss-react-aria-components: "npm:^2.0.0"
     usehooks-ts: "npm:^2.9.1"
   peerDependencies:
+    "@tailwindcss/postcss": ^4.0.11
     react: ^18.0.0
     react-dom: ^18.0.0
     react-is: ^18.0.0
-    styled-components: ^5.3.3
-  checksum: c0e08f0e71e8b09ebd659477e62d4586f5159383d00c81524ae00088a2b4181c0ef5449adced094dacb8b1f830efab4ccd4088d5bfb2d4dae4ed38fc93344542
+    tailwindcss: ^4.0.11
+  checksum: c95a5ec083396de0e3bee520e95a1921cc4ca0f4ff6e6c8e035c4c59919a84d75aa961bd62afad7d7ac35a989e641f7d0b8065545d77e64fdefc8b01f88e67a0
   languageName: node
   linkType: hard
 
@@ -6124,6 +6227,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "@napi-rs/wasm-runtime@npm:1.0.7"
+  dependencies:
+    "@emnapi/core": "npm:^1.5.0"
+    "@emnapi/runtime": "npm:^1.5.0"
+    "@tybys/wasm-util": "npm:^0.10.1"
+  checksum: 6bc32d32d486d07b83220a9b7b2b715e39acacbacef0011ebca05c00b41d80a0535123da10fea7a7d6d7e206712bb50dc50ac3cf88b770754d44378570fb5c05
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
   version: 5.1.1-v1
   resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
@@ -6998,201 +7112,1887 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.14.2":
-  version: 1.14.2
-  resolution: "@remix-run/router@npm:1.14.2"
-  checksum: 422844e88b985f1e287301b302c6cf8169c9eea792f80d40464f97b25393bb2e697228ebd7a7b61444d5a51c5873c4a637aad20acde5886a5caf62e833c5ceee
+"@react-aria/autocomplete@npm:3.0.0-rc.3":
+  version: 3.0.0-rc.3
+  resolution: "@react-aria/autocomplete@npm:3.0.0-rc.3"
+  dependencies:
+    "@react-aria/combobox": "npm:^3.14.0"
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/listbox": "npm:^3.15.0"
+    "@react-aria/searchfield": "npm:^3.8.9"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/autocomplete": "npm:3.0.0-beta.3"
+    "@react-stately/combobox": "npm:^3.12.0"
+    "@react-types/autocomplete": "npm:3.0.0-alpha.35"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7acddd01b0f07bdbd2cf09d01a8b0fb9551d27656a92adf995411620a1599f8ff6421a72de1fcd56611d5eced49073cae48aee8127f3620fc1ca38d4ce3dcb62
   languageName: node
   linkType: hard
 
-"@reown/appkit-adapter-wagmi@npm:^1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-adapter-wagmi@npm:1.6.6"
+"@react-aria/breadcrumbs@npm:^3.5.29":
+  version: 3.5.29
+  resolution: "@react-aria/breadcrumbs@npm:3.5.29"
   dependencies:
-    "@reown/appkit": "npm:1.6.6"
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-core": "npm:1.6.6"
-    "@reown/appkit-polyfills": "npm:1.6.6"
-    "@reown/appkit-scaffold-ui": "npm:1.6.6"
-    "@reown/appkit-ui": "npm:1.6.6"
-    "@reown/appkit-utils": "npm:1.6.6"
-    "@reown/appkit-wallet": "npm:1.6.6"
-    "@wagmi/connectors": "npm:>=5.7"
-    "@walletconnect/universal-provider": "npm:2.18.0"
-    "@walletconnect/utils": "npm:2.18.0"
-    valtio: "npm:1.13.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/link": "npm:^3.8.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/breadcrumbs": "npm:^3.7.17"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
-    "@wagmi/core": ">=2.16"
-    viem: 2.x
-    wagmi: ">=2.14"
-  dependenciesMeta:
-    "@wagmi/connectors":
-      optional: true
-  checksum: a2bff6baf37f626de0581b785e52a3a911fa4d3c550eaf8212ec78ea83a06f59641cb331d3e9e6c35cf2f296116ff436483b879e65dac53e0e33f37a8c2c319f
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 875c2280539362e33200a9869dc52e5cec8a7407e068faa70cc190eaf266135448410acf9dd37b59bd86e53f330ac32e7598ceec468a2339cc04f18f826c4cbc
   languageName: node
   linkType: hard
 
-"@reown/appkit-common@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-common@npm:1.6.6"
+"@react-aria/button@npm:^3.14.2":
+  version: 3.14.2
+  resolution: "@react-aria/button@npm:3.14.2"
   dependencies:
-    big.js: "npm:6.2.2"
-    dayjs: "npm:1.11.10"
-    viem: "npm:2.x"
-  checksum: 0e3d258a9cb136e032aebb5a5d75aa55e02d8cc47ccd7819e241d8ea003a173d12a0a423c2db479b6c1732a0e687f804e22b1057dfb621be8568943721f6e97a
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/toolbar": "npm:3.0.0-beta.21"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/toggle": "npm:^3.9.2"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: d6891ab39a81b349a80ac2c381a5663e33caf209d29aa536b0a8ca2963898b011913593c71f4bceb3f48a54a95cd5bc842b0ffbb33498d38a120d1a6d28f932b
   languageName: node
   linkType: hard
 
-"@reown/appkit-core@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-core@npm:1.6.6"
+"@react-aria/calendar@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-aria/calendar@npm:3.9.2"
   dependencies:
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-wallet": "npm:1.6.6"
-    "@walletconnect/universal-provider": "npm:2.18.0"
-    valtio: "npm:1.13.2"
-    viem: "npm:2.x"
-  checksum: 5931149f28dd4ab80257bc205d3ed897522575c3798a7f16edd235d56aab4ab9f922467c9e4c3169019c6d1ff6778ad32eed3579e5953845ec8cd20dcac15dd3
+    "@internationalized/date": "npm:^3.10.0"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/calendar": "npm:^3.9.0"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/calendar": "npm:^3.8.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3697b14765895c864db1a9393b86e0370cda01fab44464e9c1966150d7c793bcc9fd1e7a50d34022b0730fcaf9fd1995d431ccb1b5518eb086ccfb4b35e47ff2
   languageName: node
   linkType: hard
 
-"@reown/appkit-polyfills@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-polyfills@npm:1.6.6"
+"@react-aria/checkbox@npm:^3.16.2":
+  version: 3.16.2
+  resolution: "@react-aria/checkbox@npm:3.16.2"
   dependencies:
-    buffer: "npm:6.0.3"
-  checksum: eba2f2cb72469ac6ead47e4fb9dab7d2971af7e700a11e03753e8591bc3aaeba7dac709f9197dd3c0be8954a7f3d7f81ee9e3dfecf41eb53bac9b7ee4f2e6ac5
+    "@react-aria/form": "npm:^3.1.2"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/toggle": "npm:^3.12.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/checkbox": "npm:^3.7.2"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/toggle": "npm:^3.9.2"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 77058d41d78b8feea4801022ba56f225b69f9b6577edc42a747dea21e4b38ea8d343f3a38455e9ae47a95a41b77e37fa0929a7136507f7b446111919f5e34478
+  languageName: node
+  linkType: hard
+
+"@react-aria/collections@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@react-aria/collections@npm:3.0.0"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+    use-sync-external-store: "npm:^1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2704d35e0cc67e8e2f7fa61f593160768a633e2ff3ced45f01806928dc15738dcd005c49ff7130c0c92fbaabf0b0624833e54b7d24a10181c7910a469a9da52b
   languageName: node
   linkType: hard
 
-"@reown/appkit-scaffold-ui@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-scaffold-ui@npm:1.6.6"
+"@react-aria/color@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@react-aria/color@npm:3.1.2"
   dependencies:
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-core": "npm:1.6.6"
-    "@reown/appkit-ui": "npm:1.6.6"
-    "@reown/appkit-utils": "npm:1.6.6"
-    "@reown/appkit-wallet": "npm:1.6.6"
-    lit: "npm:3.1.0"
-  checksum: fd32f533c9c037a198b858499b63cc0e6ce7d1f58d27ce0f08c3d0cf76577710bb6e4cdcc4bc97753f4d3192c106800745488b926857eb5da5cfe8076d8dd84c
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/numberfield": "npm:^3.12.2"
+    "@react-aria/slider": "npm:^3.8.2"
+    "@react-aria/spinbutton": "npm:^3.6.19"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/visually-hidden": "npm:^3.8.28"
+    "@react-stately/color": "npm:^3.9.2"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-types/color": "npm:^3.1.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 8b2c29097e86e2fa30bb5a53777dd09a7b2b24f6fb44ac1847275345aa895bb663735dcdc94bac90ba6fee074f11fe571f7effc5ba4ac4adb0bc87f67705479c
   languageName: node
   linkType: hard
 
-"@reown/appkit-ui@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-ui@npm:1.6.6"
+"@react-aria/combobox@npm:^3.14.0":
+  version: 3.14.0
+  resolution: "@react-aria/combobox@npm:3.14.0"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/listbox": "npm:^3.15.0"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/menu": "npm:^3.19.3"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/combobox": "npm:^3.12.0"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/combobox": "npm:^3.13.9"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e583a99133b884e49b5848271a18d3dcbc6fdb4fb9aa9477d2164790b7386ada3316f6a4c19af3e8d989ed9c6207af12e2377c2f1644e8114afd916697a26c33
+  languageName: node
+  linkType: hard
+
+"@react-aria/datepicker@npm:^3.15.2":
+  version: 3.15.2
+  resolution: "@react-aria/datepicker@npm:3.15.2"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@internationalized/number": "npm:^3.6.5"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/form": "npm:^3.1.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/spinbutton": "npm:^3.6.19"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/datepicker": "npm:^3.15.2"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/calendar": "npm:^3.8.0"
+    "@react-types/datepicker": "npm:^3.13.2"
+    "@react-types/dialog": "npm:^3.5.22"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 05f9b7bda5e5aa304ea4eebfded8040ea040b12284f2aa67f6b2a9e5458526a1e8dfbe077a53989a8633debb8184123e0907186f5b511c5a4c85a48f4c755f4b
+  languageName: node
+  linkType: hard
+
+"@react-aria/dialog@npm:^3.5.31":
+  version: 3.5.31
+  resolution: "@react-aria/dialog@npm:3.5.31"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/dialog": "npm:^3.5.22"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: ea5d197b13d1441b45b5288382f9f25cf4ecec07ea6c8e989ce62b5f0ce2eaa7e6afe7e40fc808451b040eda2c41aa64f8e510d5205b26a5a07324b86468e53d
+  languageName: node
+  linkType: hard
+
+"@react-aria/disclosure@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@react-aria/disclosure@npm:3.1.0"
   dependencies:
-    lit: "npm:3.1.0"
-    qrcode: "npm:1.5.3"
-  checksum: 7959d754d6e2885b49e2fa6334fd0081db7db48891d24adbb80aec185804e997ea6d758e2805e9d982064c05142abb3b5405916dc2b669e8e85c5ebdc2fc70de
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/disclosure": "npm:^3.0.8"
+    "@react-types/button": "npm:^3.14.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 34f5a0b5c7130fc686025f8015cefe219b84ed153dbca93ee4b47b2f598ca833ed161426dc76d2f09ee480b88741df046fcbb600516eb77b919afcb80b1b61a3
   languageName: node
   linkType: hard
 
-"@reown/appkit-utils@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-utils@npm:1.6.6"
+"@react-aria/dnd@npm:^3.11.3":
+  version: 3.11.3
+  resolution: "@react-aria/dnd@npm:3.11.3"
   dependencies:
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-core": "npm:1.6.6"
-    "@reown/appkit-polyfills": "npm:1.6.6"
-    "@reown/appkit-wallet": "npm:1.6.6"
-    "@walletconnect/logger": "npm:2.1.2"
-    "@walletconnect/universal-provider": "npm:2.18.0"
-    valtio: "npm:1.13.2"
-    viem: "npm:2.x"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/dnd": "npm:^3.7.1"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
-    valtio: 1.13.2
-  checksum: 20ef803ced0e53663f250618650e468a8edab39cccfb42ce5b3394a525cbedd9e6266a562d8241a60a81e27ab52c4bd6de3e945081648ffb1feefaee24a2f633
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 48c58ab1fdb0e4dfce2e5933b580df3e46c0407535a28d2434fc6921d049bde45d0b3b94b7f3f4775e683e77c4a5b17ccfd9894c345230b7f49c7c0742663dce
   languageName: node
   linkType: hard
 
-"@reown/appkit-wallet@npm:1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit-wallet@npm:1.6.6"
+"@react-aria/focus@npm:^3.21.2":
+  version: 3.21.2
+  resolution: "@react-aria/focus@npm:3.21.2"
   dependencies:
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-polyfills": "npm:1.6.6"
-    "@walletconnect/logger": "npm:2.1.2"
-    zod: "npm:3.22.4"
-  checksum: b2298e721e0cfb938a456b8d7e9ac5557dbb7366fa78cacb5304a054d47f91e99cb87cc1b0000a61b2811291317ae0c09c1980615ffab4684e8b6ad6e110cb5e
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+    clsx: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 4bce20d956c24ab08b707e84896afafd66b3496971efb6dd611dae1c4c1f47a5c99c786a96b2fd0eb083a7c9ba5368ac04ce3a937cc48fdcc8bb85f81e7a3098
   languageName: node
   linkType: hard
 
-"@reown/appkit@npm:1.6.6, @reown/appkit@npm:^1.6.6":
-  version: 1.6.6
-  resolution: "@reown/appkit@npm:1.6.6"
+"@react-aria/form@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@react-aria/form@npm:3.1.2"
   dependencies:
-    "@reown/appkit-common": "npm:1.6.6"
-    "@reown/appkit-core": "npm:1.6.6"
-    "@reown/appkit-polyfills": "npm:1.6.6"
-    "@reown/appkit-scaffold-ui": "npm:1.6.6"
-    "@reown/appkit-ui": "npm:1.6.6"
-    "@reown/appkit-utils": "npm:1.6.6"
-    "@reown/appkit-wallet": "npm:1.6.6"
-    "@walletconnect/types": "npm:2.18.0"
-    "@walletconnect/universal-provider": "npm:2.18.0"
-    "@walletconnect/utils": "npm:2.18.0"
-    bs58: "npm:6.0.0"
-    valtio: "npm:1.13.2"
-    viem: "npm:2.x"
-  checksum: addda371d4b87e4f3893b5865a7b15dbfd3799e6509428676795641ee13ce7376b80569dd1c74009294f2c2e3939d34dbd095e57034bf5d9790618fd04866425
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 140d8cb830fab6fc4d885e79fbdfc92f06af43134b6ab68ec93b58fec25220b823b58698bd9bbd574bc21d1c0d443813df89b44f5ea33b5bcd314128560bd4fd
   languageName: node
   linkType: hard
 
-"@repeaterjs/repeater@npm:^3.0.4":
-  version: 3.0.5
-  resolution: "@repeaterjs/repeater@npm:3.0.5"
-  checksum: 7478df13bd4631729021b2f43524fe71a4ed04b3c1c2125315078e3954f059f2ff4da5776f9be8f76008df9849e866e5ec56120f41b8bf66d2ec1a7c7bc53229
+"@react-aria/grid@npm:^3.14.5":
+  version: 3.14.5
+  resolution: "@react-aria/grid@npm:3.14.5"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/grid": "npm:^3.11.6"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7e8731b55366b05f619259fbeb149b63d7c17158e25a2ebaacbe3368f50e71f054e4cef3a943ca6076d3ebf0242cfcb155ff276ab984a7495dc46f6b5b13f1d2
   languageName: node
   linkType: hard
 
-"@rescript/std@npm:9.0.0":
-  version: 9.0.0
-  resolution: "@rescript/std@npm:9.0.0"
-  checksum: 3f68fdc7daad61aba8369055611800347b9be3a621ed7d465abcd42600515ca78a0decff51f2d3d2ae9d31f31c58ae3bbb41e3d5fcd42e135f9b7ce0f8de8de7
+"@react-aria/gridlist@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-aria/gridlist@npm:3.14.1"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/grid": "npm:^3.14.5"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-stately/tree": "npm:^3.9.3"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 1d7ff55a869a3157edd266b5d14a9e1380561bcb8d949fdd43e983e64932ec251aa7221e6156e93ea977b8942c5b9b8f9aae5f04ebc2ed27eef9be2b7e00b5ab
   languageName: node
   linkType: hard
 
-"@rollup/plugin-babel@npm:^5.2.0":
-  version: 5.3.1
-  resolution: "@rollup/plugin-babel@npm:5.3.1"
+"@react-aria/i18n@npm:^3.12.13":
+  version: 3.12.13
+  resolution: "@react-aria/i18n@npm:3.12.13"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.10.4"
-    "@rollup/pluginutils": "npm:^3.1.0"
+    "@internationalized/date": "npm:^3.10.0"
+    "@internationalized/message": "npm:^3.1.8"
+    "@internationalized/number": "npm:^3.6.5"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
-    "@babel/core": ^7.0.0
-    "@types/babel__core": ^7.1.9
-    rollup: ^1.20.0||^2.0.0
-  peerDependenciesMeta:
-    "@types/babel__core":
-      optional: true
-  checksum: eb3ee5fedd86fa39ad70c2f8e05f14f8b185261b9f63699a01ac7eae664167f2e5cf87377434bf6aadad7eaf2b13c955ac26f8332a02f8d6a46b3c91990a9fbc
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: a5464213e626c60d63e0dbab84907ab452c53022a27a5c482c8f86f23c96b53522e52005c5cfc829f388c807eaf246cded69d5bee24b9e0fc08f34f9b0359e82
   languageName: node
   linkType: hard
 
-"@rollup/plugin-inject@npm:^5.0.5":
-  version: 5.0.5
-  resolution: "@rollup/plugin-inject@npm:5.0.5"
+"@react-aria/interactions@npm:^3.25.6":
+  version: 3.25.6
+  resolution: "@react-aria/interactions@npm:3.25.6"
   dependencies:
-    "@rollup/pluginutils": "npm:^5.0.1"
-    estree-walker: "npm:^2.0.2"
-    magic-string: "npm:^0.30.3"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/flags": "npm:^3.1.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
   peerDependencies:
-    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-  peerDependenciesMeta:
-    rollup:
-      optional: true
-  checksum: 1d0e68dff0a8785398a1b6a7dac0dc0a7f2ded22319c0b4c411053f34cbe237ca897d1fc97e5150fddbc3486480f21cbeeb69f0ae7f44ab1ae7307c164c7e704
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: fd30e14107d919be25909ca8f69fb99d88aa1f1ead523717a390a40be6d774e40de47dd7f9fcc7e6d66e0f4abc12238001a10d2128cbd7af9b141641cacf6da4
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:^11.2.1":
-  version: 11.2.1
-  resolution: "@rollup/plugin-node-resolve@npm:11.2.1"
+"@react-aria/label@npm:^3.7.22":
+  version: 3.7.22
+  resolution: "@react-aria/label@npm:3.7.22"
   dependencies:
-    "@rollup/pluginutils": "npm:^3.1.0"
-    "@types/resolve": "npm:1.17.1"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2bbfca230465057230597fd23f47ebe591bb5307ff7e37a082a4922e132f1310b69a06dcb4905c356b674b159bd09c2ca690e0526d9f303bed8f66eeb8a61b13
+  languageName: node
+  linkType: hard
+
+"@react-aria/landmark@npm:^3.0.7":
+  version: 3.0.7
+  resolution: "@react-aria/landmark@npm:3.0.7"
+  dependencies:
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+    use-sync-external-store: "npm:^1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b86cbd8356fa08e01318644082b9ef948cb3d61695c3dfdb5bdc67a59ce3e3f774c91bf62795280c7ac620b87f9d7e66635c7e02a2c2eb2663b3e2b6a77a448a
+  languageName: node
+  linkType: hard
+
+"@react-aria/link@npm:^3.8.6":
+  version: 3.8.6
+  resolution: "@react-aria/link@npm:3.8.6"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/link": "npm:^3.6.5"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7f0fd02e7eb5c69ba5e280c57b0e7ec6568fbca231159f591201f9d753bd2f985613d0f75a54465f292a617684a55d8f5f10585538ce1fbc3f9f29fb3d339529
+  languageName: node
+  linkType: hard
+
+"@react-aria/listbox@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "@react-aria/listbox@npm:3.15.0"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-types/listbox": "npm:^3.7.4"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e361b11ab4ae521a3e4d41ea811f15e2863b97aa9e65c19eef06c38b9f378191c34dfedf545d1ea4667aa0b89aa157712ed6f78950d71cfc712643666cc59d7a
+  languageName: node
+  linkType: hard
+
+"@react-aria/live-announcer@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "@react-aria/live-announcer@npm:3.4.4"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 058859f7c0895bccd902f038586333016d7a33d38508e5edaf0f4c809a00217c19db3aa00604e78f3a788e399c3701a8d7fe95e2eb29c8ae754ff4bb62da1f7a
+  languageName: node
+  linkType: hard
+
+"@react-aria/menu@npm:^3.19.3":
+  version: 3.19.3
+  resolution: "@react-aria/menu@npm:3.19.3"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/menu": "npm:^3.9.8"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/tree": "npm:^3.9.3"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/menu": "npm:^3.10.5"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 04987d1fae12979335a755093b74e0a9c61d2bf1f207111bca2a8513ea43962b282315976d33e5f06d3e2e1fc1927e2f9030365c4e4a26024e156ebcb88a8d9c
+  languageName: node
+  linkType: hard
+
+"@react-aria/meter@npm:^3.4.27":
+  version: 3.4.27
+  resolution: "@react-aria/meter@npm:3.4.27"
+  dependencies:
+    "@react-aria/progress": "npm:^3.4.27"
+    "@react-types/meter": "npm:^3.4.13"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b79bc0f2a96b53ec427a25315cdec4a50dd1bc1cb1fbff9f84847c0bb2597851a514ecbbf4b0fbb18b165bc007142ad45bd432641301b8db990e09f281563d39
+  languageName: node
+  linkType: hard
+
+"@react-aria/numberfield@npm:^3.12.2":
+  version: 3.12.2
+  resolution: "@react-aria/numberfield@npm:3.12.2"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/spinbutton": "npm:^3.6.19"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/numberfield": "npm:^3.10.2"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/numberfield": "npm:^3.8.15"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7ec498b0d3bf6a55e891e61d1693a6395a3e7b89a04d81af433a0cb3dd673603ce5dd7f861d39658a5fe6c0cd48356c8120c39b9a4495563d9b13af0f8c0b3ca
+  languageName: node
+  linkType: hard
+
+"@react-aria/overlays@npm:^3.30.0":
+  version: 3.30.0
+  resolution: "@react-aria/overlays@npm:3.30.0"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/visually-hidden": "npm:^3.8.28"
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/overlays": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 32c25162b55078cf18ca6f514065d97982a9447b1ec9d75fda4db69fa909cd5dcc3d5b4c8917edecce7d8dd5b20bc51c3862945110c0badef021c86878e8fb4d
+  languageName: node
+  linkType: hard
+
+"@react-aria/progress@npm:^3.4.27":
+  version: 3.4.27
+  resolution: "@react-aria/progress@npm:3.4.27"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/progress": "npm:^3.5.16"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7b0ac3c2da6205096e94b4d72a2b2b0250f864cace05b562e49b86986dbebbab633e62fcc39ffa915974318de37d5f6256b1f584d8e33ebca70e564d32b3aca2
+  languageName: node
+  linkType: hard
+
+"@react-aria/radio@npm:^3.12.2":
+  version: 3.12.2
+  resolution: "@react-aria/radio@npm:3.12.2"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/form": "npm:^3.1.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/radio": "npm:^3.11.2"
+    "@react-types/radio": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 709bdd0515e797f2bf37dc17f55e46103aa918a4549880c15ecca7c03adc0716e5650376b1cc877437b12e5df4e3050138699707e4ec9fa611614a1e38b98eb0
+  languageName: node
+  linkType: hard
+
+"@react-aria/searchfield@npm:^3.8.9":
+  version: 3.8.9
+  resolution: "@react-aria/searchfield@npm:3.8.9"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/searchfield": "npm:^3.5.16"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/searchfield": "npm:^3.6.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: a088f7b1c434aea1d4603acb34e591c8f11a1532a41407b68336933a73e1e5f55b07bb6323642af5ebeebe39756e1e60943487d77d69882409c491fd816e86f4
+  languageName: node
+  linkType: hard
+
+"@react-aria/select@npm:^3.17.0":
+  version: 3.17.0
+  resolution: "@react-aria/select@npm:3.17.0"
+  dependencies:
+    "@react-aria/form": "npm:^3.1.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/listbox": "npm:^3.15.0"
+    "@react-aria/menu": "npm:^3.19.3"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/visually-hidden": "npm:^3.8.28"
+    "@react-stately/select": "npm:^3.8.0"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/select": "npm:^3.11.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e986470eb5d8c675fbd5753e0051827c94dad00c5472015d4744e4e9233e7a4ff97f4634e94c5686ef9f65f2b6ffa894b24f3a07bde0437de6fe5802901969cd
+  languageName: node
+  linkType: hard
+
+"@react-aria/selection@npm:^3.26.0":
+  version: 3.26.0
+  resolution: "@react-aria/selection@npm:3.26.0"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 6c3c59993c719cfdfd42ef9c753212e7bddf30c348117726e8abfe977876f583e0d0b6fa4ce73e46f1fa53e79e42f0866a333e257cef400c4a24bd5d1c81c379
+  languageName: node
+  linkType: hard
+
+"@react-aria/separator@npm:^3.4.13":
+  version: 3.4.13
+  resolution: "@react-aria/separator@npm:3.4.13"
+  dependencies:
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 4326c36d002f3931c8c717b7aacbe30943d42ca190fe400a151d8f480dd65359a0bc9192da33213d4e8215bbfd47436de07fedfe957e83be4101a926d116862e
+  languageName: node
+  linkType: hard
+
+"@react-aria/slider@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@react-aria/slider@npm:3.8.2"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/slider": "npm:^3.7.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/slider": "npm:^3.8.2"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3b9115eaf61f722929dcb739cd910b9e84f04644fdce8add21bc0f9305a3e7d0948c2e417afe424783b22738d52060505a32187aba1e7aca19dd572ebb6d10ed
+  languageName: node
+  linkType: hard
+
+"@react-aria/spinbutton@npm:^3.6.19":
+  version: 3.6.19
+  resolution: "@react-aria/spinbutton@npm:3.6.19"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 9b87a1c87a09ddde141bb23e8e3ce1b1137cb1931df848d6fd3bbcd0773b3579045413b725686629da02c22733ad5b5dfc57e06c5fefaf07f8cfb8c4e2334997
+  languageName: node
+  linkType: hard
+
+"@react-aria/ssr@npm:^3.9.10":
+  version: 3.9.10
+  resolution: "@react-aria/ssr@npm:3.9.10"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3b414b5b174769e874014604749d9beaf2556f360f61d3df3223bca6150c16dd37fbf16800e669a2b0045bd221df70212756991a426a7a472c56aac6c0dabd1b
+  languageName: node
+  linkType: hard
+
+"@react-aria/switch@npm:^3.7.8":
+  version: 3.7.8
+  resolution: "@react-aria/switch@npm:3.7.8"
+  dependencies:
+    "@react-aria/toggle": "npm:^3.12.2"
+    "@react-stately/toggle": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/switch": "npm:^3.5.15"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2a9cc90fb6f9593c8b41517d83e4a2e05f77ba544ee41d5beeb865329863ca70afa5beec94230512d3eab44d62f0c0c25110323ba89745ba64e05bee0f34c4ec
+  languageName: node
+  linkType: hard
+
+"@react-aria/table@npm:^3.17.8":
+  version: 3.17.8
+  resolution: "@react-aria/table@npm:3.17.8"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/grid": "npm:^3.14.5"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/visually-hidden": "npm:^3.8.28"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/flags": "npm:^3.1.2"
+    "@react-stately/table": "npm:^3.15.1"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/table": "npm:^3.13.4"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 39281b279c2efea9342877e4e2cb1af38f776a7349bcbe6e6daabf281e01445c28b8c7cd38c4f3cfeaea42a126552fd332fc242abd1e5e009c9252e3f1b88512
+  languageName: node
+  linkType: hard
+
+"@react-aria/tabs@npm:^3.10.8":
+  version: 3.10.8
+  resolution: "@react-aria/tabs@npm:3.10.8"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/tabs": "npm:^3.8.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/tabs": "npm:^3.3.19"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: eae72fb6636ae1352ceec509605d35018d96f66aacab896748697da9f6b1e166c7bff88a0ffcfdee2869f653464df401d857906f44bdce5d5b9887b75f533287
+  languageName: node
+  linkType: hard
+
+"@react-aria/tag@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-aria/tag@npm:3.7.2"
+  dependencies:
+    "@react-aria/gridlist": "npm:^3.14.1"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 757daed07380eee13a05b1ba0b72e062db689526dd67087cd34726a6003b4791cb450c9765be3ea32208ce1a430903db3885d07700cb8775cd8bcd97b8124cb4
+  languageName: node
+  linkType: hard
+
+"@react-aria/textfield@npm:^3.18.2":
+  version: 3.18.2
+  resolution: "@react-aria/textfield@npm:3.18.2"
+  dependencies:
+    "@react-aria/form": "npm:^3.1.2"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/textfield": "npm:^3.12.6"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2713e3c42f502ecd1d8a505b01c404a6531d1450d8c422a12ac477d1d45dd5e11e9da48807e75c4915948f579969b4b894f1dda14d87ce3790ab67659b20a396
+  languageName: node
+  linkType: hard
+
+"@react-aria/toast@npm:^3.0.8":
+  version: 3.0.8
+  resolution: "@react-aria/toast@npm:3.0.8"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/landmark": "npm:^3.0.7"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/toast": "npm:^3.1.2"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b8b21566723e9038f15517934c45c3e6406f28d476a682421aee270f01852e8a46f0170af13c3a5c8e80926169ebd7802d5def0115876e395dedad4fc9409f49
+  languageName: node
+  linkType: hard
+
+"@react-aria/toggle@npm:^3.12.2":
+  version: 3.12.2
+  resolution: "@react-aria/toggle@npm:3.12.2"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/toggle": "npm:^3.9.2"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: f6b9ce00d7a6bb0e7b6123826761cb7f40b9c7736ce8edc14b39f1865cd9165c086da8a3f6e27ddae8c8557f54f421bb0b4761c455dae81ed037a765b84b5cb7
+  languageName: node
+  linkType: hard
+
+"@react-aria/toolbar@npm:3.0.0-beta.21":
+  version: 3.0.0-beta.21
+  resolution: "@react-aria/toolbar@npm:3.0.0-beta.21"
+  dependencies:
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: ada5f50c4409997d46e4af0b739f1fada6d3c6ac0bdd3a7eef7ad2a440a53eaeebbd0685d19deb4b7c21832882dbe27a5a8162bf89135d2c930fbaf4bb5e0365
+  languageName: node
+  linkType: hard
+
+"@react-aria/tooltip@npm:^3.8.8":
+  version: 3.8.8
+  resolution: "@react-aria/tooltip@npm:3.8.8"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/tooltip": "npm:^3.5.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/tooltip": "npm:^3.4.21"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: eddb4736b3813b26fdb21ce07cef170215a900a233d859605ad17a2c72c66ca8cc2fe105d3920f9b24fce0eb18e050551268dc25a9c5d4b987b7eca1e60b24e9
+  languageName: node
+  linkType: hard
+
+"@react-aria/tree@npm:^3.1.4":
+  version: 3.1.4
+  resolution: "@react-aria/tree@npm:3.1.4"
+  dependencies:
+    "@react-aria/gridlist": "npm:^3.14.1"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/tree": "npm:^3.9.3"
+    "@react-types/button": "npm:^3.14.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: ed3e48d011b846026b4c3bf78a96fbe91ff892d995a94e94ff6f5218dcbd6736660507dee1e06aac9ce48f9f66fdc8898cf8486192cecad428242b5b4930fde8
+  languageName: node
+  linkType: hard
+
+"@react-aria/utils@npm:^3.31.0":
+  version: 3.31.0
+  resolution: "@react-aria/utils@npm:3.31.0"
+  dependencies:
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-stately/flags": "npm:^3.1.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+    clsx: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b021d2c3704ce934ec41cfc4d87fa6904fb3e007030e31b824cd8287053e866076cb7c7f072d6ed2fee82ca68f2e3f4677f3d58d7938e4b3315831f1fdea4d90
+  languageName: node
+  linkType: hard
+
+"@react-aria/virtualizer@npm:^4.1.10":
+  version: 4.1.10
+  resolution: "@react-aria/virtualizer@npm:4.1.10"
+  dependencies:
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-stately/virtualizer": "npm:^4.4.4"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: a9d1083ee2e424a33cbe5520fc86fd5194a77555b3be21792f648a723770998320220bc32e49ae1551ce5e00b024520ad0bca6ca0d7fdee86bc6216eb1cf78dc
+  languageName: node
+  linkType: hard
+
+"@react-aria/visually-hidden@npm:^3.8.28":
+  version: 3.8.28
+  resolution: "@react-aria/visually-hidden@npm:3.8.28"
+  dependencies:
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 07e61b18d385127353014c2bd2bb9bba5035ac064988fa1bfc2f13d8050ccc9488891d4d3fbe6c79a808bfed7f06f1867b89ec1c975818712a36266040d76597
+  languageName: node
+  linkType: hard
+
+"@react-stately/autocomplete@npm:3.0.0-beta.3":
+  version: 3.0.0-beta.3
+  resolution: "@react-stately/autocomplete@npm:3.0.0-beta.3"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3920ce479e577730870bc6845ee888a44a9a1f90188cf68efb60c74a8264b5886c9059b0cedc07b82fcb26afd770bff5fc971bef0d93ff6ba7d07024a3e628cd
+  languageName: node
+  linkType: hard
+
+"@react-stately/calendar@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-stately/calendar@npm:3.9.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/calendar": "npm:^3.8.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 6021927974cfaee9b48e07c4a4744105d1076fbad841aafdbd8633deb105c56f724a2a2f51285b426755873c3c2c8ae677649c9c38431433e7cf9e8dea7b334c
+  languageName: node
+  linkType: hard
+
+"@react-stately/checkbox@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-stately/checkbox@npm:3.7.2"
+  dependencies:
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e0dda0c536ee43b2b925b9bf2932fdf5d27370b55d069633bb1e4d6a9dfb0db783ed0119ab0893ec192aa4099da0341f39fd2065bfd2e6c89ca3997e92e83ca1
+  languageName: node
+  linkType: hard
+
+"@react-stately/collections@npm:^3.12.8":
+  version: 3.12.8
+  resolution: "@react-stately/collections@npm:3.12.8"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: da17c50d9323002f8dc05870265d54afa162575ceba83bc42d8ccd5d0ccf3bc0634d3896086e7975e1e7f1d7497de6f09ca0e5b82a697ad04349d5b59eca5a8f
+  languageName: node
+  linkType: hard
+
+"@react-stately/color@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-stately/color@npm:3.9.2"
+  dependencies:
+    "@internationalized/number": "npm:^3.6.5"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/numberfield": "npm:^3.10.2"
+    "@react-stately/slider": "npm:^3.7.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/color": "npm:^3.1.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 1aaea8dc241911b634ef072352076a8b3eec25300bb6c88ff2ce6147f05d2504688465a0342272b74a8484cdf272d10d2d9abc6cbbb64a111228046369f92ce5
+  languageName: node
+  linkType: hard
+
+"@react-stately/combobox@npm:^3.12.0":
+  version: 3.12.0
+  resolution: "@react-stately/combobox@npm:3.12.0"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/combobox": "npm:^3.13.9"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3471a9c2f60e215784f63085b4ebcb2445ec804b3f0f50261933261afd7c9f7ed6d0675f00b5581aa43763c37561bcf6c6967a0ab485f403b1f8cf33a6b65d40
+  languageName: node
+  linkType: hard
+
+"@react-stately/data@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-stately/data@npm:3.14.1"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: ac069e41036fd534a8ec4e77847234abc35aa02c1901b0abc3af3d5cede0baadb5ce0d5f648fed5d6b2e37f673669f2b21fbf74cfb760f0e99734f1d9e841d33
+  languageName: node
+  linkType: hard
+
+"@react-stately/datepicker@npm:^3.15.2":
+  version: 3.15.2
+  resolution: "@react-stately/datepicker@npm:3.15.2"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/datepicker": "npm:^3.13.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 59ef011e4d56a3a40923d0a2ce02f6150ca4e5c7b9dac638d4f2b512af9a213ea6cda2d8d85b114758f2db2b06a8840a93c5b9c8c30859366249d58d960ed149
+  languageName: node
+  linkType: hard
+
+"@react-stately/disclosure@npm:^3.0.8":
+  version: 3.0.8
+  resolution: "@react-stately/disclosure@npm:3.0.8"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 8a36946589a199a788c07ef6ab04d0a30868db0484c660e5066ba38dd8bb8cef6e00fca324e7645b561fc7f3b3ffa152add555f2971c6be532d9cd3b67237b31
+  languageName: node
+  linkType: hard
+
+"@react-stately/dnd@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-stately/dnd@npm:3.7.1"
+  dependencies:
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: d5500055a5398914556eeb767b141e4192be446990dfecb385b0348a35dc0baf0b0a72567dde806369995e09f5dc27a13fe4261739da7bc8ba483875bd88e694
+  languageName: node
+  linkType: hard
+
+"@react-stately/flags@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@react-stately/flags@npm:3.1.2"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: a020c3680c36d9624f765c5916ce95d69959f64887928e8f380f11b5362bb0499a901a5842e4e12eb8e5a776af59212b1ee0c4c6a6681ce75f61dace8b2f9c40
+  languageName: node
+  linkType: hard
+
+"@react-stately/form@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@react-stately/form@npm:3.2.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e466309999cb2f28e892b11cdfc7cee2b7d08eefced41d9e346e2c4353dd5fc1864de145a6b332735cdc94b278ff8e6b599489d2aa6945ec5389171f89a633d1
+  languageName: node
+  linkType: hard
+
+"@react-stately/grid@npm:^3.11.6":
+  version: 3.11.6
+  resolution: "@react-stately/grid@npm:3.11.6"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b6bc2a24ff37bdf375caa0f73dd6812ec4368f314f7754472f8b5de47ed296c4d3aadab787768c50d17d5606732291f05448891d5b08c0facaf8a1c9f7a70d31
+  languageName: node
+  linkType: hard
+
+"@react-stately/layout@npm:^4.5.1":
+  version: 4.5.1
+  resolution: "@react-stately/layout@npm:4.5.1"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/table": "npm:^3.15.1"
+    "@react-stately/virtualizer": "npm:^4.4.4"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/table": "npm:^3.13.4"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: a4413d766efdea8decf4549cd773f5a94ce086690195223e605b78ccb9e1c0dd25011bd37a011b805c72a7a9f3a27dc1dd6c8684d9cc2a0b6efaa084fbd337a4
+  languageName: node
+  linkType: hard
+
+"@react-stately/list@npm:^3.13.1":
+  version: 3.13.1
+  resolution: "@react-stately/list@npm:3.13.1"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3da2ca14eaee5f0915c1c79df66268bf1e7cc5d60ce68170515180993941c4c8679033589a8bc38e08138b882a62a8ad69ca727a500c882bd0f4214ce9a69384
+  languageName: node
+  linkType: hard
+
+"@react-stately/menu@npm:^3.9.8":
+  version: 3.9.8
+  resolution: "@react-stately/menu@npm:3.9.8"
+  dependencies:
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-types/menu": "npm:^3.10.5"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7798aa91f0af2743d4d441be1a0bac54489413c187d0e926a336cf13482ad4d54c7215426cd6ea288b8bcf621406db6ebaca5209095be5bfb4dfe4464ece7875
+  languageName: node
+  linkType: hard
+
+"@react-stately/numberfield@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-stately/numberfield@npm:3.10.2"
+  dependencies:
+    "@internationalized/number": "npm:^3.6.5"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/numberfield": "npm:^3.8.15"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 5fd1d4cc1b90a7b03b98a82e47162044a78534291b9baa77847eddd4fb8040bddb91329dfcc7aa2a7cc38ace23817b6c9d52dd7b0f9bd7ce249f763006580797
+  languageName: node
+  linkType: hard
+
+"@react-stately/overlays@npm:^3.6.20":
+  version: 3.6.20
+  resolution: "@react-stately/overlays@npm:3.6.20"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/overlays": "npm:^3.9.2"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e9a3023b3fc3d9383d36dbd0a1e6a0d3d84350dee4f5ce6578464d613e063ca32dd6685c4fdfaa774ded24497c9e5c56363b9650c551d5d1a4dbb6d7d1d04382
+  languageName: node
+  linkType: hard
+
+"@react-stately/radio@npm:^3.11.2":
+  version: 3.11.2
+  resolution: "@react-stately/radio@npm:3.11.2"
+  dependencies:
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/radio": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 182946fb5e963fed62df59d8893ca92443e587bcf3d644b54b991b3acb2124b777af11884e6e31c953becc2dad2226a13238a219747fb596a7e08f0e31e97a22
+  languageName: node
+  linkType: hard
+
+"@react-stately/searchfield@npm:^3.5.16":
+  version: 3.5.16
+  resolution: "@react-stately/searchfield@npm:3.5.16"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/searchfield": "npm:^3.6.6"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 879e736c6888e36e227efffa665420c7e4fd2b319c2fb11661d6689fbbdad549129adc1c218e531f79f5e52be5b4c075c3c8120363ca3238fec24195c1976527
+  languageName: node
+  linkType: hard
+
+"@react-stately/select@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "@react-stately/select@npm:3.8.0"
+  dependencies:
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/select": "npm:^3.11.0"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: d611bbd9d6b55a2dfb31455227efe54c9fc2684f37abd9ba5633b2d1b838bc8fc182e92e64e94ef17c8bbaf351a72daf6089c9d54ce8acad76d3f1be3bdb05aa
+  languageName: node
+  linkType: hard
+
+"@react-stately/selection@npm:^3.20.6":
+  version: 3.20.6
+  resolution: "@react-stately/selection@npm:3.20.6"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: b72941f9d23d285b826aa0a5be55e299d934b335d8ebe50c6b061f72b59f860a37549ac4fc0f41a7357eab0d40edb404207cca201fc78915b001b5532e45a9db
+  languageName: node
+  linkType: hard
+
+"@react-stately/slider@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-stately/slider@npm:3.7.2"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/slider": "npm:^3.8.2"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: c11a5374904434bfad5e87767900ed40e12d4341abf74d835b59ab26efb69ad669c86016926f83eae5fb3b3e39c175f775c4457b77eec64d73785c92369a79da
+  languageName: node
+  linkType: hard
+
+"@react-stately/table@npm:^3.15.1":
+  version: 3.15.1
+  resolution: "@react-stately/table@npm:3.15.1"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/flags": "npm:^3.1.2"
+    "@react-stately/grid": "npm:^3.11.6"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/table": "npm:^3.13.4"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 005292a0803de55179a9d27aa7bb68f44865fff64921141fac7aab0fbd5d2adff27a9a70db904f9a57bd6bc8db84036e8ad58b7a1ea57c990829500eb3f3ee6d
+  languageName: node
+  linkType: hard
+
+"@react-stately/tabs@npm:^3.8.6":
+  version: 3.8.6
+  resolution: "@react-stately/tabs@npm:3.8.6"
+  dependencies:
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/tabs": "npm:^3.3.19"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: ed71a8351b6b9db7c191cbb60acf72121751864b20c1d9a552438a1f4f6c96fdd41469396a17a86ef52287463ef3c8f217167f9498bc5f36e77a621415fac388
+  languageName: node
+  linkType: hard
+
+"@react-stately/toast@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@react-stately/toast@npm:3.1.2"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+    use-sync-external-store: "npm:^1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 771eade3a6f84d7aac3f5766e9cc47826cdb179d58165d12650a843548c13cbf4b4bd3b804a1f367e884e0e28d1d51693cb6f5e7c8391ebdb233cb1dddc015c5
+  languageName: node
+  linkType: hard
+
+"@react-stately/toggle@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-stately/toggle@npm:3.9.2"
+  dependencies:
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/checkbox": "npm:^3.10.2"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 06f0e11cbbda0b479113df6c82e650db9ac772162566fd749da19a3ca274d25831849dc6c67383f4a440be82f61b5dff80e97513763f66bf3994a55febed5827
+  languageName: node
+  linkType: hard
+
+"@react-stately/tooltip@npm:^3.5.8":
+  version: 3.5.8
+  resolution: "@react-stately/tooltip@npm:3.5.8"
+  dependencies:
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-types/tooltip": "npm:^3.4.21"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: fbddb1f0efc6a6275f8f558bf80b984aea0c49f6c0d17fc42fc27e48a02a3c36bc9ca3eed6de9347a3b12289d21e22dc3de159b8b4b8ab21fe18218ab8a0e4ec
+  languageName: node
+  linkType: hard
+
+"@react-stately/tree@npm:^3.9.3":
+  version: 3.9.3
+  resolution: "@react-stately/tree@npm:3.9.3"
+  dependencies:
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 294cc70ffa08280a187a85f72c2402547d71295ddb95b2752fcfa395016947e7fe27116e970df597bab87319e18b3bf1f6b837124fb4bbda8686f7f0018b46ab
+  languageName: node
+  linkType: hard
+
+"@react-stately/utils@npm:^3.10.8":
+  version: 3.10.8
+  resolution: "@react-stately/utils@npm:3.10.8"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 7878ec47b132075566708bae630cb86d8237dde976eb3793bba43695abbb29fcaea9d00ea3f4f7244fcda253368f5b2b85263c37665c24e390500cdcc978c6fe
+  languageName: node
+  linkType: hard
+
+"@react-stately/virtualizer@npm:^4.4.4":
+  version: 4.4.4
+  resolution: "@react-stately/virtualizer@npm:4.4.4"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@swc/helpers": "npm:^0.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: c9d8d4b34250b8c0e91811bc618c654bac3e8eabe7a8ec119abc8f5dbbfa19faa4b31575eb0775773fda0f533fc2835e9a233b4ed0e4ae1835ddb5f0521a18aa
+  languageName: node
+  linkType: hard
+
+"@react-types/autocomplete@npm:3.0.0-alpha.35":
+  version: 3.0.0-alpha.35
+  resolution: "@react-types/autocomplete@npm:3.0.0-alpha.35"
+  dependencies:
+    "@react-types/combobox": "npm:^3.13.9"
+    "@react-types/searchfield": "npm:^3.6.6"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2a51111a94f5df1ce0b1b137a69ca783fa2fa399b4c305ebc7f137b0aa6a420cfe2a3925d40fda9a7d0d3b832d390823015959eee41b6c6b31f7a6b30739a596
+  languageName: node
+  linkType: hard
+
+"@react-types/breadcrumbs@npm:^3.7.17":
+  version: 3.7.17
+  resolution: "@react-types/breadcrumbs@npm:3.7.17"
+  dependencies:
+    "@react-types/link": "npm:^3.6.5"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e9754d1b8010f3cdfdfcd8abf03cdb5b37dc1038496fcc103569b9f349269b39680979c2293cdc04c376cd1ea7b97b00571d46677b9d4939a60dd01b55f765a6
+  languageName: node
+  linkType: hard
+
+"@react-types/button@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-types/button@npm:3.14.1"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: bbbf2e5db83f6b925af154199aaad438d950187862c4ca6f82122c0209632c0c358201ec9b0b503f9b96c8b5b765066af41c6472440ca7ea75b75031d7d9eacf
+  languageName: node
+  linkType: hard
+
+"@react-types/calendar@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "@react-types/calendar@npm:3.8.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 06fe32c8e5d78eedcb511fa3d18f66582b5664ab85c572538e24b953e8204a7c5f98407df0d028625a1dfdd94223153e8e04d9d7feefd96f7533b90fb82be907
+  languageName: node
+  linkType: hard
+
+"@react-types/checkbox@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-types/checkbox@npm:3.10.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3d2f8468ce3326825bc820c958dc52b68f11a18ff15a68de2663115b168fecb165a2381cfecf2d7a254bfba66760590d8d76dabae5f48626a15eddf309206516
+  languageName: node
+  linkType: hard
+
+"@react-types/color@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@react-types/color@npm:3.1.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/slider": "npm:^3.8.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: a41e786bd17b1815d5b7414f2dcbc79e655c3a4b8fe2dfa68c200c553f922bab5468a2ea272c76cdf6611d7d3f20518ca31b442729ef7b68141d91839e580410
+  languageName: node
+  linkType: hard
+
+"@react-types/combobox@npm:^3.13.9":
+  version: 3.13.9
+  resolution: "@react-types/combobox@npm:3.13.9"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 0583d24f38b965e5c2cd2b436a7ad374635e183dc7c12145ce9ed0a166d7b6e46ed4685a68c9fb24aed065d1fca644ca3b0606cb360ae5fac3a9881e88ee2f2b
+  languageName: node
+  linkType: hard
+
+"@react-types/datepicker@npm:^3.13.2":
+  version: 3.13.2
+  resolution: "@react-types/datepicker@npm:3.13.2"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@react-types/calendar": "npm:^3.8.0"
+    "@react-types/overlays": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 1f1686360f64051f5eff5e170ab78e890b20e07680b6031c96c77e47085ca022c55997018911095cd61076bdf63470f61c99ac25ef9b493420f69cde6e4763bd
+  languageName: node
+  linkType: hard
+
+"@react-types/dialog@npm:^3.5.22":
+  version: 3.5.22
+  resolution: "@react-types/dialog@npm:3.5.22"
+  dependencies:
+    "@react-types/overlays": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: dedac6cf8a85568344242eb6e7f9c6f9dd9fff31711d23586374a1cfc4f3b7b7bed43fdff633d54135792dcdd9941a8a15a34bbbec1a9d4caff7b869b35dd71e
+  languageName: node
+  linkType: hard
+
+"@react-types/form@npm:^3.7.16":
+  version: 3.7.16
+  resolution: "@react-types/form@npm:3.7.16"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3e8f156318746d31ef7470d366dcc1004f3a59b1a3a3f9e54331921a4b251ff51c6bf76a32be229f6d8c524b5b1292f3c1135597de6b0f52bae2d8c32a542a74
+  languageName: node
+  linkType: hard
+
+"@react-types/grid@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "@react-types/grid@npm:3.3.6"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2b4be0fd8f6d07d3feca68039b89e0c13e1e566d27334a6ca7b6368f073ee55cf026833c5af664c78ccd137716aefd4f46b88f1b97709cd8080d7380c79454df
+  languageName: node
+  linkType: hard
+
+"@react-types/link@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-types/link@npm:3.6.5"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 59fb6011b146cffcdaae94e8fdd9241cb70697f7e518d39e3aacd14f244db6eea7ba3984d8b13d3ce601e6f160da36fd1bfa56827b2e1df728505e426a8db353
+  languageName: node
+  linkType: hard
+
+"@react-types/listbox@npm:^3.7.4":
+  version: 3.7.4
+  resolution: "@react-types/listbox@npm:3.7.4"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 79dd3f6a7284b74f5156cc2265b384d2074ddfb7b38e608be855ec4ad1234aa0e7cdbfc0d7ef899e34113781381a6ee18b820dbe3dbee67364c72ac240144522
+  languageName: node
+  linkType: hard
+
+"@react-types/menu@npm:^3.10.5":
+  version: 3.10.5
+  resolution: "@react-types/menu@npm:3.10.5"
+  dependencies:
+    "@react-types/overlays": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 0466f5b7602ccfc8cb8fec3cd2482d587acbfd1701d427c7d79a121eb3f2b137feca70e62fd401aea95022fd616460575c4d5dd541cf3d69d8644ca54a2446c8
+  languageName: node
+  linkType: hard
+
+"@react-types/meter@npm:^3.4.13":
+  version: 3.4.13
+  resolution: "@react-types/meter@npm:3.4.13"
+  dependencies:
+    "@react-types/progress": "npm:^3.5.16"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 28b519a4640c72732719c056903fcf4037582984d235c388095319b5005eb9d5d2698306d9f79d1ad61d594b8ceda115acae27c22e95cb771d0e07da30305708
+  languageName: node
+  linkType: hard
+
+"@react-types/numberfield@npm:^3.8.15":
+  version: 3.8.15
+  resolution: "@react-types/numberfield@npm:3.8.15"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 242584ab3ece90a5e26ebee9788c25fd44b85d6be405c5f31e08bda9d58ad8d7fcf199744a2fcd816275da13ae546ca0239175403e68788a43563f2a070c0574
+  languageName: node
+  linkType: hard
+
+"@react-types/overlays@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-types/overlays@npm:3.9.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 6cab7f2cbb813f710696095db1169f902cfe7e4a9aeef496848343ff5116be3782bfea68dffbeaf3f984a0475c2fb6c4a26ad9fb563172c4ec3e47110ca1e672
+  languageName: node
+  linkType: hard
+
+"@react-types/progress@npm:^3.5.16":
+  version: 3.5.16
+  resolution: "@react-types/progress@npm:3.5.16"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 315b34314dc135a6c9319f4ffd83570fac8c0da377b00d56f17c6eb3d416904682738b522b05d6d8cbb89d3ef92c5118bf8e58eca10fac121da6dcaa40563b8d
+  languageName: node
+  linkType: hard
+
+"@react-types/radio@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-types/radio@npm:3.9.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 3375d13bbeed28a1b959077e727b43324f4282cf43ec985edbaaa5b3e50b46199c083550882e2a9e4788c74555bfd25f5cc2b0351bf48a768f81a4ba6bf73222
+  languageName: node
+  linkType: hard
+
+"@react-types/searchfield@npm:^3.6.6":
+  version: 3.6.6
+  resolution: "@react-types/searchfield@npm:3.6.6"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/textfield": "npm:^3.12.6"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 942cb80234be5d61cae410c144873d75a243dec0bbf8bb0c696f13d66fd729dabb188bb6214d4bfadeb0d54e14eed3bb7e86c6721206bcb395658b613f22b53f
+  languageName: node
+  linkType: hard
+
+"@react-types/select@npm:^3.11.0":
+  version: 3.11.0
+  resolution: "@react-types/select@npm:3.11.0"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 6c431daa847a034ce06625fe75f220f301e8bdb50961c74e915f36919641f7907aa0d16d15127b9889853d197d66d964fd3726bd6c446b8aecf0e756e30e3925
+  languageName: node
+  linkType: hard
+
+"@react-types/shared@npm:^3.32.1":
+  version: 3.32.1
+  resolution: "@react-types/shared@npm:3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 33c39d1e23fd73a18519679742ba548c128097831710af4803bec244ae96800271f88dcc4eab958734fc501bb65c17e590028596733761610fb0103c5dea6e36
+  languageName: node
+  linkType: hard
+
+"@react-types/slider@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@react-types/slider@npm:3.8.2"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: cb9600a1842ace218be1a8bdb7b6785113c7165fde0cc76682b82cf7809927d2f45f95facb2570e7abb683f28f0a2ed0590c8ec8e948ed8dadffadb8905918d9
+  languageName: node
+  linkType: hard
+
+"@react-types/switch@npm:^3.5.15":
+  version: 3.5.15
+  resolution: "@react-types/switch@npm:3.5.15"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: f35c075188b93aa07b6ab367a6d5bcc4316bcd5481d47e1b0319944411e3a12b15455c443079159280b6d168da36271f3df8bc55808a7d8249b239f5886f0253
+  languageName: node
+  linkType: hard
+
+"@react-types/table@npm:^3.13.4":
+  version: 3.13.4
+  resolution: "@react-types/table@npm:3.13.4"
+  dependencies:
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 2f8c1878c8b9a6515a62c7592a335e9688c95a07e0445a891dd6069cbe26921573db6f7d6d2e0c22a8818ec5ef3f48f242ae24d955a1b18e7868f306fadfe7f5
+  languageName: node
+  linkType: hard
+
+"@react-types/tabs@npm:^3.3.19":
+  version: 3.3.19
+  resolution: "@react-types/tabs@npm:3.3.19"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: cdc3217251502c6f89621ab366a4d23e32a334dc3ca2f5366cd980fb828bb413be1262a76f4c4794a0908bfd02c3237a3608e283b02ef472707fb7c22b80b44b
+  languageName: node
+  linkType: hard
+
+"@react-types/textfield@npm:^3.12.6":
+  version: 3.12.6
+  resolution: "@react-types/textfield@npm:3.12.6"
+  dependencies:
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: e223531d29bbaad566f142b44a0f2e42b4ce08eab5661962ad3451391311a604077c49181f89a407aecf8697d59d887f5524f6eff8e9fe7416afda6b1f3ac7b3
+  languageName: node
+  linkType: hard
+
+"@react-types/tooltip@npm:^3.4.21":
+  version: 3.4.21
+  resolution: "@react-types/tooltip@npm:3.4.21"
+  dependencies:
+    "@react-types/overlays": "npm:^3.9.2"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 50d1beea407a7e58ef8e3638c2517d8c90f6b15777d396b4adf7cffbd80d38dfb7d68d6a38127ed130bfe7b0c3116c5d499de3f7b6353f54d022a22739e0141d
+  languageName: node
+  linkType: hard
+
+"@remix-run/router@npm:1.14.2":
+  version: 1.14.2
+  resolution: "@remix-run/router@npm:1.14.2"
+  checksum: 422844e88b985f1e287301b302c6cf8169c9eea792f80d40464f97b25393bb2e697228ebd7a7b61444d5a51c5873c4a637aad20acde5886a5caf62e833c5ceee
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-adapter-wagmi@npm:^1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-adapter-wagmi@npm:1.6.6"
+  dependencies:
+    "@reown/appkit": "npm:1.6.6"
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-core": "npm:1.6.6"
+    "@reown/appkit-polyfills": "npm:1.6.6"
+    "@reown/appkit-scaffold-ui": "npm:1.6.6"
+    "@reown/appkit-ui": "npm:1.6.6"
+    "@reown/appkit-utils": "npm:1.6.6"
+    "@reown/appkit-wallet": "npm:1.6.6"
+    "@wagmi/connectors": "npm:>=5.7"
+    "@walletconnect/universal-provider": "npm:2.18.0"
+    "@walletconnect/utils": "npm:2.18.0"
+    valtio: "npm:1.13.2"
+  peerDependencies:
+    "@wagmi/core": ">=2.16"
+    viem: 2.x
+    wagmi: ">=2.14"
+  dependenciesMeta:
+    "@wagmi/connectors":
+      optional: true
+  checksum: a2bff6baf37f626de0581b785e52a3a911fa4d3c550eaf8212ec78ea83a06f59641cb331d3e9e6c35cf2f296116ff436483b879e65dac53e0e33f37a8c2c319f
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-common@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-common@npm:1.6.6"
+  dependencies:
+    big.js: "npm:6.2.2"
+    dayjs: "npm:1.11.10"
+    viem: "npm:2.x"
+  checksum: 0e3d258a9cb136e032aebb5a5d75aa55e02d8cc47ccd7819e241d8ea003a173d12a0a423c2db479b6c1732a0e687f804e22b1057dfb621be8568943721f6e97a
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-core@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-core@npm:1.6.6"
+  dependencies:
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-wallet": "npm:1.6.6"
+    "@walletconnect/universal-provider": "npm:2.18.0"
+    valtio: "npm:1.13.2"
+    viem: "npm:2.x"
+  checksum: 5931149f28dd4ab80257bc205d3ed897522575c3798a7f16edd235d56aab4ab9f922467c9e4c3169019c6d1ff6778ad32eed3579e5953845ec8cd20dcac15dd3
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-polyfills@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-polyfills@npm:1.6.6"
+  dependencies:
+    buffer: "npm:6.0.3"
+  checksum: eba2f2cb72469ac6ead47e4fb9dab7d2971af7e700a11e03753e8591bc3aaeba7dac709f9197dd3c0be8954a7f3d7f81ee9e3dfecf41eb53bac9b7ee4f2e6ac5
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-scaffold-ui@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-scaffold-ui@npm:1.6.6"
+  dependencies:
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-core": "npm:1.6.6"
+    "@reown/appkit-ui": "npm:1.6.6"
+    "@reown/appkit-utils": "npm:1.6.6"
+    "@reown/appkit-wallet": "npm:1.6.6"
+    lit: "npm:3.1.0"
+  checksum: fd32f533c9c037a198b858499b63cc0e6ce7d1f58d27ce0f08c3d0cf76577710bb6e4cdcc4bc97753f4d3192c106800745488b926857eb5da5cfe8076d8dd84c
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-ui@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-ui@npm:1.6.6"
+  dependencies:
+    lit: "npm:3.1.0"
+    qrcode: "npm:1.5.3"
+  checksum: 7959d754d6e2885b49e2fa6334fd0081db7db48891d24adbb80aec185804e997ea6d758e2805e9d982064c05142abb3b5405916dc2b669e8e85c5ebdc2fc70de
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-utils@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-utils@npm:1.6.6"
+  dependencies:
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-core": "npm:1.6.6"
+    "@reown/appkit-polyfills": "npm:1.6.6"
+    "@reown/appkit-wallet": "npm:1.6.6"
+    "@walletconnect/logger": "npm:2.1.2"
+    "@walletconnect/universal-provider": "npm:2.18.0"
+    valtio: "npm:1.13.2"
+    viem: "npm:2.x"
+  peerDependencies:
+    valtio: 1.13.2
+  checksum: 20ef803ced0e53663f250618650e468a8edab39cccfb42ce5b3394a525cbedd9e6266a562d8241a60a81e27ab52c4bd6de3e945081648ffb1feefaee24a2f633
+  languageName: node
+  linkType: hard
+
+"@reown/appkit-wallet@npm:1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit-wallet@npm:1.6.6"
+  dependencies:
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-polyfills": "npm:1.6.6"
+    "@walletconnect/logger": "npm:2.1.2"
+    zod: "npm:3.22.4"
+  checksum: b2298e721e0cfb938a456b8d7e9ac5557dbb7366fa78cacb5304a054d47f91e99cb87cc1b0000a61b2811291317ae0c09c1980615ffab4684e8b6ad6e110cb5e
+  languageName: node
+  linkType: hard
+
+"@reown/appkit@npm:1.6.6, @reown/appkit@npm:^1.6.6":
+  version: 1.6.6
+  resolution: "@reown/appkit@npm:1.6.6"
+  dependencies:
+    "@reown/appkit-common": "npm:1.6.6"
+    "@reown/appkit-core": "npm:1.6.6"
+    "@reown/appkit-polyfills": "npm:1.6.6"
+    "@reown/appkit-scaffold-ui": "npm:1.6.6"
+    "@reown/appkit-ui": "npm:1.6.6"
+    "@reown/appkit-utils": "npm:1.6.6"
+    "@reown/appkit-wallet": "npm:1.6.6"
+    "@walletconnect/types": "npm:2.18.0"
+    "@walletconnect/universal-provider": "npm:2.18.0"
+    "@walletconnect/utils": "npm:2.18.0"
+    bs58: "npm:6.0.0"
+    valtio: "npm:1.13.2"
+    viem: "npm:2.x"
+  checksum: addda371d4b87e4f3893b5865a7b15dbfd3799e6509428676795641ee13ce7376b80569dd1c74009294f2c2e3939d34dbd095e57034bf5d9790618fd04866425
+  languageName: node
+  linkType: hard
+
+"@repeaterjs/repeater@npm:^3.0.4":
+  version: 3.0.5
+  resolution: "@repeaterjs/repeater@npm:3.0.5"
+  checksum: 7478df13bd4631729021b2f43524fe71a4ed04b3c1c2125315078e3954f059f2ff4da5776f9be8f76008df9849e866e5ec56120f41b8bf66d2ec1a7c7bc53229
+  languageName: node
+  linkType: hard
+
+"@rescript/std@npm:9.0.0":
+  version: 9.0.0
+  resolution: "@rescript/std@npm:9.0.0"
+  checksum: 3f68fdc7daad61aba8369055611800347b9be3a621ed7d465abcd42600515ca78a0decff51f2d3d2ae9d31f31c58ae3bbb41e3d5fcd42e135f9b7ce0f8de8de7
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-babel@npm:^5.2.0":
+  version: 5.3.1
+  resolution: "@rollup/plugin-babel@npm:5.3.1"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.10.4"
+    "@rollup/pluginutils": "npm:^3.1.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    "@types/babel__core": ^7.1.9
+    rollup: ^1.20.0||^2.0.0
+  peerDependenciesMeta:
+    "@types/babel__core":
+      optional: true
+  checksum: eb3ee5fedd86fa39ad70c2f8e05f14f8b185261b9f63699a01ac7eae664167f2e5cf87377434bf6aadad7eaf2b13c955ac26f8332a02f8d6a46b3c91990a9fbc
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-inject@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "@rollup/plugin-inject@npm:5.0.5"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.0.1"
+    estree-walker: "npm:^2.0.2"
+    magic-string: "npm:^0.30.3"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 1d0e68dff0a8785398a1b6a7dac0dc0a7f2ded22319c0b4c411053f34cbe237ca897d1fc97e5150fddbc3486480f21cbeeb69f0ae7f44ab1ae7307c164c7e704
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-node-resolve@npm:^11.2.1":
+  version: 11.2.1
+  resolution: "@rollup/plugin-node-resolve@npm:11.2.1"
+  dependencies:
+    "@rollup/pluginutils": "npm:^3.1.0"
+    "@types/resolve": "npm:1.17.1"
     builtin-modules: "npm:^3.1.0"
     deepmerge: "npm:^4.2.2"
     is-module: "npm:^1.0.0"
@@ -8282,28 +10082,192 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@svgr/webpack@npm:^5.5.0":
-  version: 5.5.0
-  resolution: "@svgr/webpack@npm:5.5.0"
+"@svgr/webpack@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "@svgr/webpack@npm:5.5.0"
+  dependencies:
+    "@babel/core": "npm:^7.12.3"
+    "@babel/plugin-transform-react-constant-elements": "npm:^7.12.1"
+    "@babel/preset-env": "npm:^7.12.1"
+    "@babel/preset-react": "npm:^7.12.5"
+    "@svgr/core": "npm:^5.5.0"
+    "@svgr/plugin-jsx": "npm:^5.5.0"
+    "@svgr/plugin-svgo": "npm:^5.5.0"
+    loader-utils: "npm:^2.0.0"
+  checksum: 91f0b4176d22e8414d200f785d6cf9793ce39062f44be1eb2426c2f4415ee75d57e0670ae1e549b4a9222f20f4f06157fd9b121fa74c107d2cb821920874e79e
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.17
+  resolution: "@swc/helpers@npm:0.5.17"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 1fc8312a78f1f99c8ec838585445e99763eeebff2356100738cdfdb8ad47d2d38df678ee6edd93a90fe319ac52da67adc14ac00eb82b606c5fb8ebc5d06ec2a2
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/node@npm:4.1.16"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.4"
+    enhanced-resolve: "npm:^5.18.3"
+    jiti: "npm:^2.6.1"
+    lightningcss: "npm:1.30.2"
+    magic-string: "npm:^0.30.19"
+    source-map-js: "npm:^1.2.1"
+    tailwindcss: "npm:4.1.16"
+  checksum: 3387430dc327ec96d9fd5b09459a321951c182ca9ae74a3d3499ed9419b481bdc6d0e9c5ddb914df84cfc641444f978f355bd1b6ed1765a47da170cb35801180
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.16"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.16"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.16"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.16"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.16"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.16"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.16"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.16"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.16"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.16"
+  dependencies:
+    "@emnapi/core": "npm:^1.5.0"
+    "@emnapi/runtime": "npm:^1.5.0"
+    "@emnapi/wasi-threads": "npm:^1.1.0"
+    "@napi-rs/wasm-runtime": "npm:^1.0.7"
+    "@tybys/wasm-util": "npm:^0.10.1"
+    tslib: "npm:^2.4.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.16"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.16"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide@npm:4.1.16"
   dependencies:
-    "@babel/core": "npm:^7.12.3"
-    "@babel/plugin-transform-react-constant-elements": "npm:^7.12.1"
-    "@babel/preset-env": "npm:^7.12.1"
-    "@babel/preset-react": "npm:^7.12.5"
-    "@svgr/core": "npm:^5.5.0"
-    "@svgr/plugin-jsx": "npm:^5.5.0"
-    "@svgr/plugin-svgo": "npm:^5.5.0"
-    loader-utils: "npm:^2.0.0"
-  checksum: 91f0b4176d22e8414d200f785d6cf9793ce39062f44be1eb2426c2f4415ee75d57e0670ae1e549b4a9222f20f4f06157fd9b121fa74c107d2cb821920874e79e
+    "@tailwindcss/oxide-android-arm64": "npm:4.1.16"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.1.16"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.1.16"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.1.16"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.1.16"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.1.16"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.1.16"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.1.16"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.1.16"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.1.16"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.1.16"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.1.16"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: eba958b2912af220837d0bab17e5cfaabdfec4368f76446037a48da0d9f3497a4bc6640aa4a5b23e63c59889b7e27bec7cce5ff18d339f104bd635373003d04e
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:^0.3.2":
-  version: 0.3.17
-  resolution: "@swc/helpers@npm:0.3.17"
+"@tailwindcss/vite@npm:^4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/vite@npm:4.1.16"
   dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: c848c89ff1fe9bfeac2dcb2b39c606942c3914ca5e0a364f5a6f0515a9985b012ce00cca4ae6255a2788dba51d437b1b004eaed1f339f618094c111340c980cd
+    "@tailwindcss/node": "npm:4.1.16"
+    "@tailwindcss/oxide": "npm:4.1.16"
+    tailwindcss: "npm:4.1.16"
+  peerDependencies:
+    vite: ^5.2.0 || ^6 || ^7
+  checksum: e05eb1920027daaa101cf673bbb3b20724a2e01e919cb6ff2ebe9921cadd836dbbdad570603eabc268d4026e2aecbbe9607bbbbb7356d6fd5d55c46809fd6387
   languageName: node
   linkType: hard
 
@@ -8367,6 +10331,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tybys/wasm-util@npm:^0.10.1":
+  version: 0.10.1
+  resolution: "@tybys/wasm-util@npm:0.10.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 7fe0d239397aebb002ac4855d30c197c06a05ea8df8511350a3a5b1abeefe26167c60eda8a5508337571161e4c4b53d7c1342296123f9607af8705369de9fa7f
+  languageName: node
+  linkType: hard
+
 "@typechain/ethers-v6@npm:^0.5.1":
   version: 0.5.1
   resolution: "@typechain/ethers-v6@npm:0.5.1"
@@ -8628,16 +10601,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:*":
-  version: 3.3.5
-  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
-  dependencies:
-    "@types/react": "npm:*"
-    hoist-non-react-statics: "npm:^3.3.0"
-  checksum: b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -8924,15 +10887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-modal@npm:^3.16.3":
-  version: 3.16.3
-  resolution: "@types/react-modal@npm:3.16.3"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 9622d1983ade28864a85baffcf068722b24f02ac3ec1485dab6a9005a2e0b2f8af78f860be494523d90ba5e182744d1151461a4cc42120a32ed57ec3b7a4cab9
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*":
   version: 18.2.48
   resolution: "@types/react@npm:18.2.48"
@@ -9046,17 +11000,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.34":
-  version: 5.1.34
-  resolution: "@types/styled-components@npm:5.1.34"
-  dependencies:
-    "@types/hoist-non-react-statics": "npm:*"
-    "@types/react": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 3da291b46f03d378a0176c9d034deee7ee0684c5d62e1c5ce82f3be0972918eaa806f45c62e9a4f1c8d24c5ba6571c260caba2493fc7e82b528ac7d15903e2c1
-  languageName: node
-  linkType: hard
-
 "@types/stylis@npm:4.2.5":
   version: 4.2.5
   resolution: "@types/stylis@npm:4.2.5"
@@ -11603,21 +13546,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.1.4
-  resolution: "babel-plugin-styled-components@npm:2.1.4"
-  dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-module-imports": "npm:^7.22.5"
-    "@babel/plugin-syntax-jsx": "npm:^7.22.5"
-    lodash: "npm:^4.17.21"
-    picomatch: "npm:^2.3.1"
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: 34f10dd4d44cf1c8605097dd4796e2d1443266ebc686f10a9f56b5d1492b5c3de9c13d7e30b075756610adf592ed807cc8145189d00b4454f6af9879a19a5e0b
-  languageName: node
-  linkType: hard
-
 "babel-plugin-syntax-trailing-function-commas@npm:^7.0.0-beta.0":
   version: 7.0.0-beta.0
   resolution: "babel-plugin-syntax-trailing-function-commas@npm:7.0.0-beta.0"
@@ -11828,6 +13756,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bignumber.js@npm:^9.1.2":
+  version: 9.3.1
+  resolution: "bignumber.js@npm:9.3.1"
+  checksum: 1be0372bf0d6d29d0a49b9e6a9cefbd54dad9918232ad21fcd4ec39030260773abf0c76af960c6b3b98d3115a3a71e61c6a111812d1395040a039cfa178e0245
+  languageName: node
+  linkType: hard
+
 "binary-extensions@npm:^2.0.0":
   version: 2.2.0
   resolution: "binary-extensions@npm:2.2.0"
@@ -12824,7 +14759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1":
+"classnames@npm:^2.2.5":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: 58eb394e8817021b153bb6e7d782cfb667e4ab390cb2e9dac2fc7c6b979d1cc2b2a733093955fc5c94aa79ef5c8c89f11ab77780894509be6afbb91dddd79d15
@@ -12950,6 +14885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"client-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
 "clipboardy@npm:^4.0.0":
   version: 4.0.0
   resolution: "clipboardy@npm:4.0.0"
@@ -13008,7 +14950,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
@@ -13262,13 +15204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.20":
-  version: 1.0.20
-  resolution: "compute-scroll-into-view@npm:1.0.20"
-  checksum: a72e2595ccab57ca61bb14b368738c7473ebb96da6c85f4dbe00cb810570f71f52d9c26b4463f6092663cbf917d0693881eef4f8e8d4204d7581a83bef082afe
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -14042,7 +15977,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -14273,7 +16208,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:^2.14.0, date-fns@npm:^2.29.3":
+"date-fns@npm:^2.29.3":
   version: 2.30.0
   resolution: "date-fns@npm:2.30.0"
   dependencies:
@@ -14421,6 +16356,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decimal.js@npm:^10.4.3":
+  version: 10.6.0
+  resolution: "decimal.js@npm:10.6.0"
+  checksum: c0d45842d47c311d11b38ce7ccc911121953d4df3ebb1465d92b31970eb4f6738a065426a06094af59bee4b0d64e42e7c8984abd57b6767c64ea90cf90bb4a69
+  languageName: node
+  linkType: hard
+
 "decode-named-character-reference@npm:^1.0.0":
   version: 1.0.2
   resolution: "decode-named-character-reference@npm:1.0.2"
@@ -14698,6 +16640,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^2.0.3":
+  version: 2.1.2
+  resolution: "detect-libc@npm:2.1.2"
+  checksum: b736c8d97d5d46164c0d1bed53eb4e6a3b1d8530d460211e2d52f1c552875e706c58a5376854e4e54f8b828c9cada58c855288c968522eb93ac7696d65970766
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -14868,13 +16817,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-align@npm:^1.7.0":
-  version: 1.12.4
-  resolution: "dom-align@npm:1.12.4"
-  checksum: fbfb005fcb1572700dc164bdb0c5ba2a6b438ddf8b7fb1d7250b697f7899922364a671a37fa3f09b16596fc289d9bddeae6406a45f9587b91c24438590c73a2b
-  languageName: node
-  linkType: hard
-
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -15262,6 +17204,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.18.3":
+  version: 5.18.3
+  resolution: "enhanced-resolve@npm:5.18.3"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: a4d0a1eacba3079f617b68c8f7e17583c3cbc572055c2edca41c0fa0230a49f6e9b2c6ffd4128cc5f84e15ea6cc313ae2b01e1057fcd252fabef70220a5d9f6a
+  languageName: node
+  linkType: hard
+
 "enquire.js@npm:^2.1.6":
   version: 2.1.6
   resolution: "enquire.js@npm:2.1.6"
@@ -16645,13 +18597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exenv@npm:^1.2.0":
-  version: 1.2.2
-  resolution: "exenv@npm:1.2.2"
-  checksum: 6840185e421394bcb143debb866d31d19c3e4a4bca87d2f319d68d61afff353b3c678f2eb389e3b98ab9aecbec19f6bebbdc4193984378af0a3366c498a7efc8
-  languageName: node
-  linkType: hard
-
 "exit@npm:^0.1.2":
   version: 0.1.2
   resolution: "exit@npm:0.1.2"
@@ -18457,7 +20402,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -19040,6 +20985,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intl-messageformat@npm:^10.1.0":
+  version: 10.7.18
+  resolution: "intl-messageformat@npm:10.7.18"
+  dependencies:
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/fast-memoize": "npm:2.2.7"
+    "@formatjs/icu-messageformat-parser": "npm:2.11.4"
+    tslib: "npm:^2.8.0"
+  checksum: 96650d673912763d21bbfa14b50749b992d45f1901092a020e3155961e3c70f4644dd1731c3ecb1207a1eb94d84bedf4c34b1ac8127c29ad6b015b6a2a4045cb
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -20579,6 +22536,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "jiti@npm:2.6.1"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 8cd72c5fd03a0502564c3f46c49761090f6dadead21fa191b73535724f095ad86c2fa89ee6fe4bc3515337e8d406cc8fb2d37b73fa0c99a34584bac35cd4a4de
+  languageName: node
+  linkType: hard
+
 "jose@npm:^5.0.0":
   version: 5.2.0
   resolution: "jose@npm:5.2.0"
@@ -21110,6 +23076,126 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-android-arm64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-android-arm64@npm:1.30.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-darwin-arm64@npm:1.30.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-darwin-x64@npm:1.30.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-freebsd-x64@npm:1.30.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.30.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.30.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm64-musl@npm:1.30.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-x64-gnu@npm:1.30.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-x64-musl@npm:1.30.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.30.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-win32-x64-msvc@npm:1.30.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss@npm:1.30.2"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-android-arm64: "npm:1.30.2"
+    lightningcss-darwin-arm64: "npm:1.30.2"
+    lightningcss-darwin-x64: "npm:1.30.2"
+    lightningcss-freebsd-x64: "npm:1.30.2"
+    lightningcss-linux-arm-gnueabihf: "npm:1.30.2"
+    lightningcss-linux-arm64-gnu: "npm:1.30.2"
+    lightningcss-linux-arm64-musl: "npm:1.30.2"
+    lightningcss-linux-x64-gnu: "npm:1.30.2"
+    lightningcss-linux-x64-musl: "npm:1.30.2"
+    lightningcss-win32-arm64-msvc: "npm:1.30.2"
+    lightningcss-win32-x64-msvc: "npm:1.30.2"
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: d6cc06d9bac295589a49446e9c45a241dfa16f4f81a7318c26cbc0be3e189003ec0da5d9a0fd9bdffc63a3ce05878cc7329277eaac77a826e8b68c73dc96cfda
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:2.1.0, lilconfig@npm:^2.0.3, lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -21778,6 +23864,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.19":
+  version: 0.30.21
+  resolution: "magic-string@npm:0.30.21"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 57d5691f41ed40d962d8bd300148114f53db67fadbff336207db10a99f2bdf4a1be9cac3a68ee85dba575912ee1d4402e4396408196ec2d3afd043b076156221
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.3":
   version: 0.30.11
   resolution: "magic-string@npm:0.30.11"
@@ -25549,7 +27644,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.1, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.6.1, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -25852,95 +27947,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-align@npm:^4.0.0":
-  version: 4.0.15
-  resolution: "rc-align@npm:4.0.15"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    dom-align: "npm:^1.7.0"
-    rc-util: "npm:^5.26.0"
-    resize-observer-polyfill: "npm:^1.5.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: de1af4a58a371bc01cf5f327ce82b5e5631960c3e2dbae03532081e63bf86a809cebf9b8a231495db1dc659c28b6dbb35b0b33f2c29579b8b068388c1288c1b1
-  languageName: node
-  linkType: hard
-
-"rc-motion@npm:^2.0.0":
-  version: 2.9.0
-  resolution: "rc-motion@npm:2.9.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.21.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 12bb290860865edbc8d08a731d377ccc62936a28bbfa83246cfca5b831843a6bfa8912c5ca3624823b28ab43e0ac46215f67e198729f6f6d91e826f64af514a9
-  languageName: node
-  linkType: hard
-
-"rc-slider@npm:^9.7.5":
-  version: 9.7.5
-  resolution: "rc-slider@npm:9.7.5"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.2.5"
-    rc-tooltip: "npm:^5.0.1"
-    rc-util: "npm:^5.16.1"
-    shallowequal: "npm:^1.1.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 500649e4d4d87bf3adb8a4318dddf095fffa46e8693a59a6ee7cc6d9c86bb76cedd83e4c4c9222b84419a5d86d69c16078aded06463139f58bfaff5fc6b3d868
-  languageName: node
-  linkType: hard
-
-"rc-tooltip@npm:^5.0.1":
-  version: 5.3.1
-  resolution: "rc-tooltip@npm:5.3.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.2"
-    classnames: "npm:^2.3.1"
-    rc-trigger: "npm:^5.3.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: c7627fbfae753a0e73548d1f93329a5132d76727f737d4eedc5a142f2950986f429dae11b5d8bc13f39bd72a631a22cb32f3b8aaad83bfdde770c19e220708bf
-  languageName: node
-  linkType: hard
-
-"rc-trigger@npm:^5.3.1":
-  version: 5.3.4
-  resolution: "rc-trigger@npm:5.3.4"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    classnames: "npm:^2.2.6"
-    rc-align: "npm:^4.0.0"
-    rc-motion: "npm:^2.0.0"
-    rc-util: "npm:^5.19.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 32e0a3083ecea27b44d47c8638e399fadab658fe48a526b0f072011acd99f5b26871a9b3c07fc7f121ddbec900e41bf3eb9085a7be18aa66007aae7fd311b1f9
-  languageName: node
-  linkType: hard
-
-"rc-util@npm:^5.16.1, rc-util@npm:^5.19.2, rc-util@npm:^5.21.0, rc-util@npm:^5.26.0":
-  version: 5.38.1
-  resolution: "rc-util@npm:5.38.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    react-is: "npm:^18.2.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 77a69fe2bfb497061aa13a221d9af1da7993895f19ddd6561f69415bcca648c206dee9a2d52fa0382329fcc9dcfd88784c54e96014830b364dd16ecf1c396c57
-  languageName: node
-  linkType: hard
-
 "react-app-polyfill@npm:^3.0.0":
   version: 3.0.0
   resolution: "react-app-polyfill@npm:3.0.0"
@@ -25955,6 +27961,99 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-aria-components@npm:^1.7.1":
+  version: 1.13.0
+  resolution: "react-aria-components@npm:1.13.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.10.0"
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-aria/autocomplete": "npm:3.0.0-rc.3"
+    "@react-aria/collections": "npm:^3.0.0"
+    "@react-aria/dnd": "npm:^3.11.3"
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/live-announcer": "npm:^3.4.4"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/toolbar": "npm:3.0.0-beta.21"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/virtualizer": "npm:^4.1.10"
+    "@react-stately/autocomplete": "npm:3.0.0-beta.3"
+    "@react-stately/layout": "npm:^4.5.1"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/table": "npm:^3.15.1"
+    "@react-stately/utils": "npm:^3.10.8"
+    "@react-stately/virtualizer": "npm:^4.4.4"
+    "@react-types/form": "npm:^3.7.16"
+    "@react-types/grid": "npm:^3.3.6"
+    "@react-types/shared": "npm:^3.32.1"
+    "@react-types/table": "npm:^3.13.4"
+    "@swc/helpers": "npm:^0.5.0"
+    client-only: "npm:^0.0.1"
+    react-aria: "npm:^3.44.0"
+    react-stately: "npm:^3.42.0"
+    use-sync-external-store: "npm:^1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 8bff1890ef342b0c32d6a50329ce4657bce2fcc91f2a2f903351f375354b186b47f265e7718caaff0ed9a5f630037f17649d85d00bc20a4928a6417204d75ff2
+  languageName: node
+  linkType: hard
+
+"react-aria@npm:^3.44.0":
+  version: 3.44.0
+  resolution: "react-aria@npm:3.44.0"
+  dependencies:
+    "@internationalized/string": "npm:^3.2.7"
+    "@react-aria/breadcrumbs": "npm:^3.5.29"
+    "@react-aria/button": "npm:^3.14.2"
+    "@react-aria/calendar": "npm:^3.9.2"
+    "@react-aria/checkbox": "npm:^3.16.2"
+    "@react-aria/color": "npm:^3.1.2"
+    "@react-aria/combobox": "npm:^3.14.0"
+    "@react-aria/datepicker": "npm:^3.15.2"
+    "@react-aria/dialog": "npm:^3.5.31"
+    "@react-aria/disclosure": "npm:^3.1.0"
+    "@react-aria/dnd": "npm:^3.11.3"
+    "@react-aria/focus": "npm:^3.21.2"
+    "@react-aria/gridlist": "npm:^3.14.1"
+    "@react-aria/i18n": "npm:^3.12.13"
+    "@react-aria/interactions": "npm:^3.25.6"
+    "@react-aria/label": "npm:^3.7.22"
+    "@react-aria/landmark": "npm:^3.0.7"
+    "@react-aria/link": "npm:^3.8.6"
+    "@react-aria/listbox": "npm:^3.15.0"
+    "@react-aria/menu": "npm:^3.19.3"
+    "@react-aria/meter": "npm:^3.4.27"
+    "@react-aria/numberfield": "npm:^3.12.2"
+    "@react-aria/overlays": "npm:^3.30.0"
+    "@react-aria/progress": "npm:^3.4.27"
+    "@react-aria/radio": "npm:^3.12.2"
+    "@react-aria/searchfield": "npm:^3.8.9"
+    "@react-aria/select": "npm:^3.17.0"
+    "@react-aria/selection": "npm:^3.26.0"
+    "@react-aria/separator": "npm:^3.4.13"
+    "@react-aria/slider": "npm:^3.8.2"
+    "@react-aria/ssr": "npm:^3.9.10"
+    "@react-aria/switch": "npm:^3.7.8"
+    "@react-aria/table": "npm:^3.17.8"
+    "@react-aria/tabs": "npm:^3.10.8"
+    "@react-aria/tag": "npm:^3.7.2"
+    "@react-aria/textfield": "npm:^3.18.2"
+    "@react-aria/toast": "npm:^3.0.8"
+    "@react-aria/tooltip": "npm:^3.8.8"
+    "@react-aria/tree": "npm:^3.1.4"
+    "@react-aria/utils": "npm:^3.31.0"
+    "@react-aria/visually-hidden": "npm:^3.8.28"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 46b428af3f68703c03d7836a79f288dae1e945cb34164220a61f57d77df0a5adfc6c4a4c993282f9dbf57f159c9d249e1d644b57b61caca3dec8af1285404ec1
+  languageName: node
+  linkType: hard
+
 "react-chartjs-2@npm:^4.3.1":
   version: 4.3.1
   resolution: "react-chartjs-2@npm:4.3.1"
@@ -26070,13 +28169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-lifecycles-compat@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "react-lifecycles-compat@npm:3.0.4"
-  checksum: c66b9c98c15cd6b0d0a4402df5f665e8cc7562fb7033c34508865bea51fd7b623f7139b5b7e708515d3cd665f264a6a9403e1fa7e6d61a05759066f5e9f07783
-  languageName: node
-  linkType: hard
-
 "react-loading-skeleton@npm:^3.3.1":
   version: 3.3.1
   resolution: "react-loading-skeleton@npm:3.3.1"
@@ -26112,21 +28204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-modal@npm:^3.16.1":
-  version: 3.16.1
-  resolution: "react-modal@npm:3.16.1"
-  dependencies:
-    exenv: "npm:^1.2.0"
-    prop-types: "npm:^15.7.2"
-    react-lifecycles-compat: "npm:^3.0.0"
-    warning: "npm:^4.0.3"
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
-    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
-  checksum: 79787ed2754f65168fccefcef50b509fa1cbc2b44907f92dcfd78ea6f9702668c70604f192a4bb45badb664902fb100179d6d191e478310be94e656271963905
-  languageName: node
-  linkType: hard
-
 "react-native-fetch-api@npm:^3.0.0":
   version: 3.0.0
   resolution: "react-native-fetch-api@npm:3.0.0"
@@ -26273,6 +28350,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-stately@npm:^3.42.0":
+  version: 3.42.0
+  resolution: "react-stately@npm:3.42.0"
+  dependencies:
+    "@react-stately/calendar": "npm:^3.9.0"
+    "@react-stately/checkbox": "npm:^3.7.2"
+    "@react-stately/collections": "npm:^3.12.8"
+    "@react-stately/color": "npm:^3.9.2"
+    "@react-stately/combobox": "npm:^3.12.0"
+    "@react-stately/data": "npm:^3.14.1"
+    "@react-stately/datepicker": "npm:^3.15.2"
+    "@react-stately/disclosure": "npm:^3.0.8"
+    "@react-stately/dnd": "npm:^3.7.1"
+    "@react-stately/form": "npm:^3.2.2"
+    "@react-stately/list": "npm:^3.13.1"
+    "@react-stately/menu": "npm:^3.9.8"
+    "@react-stately/numberfield": "npm:^3.10.2"
+    "@react-stately/overlays": "npm:^3.6.20"
+    "@react-stately/radio": "npm:^3.11.2"
+    "@react-stately/searchfield": "npm:^3.5.16"
+    "@react-stately/select": "npm:^3.8.0"
+    "@react-stately/selection": "npm:^3.20.6"
+    "@react-stately/slider": "npm:^3.7.2"
+    "@react-stately/table": "npm:^3.15.1"
+    "@react-stately/tabs": "npm:^3.8.6"
+    "@react-stately/toast": "npm:^3.1.2"
+    "@react-stately/toggle": "npm:^3.9.2"
+    "@react-stately/tooltip": "npm:^3.5.8"
+    "@react-stately/tree": "npm:^3.9.3"
+    "@react-types/shared": "npm:^3.32.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 4913f8ae9beb909d07669b97c0960dadad72c3c9e572051158a64acac3eadc73ff495b3c145b3673c15494751506e5b8a666a59f65364900fa66917412971d32
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^9.1.3":
   version: 9.1.3
   resolution: "react-toastify@npm:9.1.3"
@@ -27357,15 +29470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scroll-into-view-if-needed@npm:^2.2.28":
-  version: 2.2.31
-  resolution: "scroll-into-view-if-needed@npm:2.2.31"
-  dependencies:
-    compute-scroll-into-view: "npm:^1.0.20"
-  checksum: 8650d851b52e0321aeea4384cd47a6983592a2c6903604761c514ae4e0a7261b1a5bdab89910ad83ae9bf31692ec33a30272c1254b995871498b8dff2db2b02a
-  languageName: node
-  linkType: hard
-
 "scrypt-js@npm:3.0.1, scrypt-js@npm:^3.0.0":
   version: 3.0.1
   resolution: "scrypt-js@npm:3.0.1"
@@ -27673,7 +29777,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -27897,15 +30001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"smooth-scroll-into-view-if-needed@npm:^1.1.33":
-  version: 1.1.33
-  resolution: "smooth-scroll-into-view-if-needed@npm:1.1.33"
-  dependencies:
-    scroll-into-view-if-needed: "npm:^2.2.28"
-  checksum: 0b0975ae13bdd51135c29e7d10d081fb123ea949e1c75e9d9be16cfd883e46f26797de4204080ffd3ddf73d6607ab321f1c49d715ea47d69ea47bf3f2f241ac1
-  languageName: node
-  linkType: hard
-
 "snake-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "snake-case@npm:3.0.4"
@@ -28103,6 +30198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
+  languageName: node
+  linkType: hard
+
 "source-map-loader@npm:^3.0.0":
   version: 3.0.2
   resolution: "source-map-loader@npm:3.0.2"
@@ -28754,28 +30856,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.11":
-  version: 5.3.11
-  resolution: "styled-components@npm:5.3.11"
-  dependencies:
-    "@babel/helper-module-imports": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.4.5"
-    "@emotion/is-prop-valid": "npm:^1.1.0"
-    "@emotion/stylis": "npm:^0.8.4"
-    "@emotion/unitless": "npm:^0.7.4"
-    babel-plugin-styled-components: "npm:>= 1.12.0"
-    css-to-react-native: "npm:^3.0.0"
-    hoist-non-react-statics: "npm:^3.0.0"
-    shallowequal: "npm:^1.1.0"
-    supports-color: "npm:^5.5.0"
-  peerDependencies:
-    react: ">= 16.8.0"
-    react-dom: ">= 16.8.0"
-    react-is: ">= 16.8.0"
-  checksum: 7e1baee0f7b4479fe1a4064e4ae87e40f1ba583030d04827cef73fa7b36d3a91ed552dc76164d319216039f906af42a5229648c023482280fa4b5f71f00eef2d
-  languageName: node
-  linkType: hard
-
 "styled-components@npm:^6.1.11":
   version: 6.1.11
   resolution: "styled-components@npm:6.1.11"
@@ -28881,7 +30961,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -29038,6 +31118,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^3.0.2, tailwind-merge@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "tailwind-merge@npm:3.3.1"
+  checksum: ad97f0763afdfdce785b8de50bc546951bb3cc803ab4f809cb10d654d9b7e28b0d19dead70ab9070edf479af68622a5f6ba16a21584fa8c21236855709dc648f
+  languageName: node
+  linkType: hard
+
+"tailwindcss-react-aria-components@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "tailwindcss-react-aria-components@npm:2.0.1"
+  peerDependencies:
+    tailwindcss: ^4.0.0
+  checksum: 852f18435c2703143aa447846f91ae49068d6242b15570bf939fbcbeef92b5234a195084790a01eddc23bbfa7b24ec5651e0a7d409e125f1d5f57fe7ff9aca58
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.1.16, tailwindcss@npm:^4.1.16":
+  version: 4.1.16
+  resolution: "tailwindcss@npm:4.1.16"
+  checksum: 1a17c0f652268440a29997828d7d002c1ae334841ca56767e61e228eb0aaadbbc48e694619bedbb37c3e9a7c89182168e9035bd62bbf48dc617c97ef36b78a36
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.0.2":
   version: 3.4.1
   resolution: "tailwindcss@npm:3.4.1"
@@ -29628,7 +31731,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.6.0, tslib@npm:^2.6.3":
+"tslib@npm:^2.6.0, tslib@npm:^2.6.3, tslib@npm:^2.8.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
@@ -30414,6 +32517,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.4.0":
+  version: 1.6.0
+  resolution: "use-sync-external-store@npm:1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: b40ad2847ba220695bff2d4ba4f4d60391c0fb4fb012faa7a4c18eb38b69181936f5edc55a522c4d20a788d1a879b73c3810952c9d0fd128d01cb3f22042c09e
+  languageName: node
+  linkType: hard
+
 "usehooks-ts@npm:^2.9.1":
   version: 2.10.0
   resolution: "usehooks-ts@npm:2.10.0"
@@ -30942,7 +33054,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.0, warning@npm:^4.0.3":
+"warning@npm:^4.0.0":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies: