diff --git a/apps/customer_dashboard/src/components/dashboard_header/dashboard_header.tsx b/apps/customer_dashboard/src/components/dashboard_header/dashboard_header.tsx
index 0f24dc6fe..ac026ce76 100644
--- a/apps/customer_dashboard/src/components/dashboard_header/dashboard_header.tsx
+++ b/apps/customer_dashboard/src/components/dashboard_header/dashboard_header.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { type FC } from "react";
 import { Logo } from "@oko-wallet/oko-common-ui/logo";
 
 import styles from "./dashboard_header.module.scss";
 
-export const DashboardHeader: React.FC = () => {
+export const DashboardHeader: FC = () => {
   return (
     <div className={styles.wrapper}>
       {/* NOTE: theme is hardcoded to light for now */}
diff --git a/apps/customer_dashboard/src/components/info_modal/info_modal.tsx b/apps/customer_dashboard/src/components/info_modal/info_modal.tsx
index 0243d614e..cd372547b 100644
--- a/apps/customer_dashboard/src/components/info_modal/info_modal.tsx
+++ b/apps/customer_dashboard/src/components/info_modal/info_modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { Card } from "@oko-wallet/oko-common-ui/card";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -14,7 +14,7 @@ interface InfoModalProps {
   renderTrigger: (props: { onOpen: () => void }) => React.ReactNode;
 }
 
-export const InfoModal: React.FC<InfoModalProps> = ({
+export const InfoModal: FC<InfoModalProps> = ({
   title,
   content,
   renderTrigger,
diff --git a/apps/customer_dashboard/src/components/reset_password/reset_password.tsx b/apps/customer_dashboard/src/components/reset_password/reset_password.tsx
index ff4688280..4a10a2697 100644
--- a/apps/customer_dashboard/src/components/reset_password/reset_password.tsx
+++ b/apps/customer_dashboard/src/components/reset_password/reset_password.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { EyeIcon } from "@oko-wallet/oko-common-ui/icons/eye";
 import { EyeOffIcon } from "@oko-wallet/oko-common-ui/icons/eye_off";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -11,7 +11,7 @@ import { AccountForm } from "@oko-wallet-ct-dashboard/ui";
 import { useResetPasswordForm } from "./use_reset_password_form";
 import styles from "./reset_password.module.scss";
 
-export const ResetPassword: React.FC = () => {
+export const ResetPassword: FC = () => {
   const { onSubmit, register, errors, isLoading, isValid } =
     useResetPasswordForm();
 
diff --git a/apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx b/apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx
index 9d169ba82..4348241d7 100644
--- a/apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx
+++ b/apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type { FC } from "react";
 import { Input } from "@oko-wallet/oko-common-ui/input";
 import { Card } from "@oko-wallet/oko-common-ui/card";
 import { Logo } from "@oko-wallet/oko-common-ui/logo";
@@ -14,7 +14,7 @@ import styles from "./sign_in_form.module.scss";
 import { useSignInForm } from "./use_sign_in_form";
 import { GET_STARTED_URL } from "@oko-wallet-ct-dashboard/constants";
 
-export const SignInForm: React.FC = () => {
+export const SignInForm: FC = () => {
   const {
     onSubmit,
     register,
diff --git a/apps/customer_dashboard/src/components/sign_up_digits/sign_up_digits.tsx b/apps/customer_dashboard/src/components/sign_up_digits/sign_up_digits.tsx
index ecdd7510c..c5128d22b 100644
--- a/apps/customer_dashboard/src/components/sign_up_digits/sign_up_digits.tsx
+++ b/apps/customer_dashboard/src/components/sign_up_digits/sign_up_digits.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { OtpInput } from "@oko-wallet/oko-common-ui/otp_input";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
@@ -10,7 +10,7 @@ import { ResendCode } from "../resend_code/resend_code";
 import { ExpiryTimer } from "../expiry_timer/expiry_timer";
 import { EMAIL_VERIFICATION_TIMER_SECONDS } from "@oko-wallet-ct-dashboard/constants";
 
-export const SignUpDigits: React.FC = () => {
+export const SignUpDigits: FC = () => {
   const {
     digits,
     handleDigitsChange,
diff --git a/apps/demo_web/src/components/oko_provider/oko_provider.tsx b/apps/demo_web/src/components/oko_provider/oko_provider.tsx
index acf6553b3..3bb8305a3 100644
--- a/apps/demo_web/src/components/oko_provider/oko_provider.tsx
+++ b/apps/demo_web/src/components/oko_provider/oko_provider.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 
 import { useInitOko } from "./use_oko";
 
-export const OkoProvider: React.FC<PropsWithChildren> = ({ children }) => {
+export const OkoProvider: FC<PropsWithChildren> = ({ children }) => {
   useInitOko();
 
   return <>{children}</>;
diff --git a/apps/demo_web/src/components/preview_panel/preview_panel.tsx b/apps/demo_web/src/components/preview_panel/preview_panel.tsx
index 6c7a2d894..ef783b609 100644
--- a/apps/demo_web/src/components/preview_panel/preview_panel.tsx
+++ b/apps/demo_web/src/components/preview_panel/preview_panel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import cn from "classnames";
+import type { FC } from "react";
 import { Skeleton } from "@oko-wallet/oko-common-ui/skeleton";
 
 import styles from "./preview_panel.module.scss";
@@ -14,7 +15,7 @@ import { EthereumOffchainSignWidget } from "@oko-wallet-demo-web/components/widg
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 
-export const PreviewPanel: React.FC = () => {
+export const PreviewPanel: FC = () => {
   const isLazyInitialized = useSDKState(
     (st) => st.isCosmosLazyInitialized && st.isEthLazyInitialized,
   );
diff --git a/apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx b/apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx
index 1a0f54079..02ba46e62 100644
--- a/apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { GoogleIcon } from "@oko-wallet/oko-common-ui/icons/google_icon";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -21,7 +21,7 @@ export type AccountInfoWidgetProps = {
   onSignOut: () => void;
 };
 
-export const AccountInfoWidget: React.FC<AccountInfoWidgetProps> = ({
+export const AccountInfoWidget: FC<AccountInfoWidgetProps> = ({
   type,
   email,
   publicKey,
diff --git a/apps/demo_web/src/components/widgets/account_widget/account_widget.tsx b/apps/demo_web/src/components/widgets/account_widget/account_widget.tsx
index bf1a91530..8a3b6f87b 100644
--- a/apps/demo_web/src/components/widgets/account_widget/account_widget.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/account_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import type { AuthType } from "@oko-wallet/oko-types/auth";
 import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
@@ -22,7 +22,7 @@ function authTypeToLoginMethod(authType: AuthType | null): LoginMethod {
   return authType;
 }
 
-export const AccountWidget: React.FC<AccountWidgetProps> = () => {
+export const AccountWidget: FC<AccountWidgetProps> = () => {
   const okoWallet = useSDKState((state) => state.oko_cosmos)?.okoWallet;
   const [signingInState, setSigningInState] = useState<SigningInState>({
     status: "ready",
diff --git a/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.tsx b/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.tsx
index 0cd84e862..a3e60a09f 100644
--- a/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import cn from "classnames";
 import { GoogleIcon } from "@oko-wallet/oko-common-ui/icons/google_icon";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -20,7 +20,7 @@ type AuthProgressWidgetProps = {
   onRetry?: () => void;
 };
 
-export const AuthProgressWidget: React.FC<AuthProgressWidgetProps> = ({
+export const AuthProgressWidget: FC<AuthProgressWidgetProps> = ({
   method,
   status = "loading",
   onRetry,
diff --git a/apps/demo_web/src/components/widgets/account_widget/spinner.tsx b/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
index 6570067ba..2121b8d23 100644
--- a/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 
 import styles from "./spinner.module.scss";
 
@@ -8,7 +8,7 @@ interface SpinnerProps {
   status?: "loading" | "failed";
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: FC<SpinnerProps> = ({
   size = 62,
   className,
   status = "loading",
diff --git a/apps/demo_web/src/components/widgets/account_widget/wallet_box.tsx b/apps/demo_web/src/components/widgets/account_widget/wallet_box.tsx
index 10fafb8a6..7b3f91cf0 100644
--- a/apps/demo_web/src/components/widgets/account_widget/wallet_box.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/wallet_box.tsx
@@ -1,9 +1,9 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./wallet_box.module.scss";
 
-export const WalletBox: React.FC<WalletBoxProps> = ({ icon, label }) => {
+export const WalletBox: FC<WalletBoxProps> = ({ icon, label }) => {
   return (
     <div className={styles.boxContainer}>
       {icon}
diff --git a/apps/demo_web/src/components/widgets/address_widget/address_row.tsx b/apps/demo_web/src/components/widgets/address_widget/address_row.tsx
index 09180f299..344f3bed1 100644
--- a/apps/demo_web/src/components/widgets/address_widget/address_row.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/address_row.tsx
@@ -1,14 +1,10 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Tooltip } from "@oko-wallet/oko-common-ui/tooltip";
 
 import styles from "./address_row.module.scss";
 
-export const AddressRow: React.FC<AddressRowProps> = ({
-  icon,
-  chain,
-  address,
-}) => {
+export const AddressRow: FC<AddressRowProps> = ({ icon, chain, address }) => {
   const isLoggedIn = !!address;
   const label = chain === "ethereum" ? "Ethereum" : "Cosmos Hub";
   const prefix = chain === "ethereum" ? "0x" : "cosmos1";
diff --git a/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx b/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx
index 1710aa165..6b4fb7358 100644
--- a/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { WalletIcon } from "@oko-wallet/oko-common-ui/icons/wallet";
@@ -13,7 +13,7 @@ import { ViewChainsModal } from "./view_chains_modal";
 import { useAddresses } from "@oko-wallet-demo-web/hooks/wallet";
 import { useGetChainInfos } from "@oko-wallet-demo-web/hooks/use_get_chain_infos";
 
-export const AddressWidget: React.FC<AddressWidgetProps> = ({}) => {
+export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
   const [showModal, setShowModal] = useState(false);
   const { cosmosAddress, ethAddress } = useAddresses();
 
diff --git a/apps/demo_web/src/components/widgets/address_widget/chains_row.tsx b/apps/demo_web/src/components/widgets/address_widget/chains_row.tsx
index 033eafd37..9418de3e0 100644
--- a/apps/demo_web/src/components/widgets/address_widget/chains_row.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/chains_row.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./chains_row.module.scss";
@@ -8,7 +8,7 @@ export interface ChainsRowProps {
   icon: ReactElement;
 }
 
-export const ChainsRow: React.FC<ChainsRowProps> = ({ chainName, icon }) => {
+export const ChainsRow: FC<ChainsRowProps> = ({ chainName, icon }) => {
   return (
     <div className={styles.row}>
       {icon}
diff --git a/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx b/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
index 096a7cea3..c4f424285 100644
--- a/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { OsmosisIcon } from "@oko-wallet/oko-common-ui/icons/osmosis_icon";
@@ -6,7 +6,7 @@ import { Button } from "@oko-wallet/oko-common-ui/button";
 
 import styles from "./view_chains_button.module.scss";
 
-export const ViewChainsButton: React.FC<ViewChainsButtonProps> = ({
+export const ViewChainsButton: FC<ViewChainsButtonProps> = ({
   buttonVariant,
   onClick,
 }) => {
diff --git a/apps/demo_web/src/components/widgets/address_widget/view_chains_modal.tsx b/apps/demo_web/src/components/widgets/address_widget/view_chains_modal.tsx
index 2a781537d..6f359fc6d 100644
--- a/apps/demo_web/src/components/widgets/address_widget/view_chains_modal.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/view_chains_modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import type { ChainInfo } from "@keplr-wallet/types";
 import { SearchIcon } from "@oko-wallet/oko-common-ui/icons/search";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
@@ -8,7 +8,7 @@ import cn from "classnames";
 import styles from "./view_chains_modal.module.scss";
 import { ChainsRow } from "./chains_row";
 
-export const ViewChainsModal: React.FC<ViewChainsModalProps> = ({
+export const ViewChainsModal: FC<ViewChainsModalProps> = ({
   onClose,
   chains,
 }) => {
diff --git a/apps/demo_web/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx b/apps/demo_web/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
index 3bb2bb2e7..f49025ce2 100644
--- a/apps/demo_web/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
+++ b/apps/demo_web/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 
 import { SignWidget } from "@oko-wallet-demo-web/components/widgets/sign_widget/sign_widget";
diff --git a/apps/demo_web/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx b/apps/demo_web/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
index 838a9fa09..bf48aa6ba 100644
--- a/apps/demo_web/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
+++ b/apps/demo_web/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { makeSignDoc as makeProtoSignDoc } from "@cosmjs/proto-signing";
 import { makeSignDoc as makeAminoSignDoc } from "@cosmjs/amino";
 import {
diff --git a/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx b/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx
index d880dff23..f82494e90 100644
--- a/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx
+++ b/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 import { ArrowRightOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/arrow_right_outlined";
 import { BookOpenIcon } from "@oko-wallet/oko-common-ui/icons/book_open";
@@ -8,7 +8,7 @@ import { Widget } from "../widget_components";
 import styles from "./docs_widget.module.scss";
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 
-export const DocsWidget: React.FC = () => {
+export const DocsWidget: FC = () => {
   const isSignedIn = useUserInfoState((state) => state.isSignedIn);
 
   const handleOpenDocs = () => {
diff --git a/apps/demo_web/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx b/apps/demo_web/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
index fb5b8a4bb..089c25f63 100644
--- a/apps/demo_web/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
+++ b/apps/demo_web/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { isAddressEqual, recoverMessageAddress } from "viem";
 
diff --git a/apps/demo_web/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx b/apps/demo_web/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
index 516f6975c..234925487 100644
--- a/apps/demo_web/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
+++ b/apps/demo_web/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import {
   parseTransaction,
diff --git a/apps/demo_web/src/components/widgets/login_widget/login_widget.tsx b/apps/demo_web/src/components/widgets/login_widget/login_widget.tsx
index 0c457b99d..6ef3a3f9c 100644
--- a/apps/demo_web/src/components/widgets/login_widget/login_widget.tsx
+++ b/apps/demo_web/src/components/widgets/login_widget/login_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 
 import { Widget } from "../widget_components";
 import styles from "./login_widget.module.scss";
@@ -10,7 +10,7 @@ export interface LoginWidgetProps {
   onSignIn: (method: LoginMethod) => void;
 }
 
-export const LoginWidget: React.FC<LoginWidgetProps> = ({ onSignIn }) => {
+export const LoginWidget: FC<LoginWidgetProps> = ({ onSignIn }) => {
   const [showSocials, setShowSocials] = useState(false);
 
   return (
diff --git a/apps/demo_web/src/components/widgets/sign_widget/sign_widget.tsx b/apps/demo_web/src/components/widgets/sign_widget/sign_widget.tsx
index 5e296f959..92e6deaf1 100644
--- a/apps/demo_web/src/components/widgets/sign_widget/sign_widget.tsx
+++ b/apps/demo_web/src/components/widgets/sign_widget/sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactElement, useState, useRef, useEffect } from "react";
+import { type ReactElement, useState, useRef, useEffect, type FC } from "react";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 import { InfoCircleIcon } from "@oko-wallet/oko-common-ui/icons/info_circle";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
@@ -10,7 +10,7 @@ import styles from "./sign_widget.module.scss";
 
 type SignStep = "initial" | "loading" | "success" | "error";
 
-export const SignWidget: React.FC<SignWidgetProps> = ({
+export const SignWidget: FC<SignWidgetProps> = ({
   chain,
   chainIcon,
   signType,
diff --git a/apps/demo_web/src/components/widgets/user_data_widget/user_data_widget.tsx b/apps/demo_web/src/components/widgets/user_data_widget/user_data_widget.tsx
index 1927a151b..c131fe13c 100644
--- a/apps/demo_web/src/components/widgets/user_data_widget/user_data_widget.tsx
+++ b/apps/demo_web/src/components/widgets/user_data_widget/user_data_widget.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import type { FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { CodeIcon } from "@oko-wallet/oko-common-ui/icons/code";
 
 import { Widget } from "@oko-wallet-demo-web/components/widgets/widget_components";
 import styles from "./user_data_widget.module.scss";
 
-export const UserDataWidget: React.FC<UserDataWidgetProps> = ({ userData }) => {
+export const UserDataWidget: FC<UserDataWidgetProps> = ({ userData }) => {
   const isLoggedIn = !!userData;
 
   return (
diff --git a/apps/demo_web/src/components/widgets/widget_components.tsx b/apps/demo_web/src/components/widgets/widget_components.tsx
index bd55a6196..99a538420 100644
--- a/apps/demo_web/src/components/widgets/widget_components.tsx
+++ b/apps/demo_web/src/components/widgets/widget_components.tsx
@@ -1,9 +1,9 @@
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import cn from "classnames";
 
 import styles from "./widget_components.module.scss";
 
-export const Widget: React.FC<
+export const Widget: FC<
   PropsWithChildren<{
     gradientBorder?: boolean;
   }>
diff --git a/apps/oko_admin_web/src/components/account/account_info_base.tsx b/apps/oko_admin_web/src/components/account/account_info_base.tsx
index 1223e0522..280eea7d7 100644
--- a/apps/oko_admin_web/src/components/account/account_info_base.tsx
+++ b/apps/oko_admin_web/src/components/account/account_info_base.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./account_info_base.module.scss";
@@ -10,7 +10,7 @@ export interface AccountInfoBaseProps {
   avatarUrl?: string;
 }
 
-export const AccountInfoBase: React.FC<AccountInfoBaseProps> = ({
+export const AccountInfoBase: FC<AccountInfoBaseProps> = ({
   username,
   email,
   avatarUrl,
diff --git a/apps/oko_admin_web/src/components/account/avatar.tsx b/apps/oko_admin_web/src/components/account/avatar.tsx
index 3247995c3..d2999a632 100644
--- a/apps/oko_admin_web/src/components/account/avatar.tsx
+++ b/apps/oko_admin_web/src/components/account/avatar.tsx
@@ -1,5 +1,4 @@
-import Image from "next/image";
-import { useState } from "react";
+import { useState, type FC } from "react";
 
 import styles from "./avatar.module.scss";
 
@@ -9,7 +8,7 @@ export interface AvatarProps {
   alt: string;
 }
 
-export const Avatar: React.FC<AvatarProps> = ({ src, fallback, alt }) => {
+export const Avatar: FC<AvatarProps> = ({ src, fallback, alt }) => {
   const [imgSrc, setImgSrc] = useState(src || fallback || "");
   const [showAlt, setShowAlt] = useState(!src && !fallback);
 
diff --git a/apps/oko_admin_web/src/components/apps_view/apps_view_header.tsx b/apps/oko_admin_web/src/components/apps_view/apps_view_header.tsx
index 8391a37c7..531302601 100644
--- a/apps/oko_admin_web/src/components/apps_view/apps_view_header.tsx
+++ b/apps/oko_admin_web/src/components/apps_view/apps_view_header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 
@@ -8,7 +8,7 @@ import { paths } from "@oko-wallet-admin/paths";
 import { useGetCustomerListWithAPIKeys } from "./use_get_customer";
 import { TitleHeader } from "@oko-wallet-admin/components/title_header/title_header";
 
-export const AppsViewHeader: React.FC = () => {
+export const AppsViewHeader: FC = () => {
   const router = useRouter();
 
   const { data } = useGetCustomerListWithAPIKeys();
diff --git a/apps/oko_admin_web/src/components/apps_view/manage_apps.tsx b/apps/oko_admin_web/src/components/apps_view/manage_apps.tsx
index d9205b092..d28244242 100644
--- a/apps/oko_admin_web/src/components/apps_view/manage_apps.tsx
+++ b/apps/oko_admin_web/src/components/apps_view/manage_apps.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./manage_apps.module.scss";
 import { AppsViewHeader } from "./apps_view_header";
 import { CustomerTable } from "./customer_table";
 
-export const AppsView: React.FC = () => {
+export const AppsView: FC = () => {
   return (
     <div className={styles.wrapper}>
       <AppsViewHeader />
diff --git a/apps/oko_admin_web/src/components/create_customer/create_customer_form.tsx b/apps/oko_admin_web/src/components/create_customer/create_customer_form.tsx
index 0925ab635..6415869ae 100644
--- a/apps/oko_admin_web/src/components/create_customer/create_customer_form.tsx
+++ b/apps/oko_admin_web/src/components/create_customer/create_customer_form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef } from "react";
+import { useRef, type FC } from "react";
 import { useRouter } from "next/navigation";
 import { type SubmitHandler } from "react-hook-form";
 import { Input } from "@oko-wallet/oko-common-ui/input";
@@ -13,7 +13,7 @@ import styles from "./create_customer_form.module.scss";
 import { useCreateCustomerForm } from "./use_create_customer_form";
 import { useToast } from "../toast/use_toast";
 
-export const CreateCustomerForm: React.FC = () => {
+export const CreateCustomerForm: FC = () => {
   const router = useRouter();
   const { showSuccessToast, showErrorToast } = useToast();
   const fileInputRef = useRef<HTMLInputElement>(null);
diff --git a/apps/oko_admin_web/src/components/create_ks_node/create_customer_form.tsx b/apps/oko_admin_web/src/components/create_ks_node/create_customer_form.tsx
index 6fa471085..281983a2f 100644
--- a/apps/oko_admin_web/src/components/create_ks_node/create_customer_form.tsx
+++ b/apps/oko_admin_web/src/components/create_ks_node/create_customer_form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { useRouter } from "next/navigation";
 import { type SubmitHandler } from "react-hook-form";
 import { Input } from "@oko-wallet/oko-common-ui/input";
@@ -45,7 +45,7 @@ function useGetKSNodeInfo(nodeId?: string) {
   return { ...query, data: query.data };
 }
 
-export const CreateKSNodeForm: React.FC<CreateKSNodeFormProps> = ({
+export const CreateKSNodeForm: FC<CreateKSNodeFormProps> = ({
   mode = "create",
   nodeId,
 }) => {
diff --git a/apps/oko_admin_web/src/components/empty_state/empty_state.tsx b/apps/oko_admin_web/src/components/empty_state/empty_state.tsx
index b22fc7d23..2f6c69d5f 100644
--- a/apps/oko_admin_web/src/components/empty_state/empty_state.tsx
+++ b/apps/oko_admin_web/src/components/empty_state/empty_state.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 
 import styles from "./empty_state.module.scss";
@@ -10,7 +10,7 @@ interface EmptyStateProps {
   onButtonClick?: () => void;
 }
 
-export const EmptyState: React.FC<EmptyStateProps> = ({
+export const EmptyState: FC<EmptyStateProps> = ({
   text,
   showButton = false,
   buttonText,
diff --git a/apps/oko_admin_web/src/components/login/login_form.tsx b/apps/oko_admin_web/src/components/login/login_form.tsx
index b9364d443..01ef48e2f 100644
--- a/apps/oko_admin_web/src/components/login/login_form.tsx
+++ b/apps/oko_admin_web/src/components/login/login_form.tsx
@@ -59,7 +59,7 @@ export const LoginForm = () => {
         id="email"
         type="text"
         value={email}
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={(e: any) => setEmail(e.target.value)}
         required
         placeholder="Email"
         fullWidth
@@ -69,7 +69,7 @@ export const LoginForm = () => {
         id="password"
         type="password"
         value={password}
-        onChange={(e) => setPassword(e.target.value)}
+        onChange={(e: any) => setPassword(e.target.value)}
         required
         placeholder="Password"
         fullWidth
diff --git a/apps/oko_admin_web/src/components/navigation/nav_item.tsx b/apps/oko_admin_web/src/components/navigation/nav_item.tsx
index dc1f52194..a801edff6 100644
--- a/apps/oko_admin_web/src/components/navigation/nav_item.tsx
+++ b/apps/oko_admin_web/src/components/navigation/nav_item.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import styles from "./nav_item.module.scss";
 import cn from "classnames";
 
@@ -11,7 +11,7 @@ export interface NavItemProps {
   isParent?: boolean;
 }
 
-export const NavItem: React.FC<NavItemProps> = ({
+export const NavItem: FC<NavItemProps> = ({
   onClick,
   kind = "menu",
   active = false,
diff --git a/apps/oko_admin_web/src/components/navigation/nav_menu.tsx b/apps/oko_admin_web/src/components/navigation/nav_menu.tsx
index 607c0ade2..e58388f58 100644
--- a/apps/oko_admin_web/src/components/navigation/nav_menu.tsx
+++ b/apps/oko_admin_web/src/components/navigation/nav_menu.tsx
@@ -1,9 +1,7 @@
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./nav_menu.module.scss";
 
-export const NavMenu: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const NavMenu: FC<{ children: React.ReactNode }> = ({ children }) => {
   return <div className={styles.wrapper}>{children}</div>;
 };
diff --git a/apps/oko_admin_web/src/components/navigation/navigation.tsx b/apps/oko_admin_web/src/components/navigation/navigation.tsx
index 89baebf07..d6f151c20 100644
--- a/apps/oko_admin_web/src/components/navigation/navigation.tsx
+++ b/apps/oko_admin_web/src/components/navigation/navigation.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { FC } from "react";
 import { usePathname, useRouter } from "next/navigation";
 
 import styles from "./navigation.module.scss";
@@ -16,7 +17,7 @@ export interface NavigationItem {
 
 export interface NavigationProps {}
 
-export const Navigation: React.FC<NavigationProps> = () => {
+export const Navigation: FC<NavigationProps> = () => {
   const router = useRouter();
   const pathname = usePathname();
 
diff --git a/apps/oko_admin_web/src/components/pagination/pagination.tsx b/apps/oko_admin_web/src/components/pagination/pagination.tsx
index d9d0621a8..8e08e3ab4 100644
--- a/apps/oko_admin_web/src/components/pagination/pagination.tsx
+++ b/apps/oko_admin_web/src/components/pagination/pagination.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import styles from "./pagination.module.scss";
 
 export interface PaginationProps {
@@ -11,7 +11,7 @@ function range(start: number, end: number) {
   return Array.from({ length: end - start + 1 }, (_, i) => start + i);
 }
 
-export const Pagination: React.FC<PaginationProps> = ({
+export const Pagination: FC<PaginationProps> = ({
   currentPage,
   totalPages,
   onPageChange,
diff --git a/apps/oko_admin_web/src/components/side_bar/side_bar_footer.tsx b/apps/oko_admin_web/src/components/side_bar/side_bar_footer.tsx
index 34db72124..a00d50dcd 100644
--- a/apps/oko_admin_web/src/components/side_bar/side_bar_footer.tsx
+++ b/apps/oko_admin_web/src/components/side_bar/side_bar_footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { SidebarAccountInfo } from "@oko-wallet/oko-common-ui/sidebar_account_info";
 import { AnchoredMenu } from "@oko-wallet/oko-common-ui/anchored_menu";
 import { ThreeDotsVerticalIcon } from "@oko-wallet/oko-common-ui/icons/three_dots_vertical";
@@ -10,7 +10,7 @@ import styles from "./side_bar_footer.module.scss";
 import { useLogin } from "../login/use_login";
 import { useAppState } from "@oko-wallet-admin/state";
 
-export const SideBarFooter: React.FC = () => {
+export const SideBarFooter: FC = () => {
   const { logout } = useLogin();
   const { user } = useAppState();
 
diff --git a/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_table.tsx b/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_table.tsx
index 886e1f844..db18be86a 100644
--- a/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_table.tsx
+++ b/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_table.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect, useRef, useState, type FC } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { createColumnHelper, flexRender } from "@tanstack/react-table";
@@ -133,7 +133,7 @@ const columns = [
   }),
 ];
 
-export const SigSharesTable: React.FC = () => {
+export const SigSharesTable: FC = () => {
   const {
     pageIndex,
     currentPage,
@@ -159,13 +159,11 @@ export const SigSharesTable: React.FC = () => {
     return "app";
   };
 
-  const [filterType, setFilterType] = React.useState<"app" | "node">(
-    getFilterType(),
-  );
+  const [filterType, setFilterType] = useState<"app" | "node">(getFilterType());
 
-  const isUserChangingFilterType = React.useRef(false);
+  const isUserChangingFilterType = useRef(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isUserChangingFilterType.current) {
       return;
     }
diff --git a/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_view.tsx b/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_view.tsx
index 552c03da9..7e0af7931 100644
--- a/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_view.tsx
+++ b/apps/oko_admin_web/src/components/sig_shares_view/sig_shares_view.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./sig_shares_view.module.scss";
 import { SigSharesTable } from "./sig_shares_table";
 import { TitleHeader } from "@oko-wallet-admin/components/title_header/title_header";
 
-export const SigSharesView: React.FC = () => {
+export const SigSharesView: FC = () => {
   return (
     <div className={styles.wrapper}>
       <TitleHeader title="Sig History" />
diff --git a/apps/oko_admin_web/src/components/toast/toast.tsx b/apps/oko_admin_web/src/components/toast/toast.tsx
index ab241191c..7d0a79de0 100644
--- a/apps/oko_admin_web/src/components/toast/toast.tsx
+++ b/apps/oko_admin_web/src/components/toast/toast.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import cn from "classnames";
 
 import styles from "./toast.module.scss";
@@ -11,7 +11,7 @@ export interface ToastProps {
   onClose?: () => void;
 }
 
-export const Toast: React.FC<ToastProps> = ({ message, type, onClose }) => (
+export const Toast: FC<ToastProps> = ({ message, type, onClose }) => (
   <div className={cn(styles.wrapper, styles[type])}>
     {message}
     {onClose && (
diff --git a/apps/oko_admin_web/src/components/toast/toastProvider.tsx b/apps/oko_admin_web/src/components/toast/toastProvider.tsx
index 2245e0d62..3a1a533ed 100644
--- a/apps/oko_admin_web/src/components/toast/toastProvider.tsx
+++ b/apps/oko_admin_web/src/components/toast/toastProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useCallback } from "react";
+import { createContext, useState, type FC } from "react";
 
 import { Toast, type ToastType } from "./toast";
 
@@ -11,7 +11,7 @@ export const ToastContext = createContext<ToastContextType | undefined>(
   undefined,
 );
 
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+export const ToastProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [message, setMessage] = useState<{
diff --git a/apps/oko_admin_web/src/components/top_provider/top_provider.tsx b/apps/oko_admin_web/src/components/top_provider/top_provider.tsx
index e8ff88712..3952954c2 100644
--- a/apps/oko_admin_web/src/components/top_provider/top_provider.tsx
+++ b/apps/oko_admin_web/src/components/top_provider/top_provider.tsx
@@ -6,7 +6,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import { IntlProvider } from "react-intl";
 
 import { ToastProvider } from "@oko-wallet-admin/components/toast/toastProvider";
@@ -14,7 +14,7 @@ import { en } from "@oko-wallet-admin/i18n/en";
 
 const queryClient = new QueryClient();
 
-export const TopProvider: React.FC<PropsWithChildren> = ({ children }) => {
+export const TopProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={dehydrate(queryClient)}>
diff --git a/apps/oko_admin_web/src/components/user_list_view/user_list_table.tsx b/apps/oko_admin_web/src/components/user_list_view/user_list_table.tsx
index 5934d850b..d5fbd7566 100644
--- a/apps/oko_admin_web/src/components/user_list_view/user_list_table.tsx
+++ b/apps/oko_admin_web/src/components/user_list_view/user_list_table.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { FC } from "react";
 import {
   Table,
   TableBody,
@@ -14,7 +15,7 @@ import styles from "./user_list_table.module.scss";
 import { Pagination } from "../pagination/pagination";
 import { useUserListTable } from "./use_user_list_table";
 
-export const UserListTable: React.FC = () => {
+export const UserListTable: FC = () => {
   const { table, totalPageCount, currentPage, handlePageChange } =
     useUserListTable();
 
diff --git a/apps/oko_admin_web/src/components/user_list_view/user_list_view.tsx b/apps/oko_admin_web/src/components/user_list_view/user_list_view.tsx
index f3d6a15cc..ba4c12bc0 100644
--- a/apps/oko_admin_web/src/components/user_list_view/user_list_view.tsx
+++ b/apps/oko_admin_web/src/components/user_list_view/user_list_view.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./user_list_view.module.scss";
 import { UserListTable } from "./user_list_table";
 import { TitleHeader } from "@oko-wallet-admin/components/title_header/title_header";
 
-export const UserListView: React.FC = () => {
+export const UserListView: FC = () => {
   return (
     <div className={styles.wrapper}>
       <TitleHeader title="Manage Users" />
diff --git a/crypto/tecdsa/client_example/src/components/step/step.tsx b/crypto/tecdsa/client_example/src/components/step/step.tsx
index 55bbd8fb4..51b89f363 100644
--- a/crypto/tecdsa/client_example/src/components/step/step.tsx
+++ b/crypto/tecdsa/client_example/src/components/step/step.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./step.module.css";
 
-export const Step: React.FC<StepProps> = ({
+export const Step: FC<StepProps> = ({
   label,
   handleClick,
   result,
diff --git a/crypto/tecdsa/client_example/src/components/workflow/workflow.tsx b/crypto/tecdsa/client_example/src/components/workflow/workflow.tsx
index c72b0a1b3..a7ca50906 100644
--- a/crypto/tecdsa/client_example/src/components/workflow/workflow.tsx
+++ b/crypto/tecdsa/client_example/src/components/workflow/workflow.tsx
@@ -4,7 +4,7 @@ import styles from "./workflow.module.css";
 import { Step } from "../../components/step/step";
 import { useTECDSA } from "./use_tecdsa";
 
-export const Workflow: React.FC = () => {
+export const Workflow: FC = () => {
   const {
     handleClickKeygen,
     handleClickTriples,
diff --git a/embed/oko_attached/oko_attached.env.example b/embed/oko_attached/oko_attached.env.example
index ed4b9fc1a..ef524b885 100644
--- a/embed/oko_attached/oko_attached.env.example
+++ b/embed/oko_attached/oko_attached.env.example
@@ -7,3 +7,4 @@ VITE_TX_INTERPRETER_API_ENDPOINT=https://tx-interpreter.keplr.app
 VITE_AMPLITUDE_API_KEY=
 VITE_IPFS_GATEWAY_URL=
 VITE_TELEGRAM_BOT_NAME=telegram_bot_name
+VITE_PUBLIC_S3_BUCKET_URL=https://oko-wallet.s3.ap-northeast-2.amazonaws.com
diff --git a/embed/oko_attached/src/components/avatar/avatar.tsx b/embed/oko_attached/src/components/avatar/avatar.tsx
index 311dac125..9a1a86289 100644
--- a/embed/oko_attached/src/components/avatar/avatar.tsx
+++ b/embed/oko_attached/src/components/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, type FC } from "react";
 
 import styles from "./avatar.module.scss";
 import { AvatarInitial } from "./avatar_initial";
@@ -57,7 +57,7 @@ function getBorderRadius(variant: AvatarProps["variant"]) {
   }
 }
 
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar: FC<AvatarProps> = ({
   src,
   fallback,
   alt,
diff --git a/embed/oko_attached/src/components/avatar/avatar_initial.tsx b/embed/oko_attached/src/components/avatar/avatar_initial.tsx
index b1d820731..d7d92d12f 100644
--- a/embed/oko_attached/src/components/avatar/avatar_initial.tsx
+++ b/embed/oko_attached/src/components/avatar/avatar_initial.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import {
   Typography,
   type BaseTypographyProps,
@@ -15,7 +15,7 @@ export interface AvatarInitialProps {
   visible?: boolean;
 }
 
-export const AvatarInitial: React.FC<AvatarInitialProps> = ({
+export const AvatarInitial: FC<AvatarInitialProps> = ({
   initial,
   sizePx,
   textSize,
diff --git a/embed/oko_attached/src/components/collapsible/collapsible.tsx b/embed/oko_attached/src/components/collapsible/collapsible.tsx
index 18ad1a4b1..8ca25f765 100644
--- a/embed/oko_attached/src/components/collapsible/collapsible.tsx
+++ b/embed/oko_attached/src/components/collapsible/collapsible.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { ChevronDownIcon } from "@oko-wallet/oko-common-ui/icons/chevron_down";
 import cn from "classnames";
@@ -12,7 +12,7 @@ export interface CollapsibleProps {
   className?: string;
 }
 
-export const Collapsible: React.FC<CollapsibleProps> = ({
+export const Collapsible: FC<CollapsibleProps> = ({
   title,
   children,
   defaultExpanded = false,
diff --git a/embed/oko_attached/src/components/discord_callback/discord_callback.tsx b/embed/oko_attached/src/components/discord_callback/discord_callback.tsx
index d73a407f0..2982f57ab 100644
--- a/embed/oko_attached/src/components/discord_callback/discord_callback.tsx
+++ b/embed/oko_attached/src/components/discord_callback/discord_callback.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { type FC } from "react";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -12,7 +12,7 @@ import styles from "@oko-wallet-attached/components/google_callback/google_callb
 import { useDiscordCallback } from "@oko-wallet-attached/components/discord_callback/use_callback";
 import { useSetThemeInCallback } from "@oko-wallet-attached/hooks/theme";
 
-export const DiscordCallback: React.FC = () => {
+export const DiscordCallback: FC = () => {
   const theme = useSetThemeInCallback("discord");
 
   const { error } = useDiscordCallback();
@@ -43,7 +43,7 @@ export const DiscordCallback: React.FC = () => {
   );
 };
 
-const ErrorMessage: React.FC<{ error: string }> = ({ error }) => {
+const ErrorMessage: FC<{ error: string }> = ({ error }) => {
   const errorCode = error || "unknown_error";
   const isParamsNotSufficient = errorCode === "params_not_sufficient";
   const errorMessage = isParamsNotSufficient
diff --git a/embed/oko_attached/src/components/email/email_login_popup.tsx b/embed/oko_attached/src/components/email/email_login_popup.tsx
index 252339bc2..dbccfb3af 100644
--- a/embed/oko_attached/src/components/email/email_login_popup.tsx
+++ b/embed/oko_attached/src/components/email/email_login_popup.tsx
@@ -120,7 +120,7 @@ export const EmailLoginPopup: FC<EmailLoginPopupProps> = ({
                     <OtpInput
                       length={6}
                       value={otpDigits}
-                      onChange={(digits) => {
+                      onChange={(digits: string[]) => {
                         resetError();
                         setOtpDigits(digits);
                       }}
diff --git a/embed/oko_attached/src/components/email_callback/email_callback.tsx b/embed/oko_attached/src/components/email_callback/email_callback.tsx
index 669107da6..4f14b32cb 100644
--- a/embed/oko_attached/src/components/email_callback/email_callback.tsx
+++ b/embed/oko_attached/src/components/email_callback/email_callback.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { type FC } from "react";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -12,7 +12,7 @@ import styles from "@oko-wallet-attached/components/google_callback/google_callb
 import { useEmailCallback } from "@oko-wallet-attached/components/email_callback/use_callback";
 import { useSetThemeInCallback } from "@oko-wallet-attached/hooks/theme";
 
-export const EmailCallback: React.FC = () => {
+export const EmailCallback: FC = () => {
   const theme = useSetThemeInCallback("auth0");
   const { error } = useEmailCallback();
 
@@ -26,7 +26,7 @@ export const EmailCallback: React.FC = () => {
   );
 };
 
-const SuccessMessage: React.FC = () => {
+const SuccessMessage: FC = () => {
   return (
     <>
       <LoadingIcon
@@ -47,7 +47,7 @@ const SuccessMessage: React.FC = () => {
   );
 };
 
-const ErrorMessage: React.FC<{ error: string }> = ({ error }) => {
+const ErrorMessage: FC<{ error: string }> = ({ error }) => {
   const errorCode = error || "unknown_error";
   const isParamsNotSufficient = errorCode === "params_not_sufficient";
   const errorMessage = isParamsNotSufficient
diff --git a/embed/oko_attached/src/components/google_callback/google_callback.tsx b/embed/oko_attached/src/components/google_callback/google_callback.tsx
index 6bd2f5e42..23cd641af 100644
--- a/embed/oko_attached/src/components/google_callback/google_callback.tsx
+++ b/embed/oko_attached/src/components/google_callback/google_callback.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { type FC } from "react";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -12,7 +12,7 @@ import styles from "./google_callback.module.scss";
 import { useGoogleCallback } from "@oko-wallet-attached/components/google_callback/use_callback";
 import { useSetThemeInCallback } from "@oko-wallet-attached/hooks/theme";
 
-export const GoogleCallback: React.FC = () => {
+export const GoogleCallback: FC = () => {
   const theme = useSetThemeInCallback("google");
   const { error } = useGoogleCallback();
 
@@ -42,7 +42,7 @@ export const GoogleCallback: React.FC = () => {
   );
 };
 
-const ErrorMessage: React.FC<{ error: string }> = ({ error }) => {
+const ErrorMessage: FC<{ error: string }> = ({ error }) => {
   const errorCode = error || "unknown_error";
   const isParamsNotSufficient = errorCode === "params_not_sufficient";
   const errorMessage = isParamsNotSufficient
diff --git a/embed/oko_attached/src/components/modal_variants/common/common_modal.tsx b/embed/oko_attached/src/components/modal_variants/common/common_modal.tsx
index c63866014..7b715bf69 100644
--- a/embed/oko_attached/src/components/modal_variants/common/common_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/common_modal.tsx
@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import cn from "classnames";
 
 import styles from "./common_modal.module.scss";
@@ -8,7 +8,7 @@ export interface CommonModalProps {
   className?: string;
 }
 
-export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
+export const CommonModal: FC<PropsWithChildren<CommonModalProps>> = ({
   children,
   padding,
   className,
diff --git a/embed/oko_attached/src/components/modal_variants/common/make_signature/demo_view.tsx b/embed/oko_attached/src/components/modal_variants/common/make_signature/demo_view.tsx
index 779412d42..d306858e8 100644
--- a/embed/oko_attached/src/components/modal_variants/common/make_signature/demo_view.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/make_signature/demo_view.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_signature_modal.module.scss";
 import { CommonModal } from "@oko-wallet-attached/components/modal_variants/common/common_modal";
 
-export const DemoView: React.FC = () => {
+export const DemoView: FC = () => {
   return (
     <CommonModal padding="12px">
       <Typography
diff --git a/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx b/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
index 9c752676f..72f14ef53 100644
--- a/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/make_signature/make_sig_modal_code_block_container.tsx
@@ -1,13 +1,17 @@
 import type { FC, ReactNode } from "react";
+import cn from "classnames";
 
 import styles from "./make_sig_modal_code_block_container.module.scss";
 
 export interface MakeSignatureRawCodeBlockContainerProps {
   children: ReactNode;
+  className?: string;
 }
 
 export const MakeSignatureRawCodeBlockContainer: FC<
   MakeSignatureRawCodeBlockContainerProps
-> = ({ children }) => {
-  return <div className={styles.codeBlockContainer}>{children}</div>;
+> = ({ children, className }) => {
+  return (
+    <div className={cn(styles.codeBlockContainer, className)}>{children}</div>
+  );
 };
diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx b/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
index 78807c69a..346a2979c 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/metadata_content.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import type { ChainInfoForAttachedModal } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -6,19 +6,7 @@ import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import styles from "./metadata_content.module.scss";
 import { SignerAddressOrEmail } from "./signer_address_or_email/signer_address_or_email";
 import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
-
-function getFaviconUrl(origin: string): string {
-  if (!origin) return "";
-
-  try {
-    const parsed = new URL(origin);
-    return `https://www.google.com/s2/favicons?domain_url=${encodeURIComponent(
-      parsed.origin,
-    )}`;
-  } catch (error) {
-    return "";
-  }
-}
+import { getFaviconUrl } from "@oko-wallet-attached/utils/favicon";
 
 interface MakeSignatureModalMetadataContentProps {
   origin: string;
@@ -26,9 +14,11 @@ interface MakeSignatureModalMetadataContentProps {
   signer: string;
 }
 
-export const MetadataContent: React.FC<
-  MakeSignatureModalMetadataContentProps
-> = ({ origin, chainInfo, signer }) => {
+export const MetadataContent: FC<MakeSignatureModalMetadataContentProps> = ({
+  origin,
+  chainInfo,
+  signer,
+}) => {
   const faviconUrl = getFaviconUrl(origin);
 
   return (
@@ -66,7 +56,11 @@ export const MetadataContent: React.FC<
           </div>
         </div>
 
-        <SignerAddressOrEmail signer={signer} origin={origin} />
+        <SignerAddressOrEmail
+          signer={signer}
+          origin={origin}
+          initialViewType={null}
+        />
       </div>
     </div>
   );
diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
index dead07476..0541e90ea 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.module.scss
@@ -17,6 +17,12 @@
 
   cursor: pointer;
   border-radius: 12px;
-  background: var(--bg-secondary);
+  background-color: var(--bg-secondary);
   width: fit-content;
+
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: var(--bg-secondary-hover);
+  }
 }
diff --git a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
index 8752ac10e..09bd28fff 100644
--- a/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email.tsx
@@ -8,25 +8,72 @@ import styles from "./signer_address_or_email.module.scss";
 interface SignerAddressOrEmailProps {
   signer: string;
   origin: string;
+  initialViewType: "View Address" | "Login Info" | null;
 }
 
+interface ViewProps {
+  value: string;
+  origin: string;
+  type: "address" | "email";
+  prefix?: string;
+}
+
+export const SignerAddressOrEmailView: FC<ViewProps> = ({
+  value,
+  type,
+  origin,
+  prefix,
+}) => {
+  const email = useAppState((state) => state.getWallet(origin)?.email);
+  const displayValue =
+    type === "address" ? `${value.slice(0, 9)}...${value.slice(-9)}` : email;
+
+  return (
+    <Typography size="sm" color="brand-tertiary" weight="medium">
+      {prefix && `${prefix} `}
+      {displayValue}
+    </Typography>
+  );
+};
+
+interface SignerAddressOrEmailChangeViewTypeButtonProps {
+  viewType: "View Address" | "Login Info";
+  onClick: () => void;
+}
+
+export const SignerAddressOrEmailChangeViewTypeButton: FC<
+  SignerAddressOrEmailChangeViewTypeButtonProps
+> = ({ viewType, onClick }) => {
+  return (
+    <div onClick={onClick} className={styles.changeViewTypeButton}>
+      <EyeIcon size={12} color="var(--fg-quaternary)" />
+      <Typography size="xs" color="quaternary" weight="semibold">
+        {viewType}
+      </Typography>
+    </div>
+  );
+};
+
 export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
   signer,
   origin,
+  initialViewType,
 }) => {
-  const [viewType, setViewType] = useState<"View Address" | "Login Info">(
-    "View Address",
-  );
-  const email = useAppState((state) => state.getWallet(origin)?.email);
+  const [viewType, setViewType] = useState<
+    "View Address" | "Login Info" | null
+  >(initialViewType);
 
   switch (viewType) {
+    case null:
     case "View Address":
       return (
         <div className={styles.wrapper}>
-          <Typography size="sm" color="brand-tertiary" weight="medium">
-            {signer.slice(0, 9)}...{signer.slice(-9)}
-          </Typography>
-          <ChangeViewTypeButton
+          <SignerAddressOrEmailView
+            value={signer}
+            type="address"
+            origin={origin}
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
             viewType="Login Info"
             onClick={() => setViewType("Login Info")}
           />
@@ -35,10 +82,12 @@ export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
     case "Login Info":
       return (
         <div className={styles.wrapper}>
-          <Typography size="sm" color="brand-tertiary" weight="medium">
-            {email}
-          </Typography>
-          <ChangeViewTypeButton
+          <SignerAddressOrEmailView
+            value={signer}
+            type="email"
+            origin={origin}
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
             viewType="View Address"
             onClick={() => setViewType("View Address")}
           />
@@ -46,17 +95,3 @@ export const SignerAddressOrEmail: FC<SignerAddressOrEmailProps> = ({
       );
   }
 };
-
-const ChangeViewTypeButton: FC<{
-  viewType: "View Address" | "Login Info";
-  onClick: () => void;
-}> = ({ viewType, onClick }) => {
-  return (
-    <div onClick={onClick} className={styles.changeViewTypeButton}>
-      <EyeIcon size={12} color="var(--fg-quaternary)" />
-      <Typography size="xs" color="quaternary" weight="semibold">
-        {viewType}
-      </Typography>
-    </div>
-  );
-};
diff --git a/embed/oko_attached/src/components/modal_variants/common/tx_row.tsx b/embed/oko_attached/src/components/modal_variants/common/tx_row.tsx
index e222b63a4..81d956702 100644
--- a/embed/oko_attached/src/components/modal_variants/common/tx_row.tsx
+++ b/embed/oko_attached/src/components/modal_variants/common/tx_row.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./tx_row.module.scss";
@@ -8,7 +8,7 @@ export interface TxRowProps {
   children: React.ReactNode;
 }
 
-export const TxRow: React.FC<TxRowProps> = ({ label, children }) => {
+export const TxRow: FC<TxRowProps> = ({ label, children }) => {
   return (
     <div className={styles.txRow}>
       {label ? (
diff --git a/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/cosmos_arbitrary_signature_content.tsx b/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/cosmos_arbitrary_signature_content.tsx
index 3bbfd24f6..1dd787b9c 100644
--- a/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/cosmos_arbitrary_signature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/cosmos_arbitrary_signature_content.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import type { CosmosArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -12,7 +12,7 @@ interface CosmosArbitrarySignatureContentProps {
   payload: CosmosArbitrarySignPayload;
 }
 
-export const CosmosArbitrarySignatureContent: React.FC<
+export const CosmosArbitrarySignatureContent: FC<
   CosmosArbitrarySignatureContentProps
 > = ({ payload }) => {
   const [isViewRawData, setIsViewRawData] = useState(false);
diff --git a/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/make_arbitrary_sig_modal.tsx
index b900b5199..2d558dbbb 100644
--- a/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/cosmos/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import type { CosmosArbitrarySigData } from "@oko-wallet/oko-sdk-core";
+import type { FC } from "react";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Button } from "@oko-wallet/oko-common-ui/button";
@@ -12,7 +12,7 @@ import { ArbitrarySignatureDesc } from "@oko-wallet-attached/components/modal_va
 import { CosmosArbitrarySignatureContent } from "./cosmos_arbitrary_signature_content";
 import { SignWithOkoBox } from "@oko-wallet-attached/components/sign_with_oko_box/sign_with_oko_box";
 
-export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
+export const MakeArbitrarySigModal: FC<MakeArbitrarySigModalProps> = ({
   getIsAborted,
   data,
   modalId,
diff --git a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/messages.tsx b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/messages.tsx
index dbc226683..1c443b098 100644
--- a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/messages.tsx
+++ b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/messages.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import type { Msg } from "@keplr-wallet/types";
 import { Bech32Address } from "@keplr-wallet/cosmos";
 import { MsgSend as ThorMsgSend } from "@keplr-wallet/proto-types/thorchain/v1/types/msg_send";
@@ -77,7 +77,7 @@ function renderMessage(
   }
 }
 
-export const Messages: React.FC<MessagesProps> = ({
+export const Messages: FC<MessagesProps> = ({
   chainId,
   messages,
   isLoading,
diff --git a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/send/send.tsx b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/send/send.tsx
index 90bb8547a..0c369db70 100644
--- a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/send/send.tsx
+++ b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/send/send.tsx
@@ -10,7 +10,7 @@ import styles from "../messages.module.scss";
 import { TxRow } from "@oko-wallet-attached/components/modal_variants/common/tx_row";
 import { useGetMultipleAssetMeta } from "@oko-wallet-attached/web3/cosmos/use_get_asset_meta";
 
-const TokenInfo: React.FC<{
+const TokenInfo: FC<{
   chainId: string;
   amount: Coin[];
 }> = ({ chainId, amount }) => {
diff --git a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/unknown/unknown.tsx b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/unknown/unknown.tsx
index e20d5b3d1..5ce099ce6 100644
--- a/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/unknown/unknown.tsx
+++ b/embed/oko_attached/src/components/modal_variants/cosmos/tx_sig/msg/unknown/unknown.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type FC } from "react";
 import type { Msg } from "@keplr-wallet/types";
 import { Typography } from "@oko-wallet-common-ui/typography/typography";
 import { ChevronDownIcon } from "@oko-wallet-common-ui/icons/chevron_down";
@@ -8,7 +8,7 @@ import cn from "classnames";
 import type { UnpackedMsgForView } from "@oko-wallet-attached/types/cosmos_msg";
 import styles from "./unknown.module.scss";
 
-export const UnknownMessage: React.FC<UnknownMessageProps> = ({ msg }) => {
+export const UnknownMessage: FC<UnknownMessageProps> = ({ msg }) => {
   const [isCollapse, setIsCollapse] = useState(true);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/ethereum_arbitrary_signature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/ethereum_arbitrary_signature_content.tsx
index 1391e0c6e..7c8a8cd00 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/ethereum_arbitrary_signature_content.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/ethereum_arbitrary_signature_content.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -13,7 +13,7 @@ interface EthereumArbitrarySignatureContentProps {
   payload: EthereumArbitrarySignPayload;
 }
 
-export const EthereumArbitrarySignatureContent: React.FC<
+export const EthereumArbitrarySignatureContent: FC<
   EthereumArbitrarySignatureContentProps
 > = ({ payload }) => {
   const message = (() => {
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
index 2973a1de1..b830071a1 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useMemo, useState, type FC } from "react";
 import type { MakeArbitrarySigData } from "@oko-wallet/oko-sdk-core";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -11,16 +11,29 @@ import { useArbitrarySigModal } from "./hooks/use_arbitrary_sig_modal";
 import { ArbitrarySignatureDesc } from "@oko-wallet-attached/components/modal_variants/common/arbitrary_sig_desc/arbitrary_signature_desc";
 import { EthereumArbitrarySignatureContent } from "./ethereum_arbitrary_signature_content";
 import { SignWithOkoBox } from "@oko-wallet-attached/components/sign_with_oko_box/sign_with_oko_box";
+import {
+  getSiweMessage,
+  verifySiweMessage,
+} from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
+import { EthereumSiweSignatureContent } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content";
+import { SiweRiskWarningCheckBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box";
 
-export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
+export const MakeArbitrarySigModal: FC<MakeArbitrarySigModalProps> = ({
   getIsAborted,
   data,
   modalId,
 }) => {
+  const siweMessage = getSiweMessage(data.payload.data.message);
+  const isValidSiweMessage = siweMessage
+    ? verifySiweMessage(siweMessage, data.payload.origin)
+    : false;
+  const [isSiweRiskWarningChecked, setIsSiweRiskWarningChecked] =
+    useState(false);
+
   const {
     onReject,
     onApprove,
-    isApproveEnabled,
+    isApproveEnabled: isApproveEnabledOriginal,
     isLoading,
     isDemo,
     theme,
@@ -30,6 +43,18 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
     data,
     modalId,
   });
+  const isApproveEnabled = useMemo(() => {
+    if (siweMessage && !isValidSiweMessage) {
+      return isApproveEnabledOriginal && isSiweRiskWarningChecked;
+    }
+
+    return isApproveEnabledOriginal;
+  }, [
+    isApproveEnabledOriginal,
+    isSiweRiskWarningChecked,
+    siweMessage,
+    isValidSiweMessage,
+  ]);
 
   return (
     <div className={styles.container}>
@@ -39,13 +64,30 @@ export const MakeArbitrarySigModal: React.FC<MakeArbitrarySigModalProps> = ({
         </div>
 
         <div className={styles.modalInnerContentContainer}>
-          <EthereumArbitrarySignatureContent payload={data.payload} />
+          {!!siweMessage ? (
+            <EthereumSiweSignatureContent
+              payload={data.payload}
+              theme={theme}
+            />
+          ) : (
+            <EthereumArbitrarySignatureContent payload={data.payload} />
+          )}
         </div>
 
-        <Spacing height={20} />
+        <Spacing height={!!siweMessage ? 12 : 20} />
         {!hasOnChainSchema && <ArbitrarySignatureDesc />}
 
-        <Spacing height={20} />
+        <Spacing height={8} />
+
+        {siweMessage && !isValidSiweMessage && (
+          <>
+            <SiweRiskWarningCheckBox
+              checked={isSiweRiskWarningChecked}
+              onChange={setIsSiweRiskWarningChecked}
+            />
+            <Spacing height={12} />
+          </>
+        )}
 
         <div className={styles.buttonContainer}>
           <Button
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
new file mode 100644
index 000000000..d101672ee
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/ethereum_siwe_signature_content.module.scss
@@ -0,0 +1,49 @@
+.messageContainer {
+  padding: 0.75rem 1rem;
+
+  .messageContent {
+    padding: 0;
+    min-height: 0;
+  }
+}
+
+.metadataContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.chainInfoContainer {
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  background-color: var(--bg-secondary);
+
+  .chainInfoRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .chainInfoRowContent {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+}
+
+.originRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  padding: 0px 20px;
+
+  word-break: break-all;
+  text-align: center;
+
+  .originFavicon {
+    width: 20px;
+    height: 20px;
+  }
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx
new file mode 100644
index 000000000..a76a4f1c0
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/make_siwe_signature_content.tsx
@@ -0,0 +1,114 @@
+import type { EthereumArbitrarySignPayload } from "@oko-wallet/oko-sdk-core";
+import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+import type { Theme } from "@oko-wallet/oko-common-ui/theme";
+import type { FC } from "react";
+
+import styles from "./ethereum_siwe_signature_content.module.scss";
+import {
+  getSiweMessage,
+  verifySiweMessage,
+} from "@oko-wallet-attached/components/modal_variants/eth/siwe_message";
+import { SiweSigTitleBadge } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge";
+import { SignerAddressOrEmailForSiwe } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe";
+import { MakeSignatureRawCodeBlockContainer } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block_container";
+import { MakeSignatureRawCodeBlock } from "@oko-wallet-attached/components/modal_variants/common/make_signature/make_sig_modal_code_block";
+import { SiweRiskWarningBox } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box";
+import { Avatar } from "@oko-wallet-attached/components/avatar/avatar";
+
+interface EthereumSiweSignatureContentProps {
+  payload: EthereumArbitrarySignPayload;
+  theme: Theme | null;
+}
+
+export const EthereumSiweSignatureContent: FC<
+  EthereumSiweSignatureContentProps
+> = ({ payload, theme }) => {
+  const message = getSiweMessage(payload.data.message);
+  if (!message) {
+    // @unreachable
+    throw new Error("unreachable");
+  }
+
+  const isValidSiweMessage = verifySiweMessage(message, payload.origin);
+
+  return (
+    <div>
+      {isValidSiweMessage ? (
+        <SiweSigTitleBadge theme={theme} />
+      ) : (
+        <SiweRiskWarningBox />
+      )}
+
+      <div className={styles.metadataContainer}>
+        <Spacing height={isValidSiweMessage ? 8 : 12} />
+        <Typography size="lg" color="primary" weight="semibold">
+          Sign in to
+        </Typography>
+
+        <Spacing height={4} />
+        <div className={styles.originRow}>
+          <Typography
+            size="lg"
+            color={isValidSiweMessage ? "primary" : "warning-primary"}
+            weight="semibold"
+          >
+            {payload.origin.replace(/^https?:\/\//, "")}
+          </Typography>
+        </div>
+
+        <Spacing height={8} />
+        <SignerAddressOrEmailForSiwe
+          origin={payload.origin}
+          signer={payload.signer}
+          initialViewType="Login Info"
+        />
+      </div>
+
+      <Spacing height={20} />
+
+      <div className={styles.chainInfoContainer}>
+        <div className={styles.chainInfoRow}>
+          <Typography size="xs" color="secondary" weight="semibold">
+            Impact on balance
+          </Typography>
+          <Typography size="sm" color="secondary" weight="medium">
+            None
+          </Typography>
+        </div>
+
+        <Spacing height={8} />
+        <div className={styles.chainInfoRow}>
+          <Typography size="xs" color="secondary" weight="semibold">
+            Network
+          </Typography>
+
+          <div className={styles.chainInfoRowContent}>
+            <Avatar
+              src={payload.chain_info.chain_symbol_image_url}
+              alt="chain icon"
+              size="sm"
+              variant="rounded"
+            />
+            <Typography size="sm" color="secondary" weight="medium">
+              {payload.chain_info.chain_name}
+            </Typography>
+          </div>
+        </div>
+      </div>
+
+      <Spacing height={16} />
+      <MakeSignatureRawCodeBlockContainer className={styles.messageContainer}>
+        <Typography color="tertiary" size="xs" weight="semibold">
+          Message
+        </Typography>
+
+        <Spacing height={16} />
+        <MakeSignatureRawCodeBlock
+          code={message.statement ?? ""}
+          className={styles.messageContent}
+        />
+      </MakeSignatureRawCodeBlockContainer>
+    </div>
+  );
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx
new file mode 100644
index 000000000..263b2cd6f
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/index.tsx
@@ -0,0 +1,56 @@
+import { useState, type FC } from "react";
+
+import styles from "./styles.module.scss";
+import {
+  SignerAddressOrEmailChangeViewTypeButton,
+  SignerAddressOrEmailView,
+} from "@oko-wallet-attached/components/modal_variants/common/metadata_content/signer_address_or_email/signer_address_or_email";
+
+interface SignerAddressOrEmailProps {
+  signer: string;
+  origin: string;
+  initialViewType?: "View Address" | "Login Info";
+}
+
+export const SignerAddressOrEmailForSiwe: FC<SignerAddressOrEmailProps> = ({
+  signer,
+  origin,
+  initialViewType = "View Address",
+}) => {
+  const [viewType, setViewType] = useState<"View Address" | "Login Info">(
+    initialViewType,
+  );
+
+  switch (viewType) {
+    case "View Address":
+      return (
+        <div className={styles.wrapper}>
+          <SignerAddressOrEmailView
+            value={signer}
+            type="address"
+            origin={origin}
+            prefix="with "
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
+            viewType="Login Info"
+            onClick={() => setViewType("Login Info")}
+          />
+        </div>
+      );
+    case "Login Info":
+      return (
+        <div className={styles.wrapper}>
+          <SignerAddressOrEmailView
+            value={signer}
+            type="email"
+            origin={origin}
+            prefix="with "
+          />
+          <SignerAddressOrEmailChangeViewTypeButton
+            viewType="View Address"
+            onClick={() => setViewType("View Address")}
+          />
+        </div>
+      );
+  }
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss
new file mode 100644
index 000000000..3c83eb1f3
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/signer_address_or_email_for_siwe/styles.module.scss
@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.changeViewTypeButton {
+  display: flex;
+  padding: 4px 8px;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+
+  cursor: pointer;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  width: fit-content;
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.module.scss
new file mode 100644
index 000000000..410605751
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.module.scss
@@ -0,0 +1,28 @@
+.siweRiskWarningContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.siweRiskWarningBox {
+  display: flex;
+  padding: 6px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex: 1 0 0;
+
+  border-radius: 12px;
+
+  text-align: center;
+
+  background-color: var(--bg-warning-primary);
+}
+
+.siweRiskWarningCheckBoxContainer {
+  gap: 6px;
+}
+
+.siweRiskWarningCheckBoxInputContainerClassName {
+  padding-top: 0px;
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx
new file mode 100644
index 000000000..4180841a0
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_risk_warning_box.tsx
@@ -0,0 +1,45 @@
+import type { FC } from "react";
+import { Checkbox } from "@oko-wallet/oko-common-ui/checkbox";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+
+import styles from "./siwe_risk_warning_box.module.scss";
+
+interface SiweRiskWarningCheckBoxProps {
+  checked: boolean;
+  onChange: (isValidSiweMessage: boolean) => void;
+}
+export const SiweRiskWarningCheckBox: FC<SiweRiskWarningCheckBoxProps> = ({
+  checked,
+  onChange,
+}) => {
+  return (
+    <div className={styles.siweRiskWarningContainer}>
+      <Checkbox
+        id="siwe-message-checkbox"
+        checked={checked}
+        onChange={onChange}
+        label="I understand the risk and would like to proceed."
+        labelStyle={{
+          color: "secondary",
+          size: "xs",
+          weight: "medium",
+        }}
+        checkboxContainerClassName={styles.siweRiskWarningCheckBoxContainer}
+        checkBoxInputContainerClassName={
+          styles.siweRiskWarningCheckBoxInputContainerClassName
+        }
+      />
+    </div>
+  );
+};
+
+export const SiweRiskWarningBox = () => {
+  return (
+    <div className={styles.siweRiskWarningBox}>
+      <Typography size="xs" color="warning-primary" weight="medium">
+        The URL requesting your signature differs from the current website. This
+        may indicate a potential security risk.
+      </Typography>
+    </div>
+  );
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
new file mode 100644
index 000000000..e4f78fc28
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/index.tsx
@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import type { Theme } from "@oko-wallet/oko-common-ui/theme";
+import { ImageWithAlt } from "@oko-wallet/oko-common-ui/image_with_alt";
+
+import { OKO_PUBLIC_S3_BUCKET_URL } from "@oko-wallet-attached/requests/endpoints";
+import styles from "./styles.module.scss";
+
+interface SiweSigTitleBadgeProps {
+  theme: Theme | null;
+}
+export const SiweSigTitleBadge: FC<SiweSigTitleBadgeProps> = ({ theme }) => {
+  const imageUrl = {
+    png:
+      theme === "dark"
+        ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.png`
+        : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.png`,
+    webp:
+      theme === "dark"
+        ? `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_dark.webp`
+        : `${OKO_PUBLIC_S3_BUCKET_URL}/assets/oko_siwe_sign_badge_light.webp`,
+  };
+
+  return (
+    <div className={styles.imageContainer}>
+      <ImageWithAlt
+        srcSet={imageUrl.webp}
+        srcAlt={imageUrl.png}
+        alt="sign siwe title image"
+        className={styles.image}
+      />
+    </div>
+  );
+};
diff --git a/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss
new file mode 100644
index 000000000..3ce9dd31e
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/arbitrary_sig/siwe_sig/siwe_sig_title_badge/styles.module.scss
@@ -0,0 +1,17 @@
+picture {
+  margin: 0;
+  padding: 0;
+  width: 8.1875rem;
+  height: 3.75rem;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image {
+    width: 8.1875rem;
+    height: 3.75rem;
+  }
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
index 24d99c541..f0d78447c 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/make_sig_eth_modal.tsx
@@ -1,9 +1,9 @@
 import { type FC } from "react";
 import type { MakeEthereumSigData } from "@oko-wallet/oko-sdk-core";
 
-import { MakeArbitrarySigModal } from "./arbitrary_sig/make_arbitrary_sig_modal";
-import { MakeTxSigModal } from "./tx_sig/make_tx_sig_modal";
-import { MakeEIP712SigModal } from "./eip712_sig/make_eip712_sig_modal";
+import { MakeArbitrarySigModal } from "@oko-wallet-attached/components/modal_variants/eth/arbitrary_sig/make_arbitrary_sig_modal";
+import { MakeTxSigModal } from "@oko-wallet-attached/components/modal_variants/eth/tx_sig/make_tx_sig_modal";
+import { MakeEIP712SigModal } from "@oko-wallet-attached/components/modal_variants/eth/eip712_sig/make_eip712_sig_modal";
 
 export const MakeSignatureEthModal: FC<MakeSignatureEthModalProps> = ({
   getIsAborted,
diff --git a/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
new file mode 100644
index 000000000..082e81146
--- /dev/null
+++ b/embed/oko_attached/src/components/modal_variants/eth/siwe_message.ts
@@ -0,0 +1,64 @@
+import type { SignableMessage } from "viem";
+import { parseSiweMessage, type SiweMessage } from "viem/siwe";
+
+const ALLOW_PROTOCOLS = ["https:"];
+const BYPASS_HOSTS = ["localhost"];
+
+export function getSiweMessage(
+  message: SignableMessage,
+): SiweMessage | undefined {
+  if (typeof message !== "string") {
+    return undefined;
+  }
+  const siweMsg = parseSiweMessage(message);
+
+  //NOTE - If any required field in SiweMessage is empty,
+  //  it is determined not to be Siwe.
+  if (
+    siweMsg.address &&
+    siweMsg.chainId &&
+    siweMsg.domain &&
+    siweMsg.version &&
+    siweMsg.nonce &&
+    siweMsg.uri &&
+    siweMsg.address.startsWith("0x")
+  ) {
+    return siweMsg as SiweMessage;
+  }
+
+  return undefined;
+}
+
+export function verifySiweMessage(
+  message: SiweMessage,
+  origin: string,
+): boolean {
+  try {
+    const {
+      origin: originByPayload,
+      protocol: protocolByPayload,
+      host: hostByPayload,
+    } = new URL(origin);
+    const { origin: originByTxUri, protocol: protocolByTxUri } = new URL(
+      message.uri,
+    );
+
+    if (originByPayload !== originByTxUri || hostByPayload !== message.domain) {
+      return false;
+    }
+
+    // If scheme is not HTTPS, return false (when hostname is not localhost)
+    if (
+      !BYPASS_HOSTS.includes(hostByPayload.split(":")[0]) &&
+      (!ALLOW_PROTOCOLS.includes(protocolByPayload) ||
+        !ALLOW_PROTOCOLS.includes(protocolByTxUri))
+    ) {
+      return false;
+    }
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+
+  return true;
+}
diff --git a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/address_info.tsx b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/address_info.tsx
index 47a3a4604..b7c1beb3b 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/address_info.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/address_info.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Skeleton } from "@oko-wallet/oko-common-ui/skeleton";
 import { type Address } from "viem";
@@ -15,7 +15,7 @@ export interface AddressInfoProps {
   address: Address;
 }
 
-export const AddressInfo: React.FC<AddressInfoProps> = ({ address }) => {
+export const AddressInfo: FC<AddressInfoProps> = ({ address }) => {
   const { data: ensName, isLoading: ensNameIsLoading } = useGetENSName({
     address,
   });
diff --git a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/token_info.tsx b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/token_info.tsx
index 10d40bca0..2795eac21 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/token_info.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/token_info.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Tooltip } from "@oko-wallet/oko-common-ui/tooltip";
 import { Skeleton } from "@oko-wallet/oko-common-ui/skeleton";
@@ -17,7 +17,7 @@ export interface TokenInfoProps {
   currency?: AppCurrency;
 }
 
-export const TokenInfo: React.FC<TokenInfoProps> = ({
+export const TokenInfo: FC<TokenInfoProps> = ({
   tokenAddress,
   amount,
   chain,
diff --git a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/tx_container.tsx b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/tx_container.tsx
index ddfbf2258..765550cfe 100644
--- a/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/tx_container.tsx
+++ b/embed/oko_attached/src/components/modal_variants/eth/tx_sig/actions/common/tx_container.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import { type FC, type ReactNode } from "react";
 
 import styles from "./tx_container.module.scss";
 
 export interface TxContainerProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const TxContainer: React.FC<TxContainerProps> = ({ children }) => {
+export const TxContainer: FC<TxContainerProps> = ({ children }) => {
   return <div className={styles.txContainer}>{children}</div>;
 };
diff --git a/embed/oko_attached/src/components/query_provider/query_provider.tsx b/embed/oko_attached/src/components/query_provider/query_provider.tsx
index 6b7b3d895..436425c42 100644
--- a/embed/oko_attached/src/components/query_provider/query_provider.tsx
+++ b/embed/oko_attached/src/components/query_provider/query_provider.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 
 import { queryClient } from "@oko-wallet-attached/config/react_query";
 
-export const QueryProvider: React.FC<PropsWithChildren> = ({ children }) => {
+export const QueryProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
diff --git a/embed/oko_attached/src/components/sign_with_oko_box/sign_with_oko_box.tsx b/embed/oko_attached/src/components/sign_with_oko_box/sign_with_oko_box.tsx
index df14e6182..5afa2ba92 100644
--- a/embed/oko_attached/src/components/sign_with_oko_box/sign_with_oko_box.tsx
+++ b/embed/oko_attached/src/components/sign_with_oko_box/sign_with_oko_box.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { OkoLogoWithNameIcon } from "@oko-wallet-common-ui/icons/oko_logo_with_name_icon";
 import type { Theme } from "@oko-wallet/oko-common-ui/theme";
 
 import styles from "./sign_with_oko_box.module.scss";
 
-export const SignWithOkoBox: React.FC<SignWithOkoBoxProps> = ({
+export const SignWithOkoBox: FC<SignWithOkoBoxProps> = ({
   theme,
   hideText,
 }) => {
diff --git a/embed/oko_attached/src/components/telegram/telegram_login_popup.tsx b/embed/oko_attached/src/components/telegram/telegram_login_popup.tsx
index ac8ac3592..3f6fa9399 100644
--- a/embed/oko_attached/src/components/telegram/telegram_login_popup.tsx
+++ b/embed/oko_attached/src/components/telegram/telegram_login_popup.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useContext, useEffect } from "react";
+import { useContext, useEffect, type FC } from "react";
 import { RedirectUriSearchParamsKey } from "@oko-wallet/oko-sdk-core";
 import { Logo } from "@oko-wallet/oko-common-ui/logo";
 import { ThemeContext } from "@oko-wallet/oko-common-ui/theme";
@@ -8,7 +8,7 @@ import { ThemeContext } from "@oko-wallet/oko-common-ui/theme";
 import { TELEGRAM_BOT_NAME } from "@oko-wallet-attached/config/telegram";
 import telegramStyles from "./telegram_login_popup.module.scss";
 
-export const TelegramLoginPopup: React.FC = () => {
+export const TelegramLoginPopup: FC = () => {
   const theme = useContext(ThemeContext);
 
   useEffect(() => {
diff --git a/embed/oko_attached/src/components/telegram_callback/telegram_callback.tsx b/embed/oko_attached/src/components/telegram_callback/telegram_callback.tsx
index 8abaa77dc..dba60024d 100644
--- a/embed/oko_attached/src/components/telegram_callback/telegram_callback.tsx
+++ b/embed/oko_attached/src/components/telegram_callback/telegram_callback.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { useEffect, useState, type FC } from "react";
 import { LoadingCircleIcon } from "@oko-wallet/oko-common-ui/icons/loading_circle_icon";
 import { WarningIcon } from "@oko-wallet/oko-common-ui/icons/warning_icon";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -11,7 +11,7 @@ import { getSystemTheme } from "@oko-wallet-attached/components/google_callback/
 import { setColorScheme } from "@oko-wallet-attached/components/attached_initialized/color_scheme";
 import { useTelegramCallback } from "./use_callback";
 
-export const TelegramCallback: React.FC = () => {
+export const TelegramCallback: FC = () => {
   const [theme, setTheme] = useState<Theme>("light");
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export const TelegramCallback: React.FC = () => {
   );
 };
 
-const ErrorMessage: React.FC<{ error: string }> = ({ error }) => {
+const ErrorMessage: FC<{ error: string }> = ({ error }) => {
   const handleClose = () => {
     window.close();
   };
diff --git a/embed/oko_attached/src/components/x_callback/x_callback.tsx b/embed/oko_attached/src/components/x_callback/x_callback.tsx
index 2a8d04f74..adaebf37c 100644
--- a/embed/oko_attached/src/components/x_callback/x_callback.tsx
+++ b/embed/oko_attached/src/components/x_callback/x_callback.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { type FC } from "react";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -12,7 +12,7 @@ import styles from "@oko-wallet-attached/components/google_callback/google_callb
 import { useXCallback } from "@oko-wallet-attached/components/x_callback/use_callback";
 import { useSetThemeInCallback } from "@oko-wallet-attached/hooks/theme";
 
-export const XCallback: React.FC = () => {
+export const XCallback: FC = () => {
   const theme = useSetThemeInCallback("x");
   const { error } = useXCallback();
 
@@ -42,7 +42,7 @@ export const XCallback: React.FC = () => {
   );
 };
 
-const ErrorMessage: React.FC<{ error: string }> = ({ error }) => {
+const ErrorMessage: FC<{ error: string }> = ({ error }) => {
   const errorCode = error || "unknown_error";
   const isParamsNotSufficient = errorCode === "params_not_sufficient";
   const errorMessage = isParamsNotSufficient
diff --git a/embed/oko_attached/src/global.d.ts b/embed/oko_attached/src/global.d.ts
index 9069b3ce8..3fe598ea1 100644
--- a/embed/oko_attached/src/global.d.ts
+++ b/embed/oko_attached/src/global.d.ts
@@ -22,6 +22,7 @@ declare global {
     VITE_AMPLITUDE_API_KEY: string;
     VITE_IPFS_GATEWAY_URL: string;
     VITE_TELEGRAM_BOT_NAME: string;
+    VITE_PUBLIC_S3_BUCKET_URL: string;
   }
 }
 
diff --git a/embed/oko_attached/src/requests/endpoints.ts b/embed/oko_attached/src/requests/endpoints.ts
index 1ac5144a5..61ae0aa4b 100644
--- a/embed/oko_attached/src/requests/endpoints.ts
+++ b/embed/oko_attached/src/requests/endpoints.ts
@@ -6,3 +6,6 @@ export const TX_INTERPRETER_API_ENDPOINT = import.meta.env
 export const DEMO_WEB_ORIGIN = import.meta.env.VITE_DEMO_WEB_ORIGIN;
 
 export const OKO_API_ENDPOINT = import.meta.env.VITE_OKO_API_ENDPOINT;
+
+export const OKO_PUBLIC_S3_BUCKET_URL = import.meta.env
+  .VITE_PUBLIC_S3_BUCKET_URL;
diff --git a/embed/oko_attached/src/utils/favicon.ts b/embed/oko_attached/src/utils/favicon.ts
new file mode 100644
index 000000000..d485004fd
--- /dev/null
+++ b/embed/oko_attached/src/utils/favicon.ts
@@ -0,0 +1,14 @@
+export function getFaviconUrl(origin: string): string {
+  if (!origin) {
+    return "";
+  }
+
+  try {
+    const parsed = new URL(origin);
+    return `https://www.google.com/s2/favicons?domain_url=${encodeURIComponent(
+      parsed.origin,
+    )}`;
+  } catch (error) {
+    return "";
+  }
+}
diff --git a/internals/ci/src/cmds/deploy.ts b/internals/ci/src/cmds/deploy.ts
index c5b75e347..6ea5c9de8 100644
--- a/internals/ci/src/cmds/deploy.ts
+++ b/internals/ci/src/cmds/deploy.ts
@@ -27,6 +27,9 @@ const APP_CONFIGS = {
   "oko-user-dashboard": {
     path: path.join(paths.root, "apps/user_dashboard"),
   },
+  "oko-sandbox-evm": {
+    path: path.join(paths.root, "sandbox/sandbox_evm"),
+  },
 };
 
 function listDeployableApps(): void {
diff --git a/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx b/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
index 077a0609a..52af94408 100644
--- a/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
+++ b/sandbox/sandbox_evm/src/app/playground/_components/SiweSignWidget.tsx
@@ -14,14 +14,23 @@ export function SiweSignWidget() {
 
   const [signedMessage, setSignedMessage] = useState("");
 
-  const handleSiweSign = async () => {
+  const handleSiweSign = async (isWrongUriTest: boolean = false) => {
     if (!walletClient || !address || !chainId) {
       return;
     }
 
+    const localDomain =
+      typeof window !== "undefined" ? window.location.host : "localhost:3000";
+    const localUri =
+      typeof window !== "undefined"
+        ? window.location.href
+        : "http://localhost:3000";
+    const wrongDomain = "demo.oko.app";
+    const wrongUri = "https://demo.oko.app/test";
+
     const siweMessage = createSiweMessage({
-      domain: "oko-wallet-sandbox.vercel.app",
-      uri: "https://oko-wallet-sandbox.vercel.app",
+      domain: isWrongUriTest ? wrongDomain : localDomain,
+      uri: isWrongUriTest ? wrongUri : localUri,
       address,
       chainId,
       nonce: generateSiweNonce(),
@@ -63,13 +72,21 @@ export function SiweSignWidget() {
         </p>
 
         <button
-          onClick={handleSiweSign}
+          onClick={() => handleSiweSign(false)}
           disabled={!walletClient || !address || !chainId || isLoading}
           className="btn btn-primary w-full mt-4"
         >
           {isLoading ? "Signing..." : "Sign SIWE Message"}
         </button>
 
+        <button
+          onClick={() => handleSiweSign(true)}
+          disabled={!walletClient || !address || !chainId || isLoading}
+          className="btn btn-primary w-full mt-4"
+        >
+          {isLoading ? "Signing..." : "Sign SIWE Message (with wrong URI)"}
+        </button>
+
         {error && (
           <div className="alert alert-error mt-4">
             <span className="text-sm">{error?.message}</span>
diff --git a/sandbox/sandbox_simple_host/src/components/cosmos_accounts_modal/cosmos_accounts_modal.tsx b/sandbox/sandbox_simple_host/src/components/cosmos_accounts_modal/cosmos_accounts_modal.tsx
index 3f14eb021..c269e4aa6 100644
--- a/sandbox/sandbox_simple_host/src/components/cosmos_accounts_modal/cosmos_accounts_modal.tsx
+++ b/sandbox/sandbox_simple_host/src/components/cosmos_accounts_modal/cosmos_accounts_modal.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import { type FC, useMemo, useState } from "react";
 
 import styles from "./cosmos_accounts_modal.module.scss";
 import {
@@ -12,7 +12,7 @@ export interface CosmosAccountsModalProps {
   accounts?: CosmosChainAccount[];
 }
 
-export const CosmosAccountsModal: React.FC<CosmosAccountsModalProps> = ({
+export const CosmosAccountsModal: FC<CosmosAccountsModalProps> = ({
   open,
   onClose,
   accounts: accountsProp,
diff --git a/sandbox/sandbox_simple_host/src/components/skeleton/skeleton.tsx b/sandbox/sandbox_simple_host/src/components/skeleton/skeleton.tsx
index 7b09c680d..af8260a5d 100644
--- a/sandbox/sandbox_simple_host/src/components/skeleton/skeleton.tsx
+++ b/sandbox/sandbox_simple_host/src/components/skeleton/skeleton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 
 import "./skeleton.scss";
 
@@ -9,7 +9,7 @@ interface SkeletonProps {
   className?: string;
 }
 
-export const Skeleton: React.FC<SkeletonProps> = ({
+export const Skeleton: FC<SkeletonProps> = ({
   width = "100%",
   height = "1em",
   borderRadius = "12px",
diff --git a/sandbox/sandbox_simple_host/src/components/spinner/spinner.tsx b/sandbox/sandbox_simple_host/src/components/spinner/spinner.tsx
index 6570067ba..2121b8d23 100644
--- a/sandbox/sandbox_simple_host/src/components/spinner/spinner.tsx
+++ b/sandbox/sandbox_simple_host/src/components/spinner/spinner.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 
 import styles from "./spinner.module.scss";
 
@@ -8,7 +8,7 @@ interface SpinnerProps {
   status?: "loading" | "failed";
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: FC<SpinnerProps> = ({
   size = 62,
   className,
   status = "loading",
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_row.tsx b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_row.tsx
index d7b80b89c..97f031525 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_row.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_row.tsx
@@ -1,12 +1,8 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 
 import styles from "./address_row.module.scss";
 
-export const AddressRow: React.FC<AddressRowProps> = ({
-  icon,
-  chain,
-  address,
-}) => {
+export const AddressRow: FC<AddressRowProps> = ({ icon, chain, address }) => {
   const isLoggedIn = !!address;
 
   const label = chain === "ethereum" ? "Ethereum" : "Cosmos Hub";
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_widget.tsx
index 25737aa9f..8296c2fe6 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/address_widget.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 
 import styles from "./address_widget.module.scss";
 import { Widget } from "../widget_components";
-import { AddressRow } from "./address_row";
 import { ViewChainsButton } from "./view_chains_button";
 import { ViewChainsModal } from "./view_chains_modal";
 
-export const AddressWidget: React.FC<AddressWidgetProps> = ({}) => {
+export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
   const [showModal, setShowModal] = useState(false);
 
   const handleViewChains = () => {
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/chains_row.tsx b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/chains_row.tsx
index f8f7ecc87..016135570 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/chains_row.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/chains_row.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 
 import styles from "./chains_row.module.scss";
 
@@ -7,7 +7,7 @@ export interface ChainsRowProps {
   icon: ReactElement;
 }
 
-export const ChainsRow: React.FC<ChainsRowProps> = ({ chainName, icon }) => {
+export const ChainsRow: FC<ChainsRowProps> = ({ chainName, icon }) => {
   return (
     <div className={styles.row}>
       {icon}
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_button.tsx b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_button.tsx
index d8413b5bb..38dbbfc9b 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_button.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_button.tsx
@@ -1,10 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./view_chains_button.module.scss";
 
-export const ViewChainsButton: React.FC<ViewChainsButtonProps> = ({
-  onClick,
-}) => {
+export const ViewChainsButton: FC<ViewChainsButtonProps> = ({ onClick }) => {
   return (
     <div className={styles.button} onClick={onClick}>
       <div className={styles.icons}></div>
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_modal.tsx b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_modal.tsx
index 1bfc72478..cbc83c3cc 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_modal.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/address_widget/view_chains_modal.tsx
@@ -1,7 +1,6 @@
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./view_chains_modal.module.scss";
-import { ChainsRow } from "./chains_row";
 
 const CHAINS = [
   // { name: "Ethereum", icon: <EthereumIcon width={24} height={24} /> },
@@ -14,9 +13,7 @@ const CHAINS = [
   // { name: "Solana", icon: <CosmosIcon width={24} height={24} /> },
 ];
 
-export const ViewChainsModal: React.FC<ViewChainsModalProps> = ({
-  onClose,
-}) => {
+export const ViewChainsModal: FC<ViewChainsModalProps> = ({ onClose }) => {
   return (
     <div className={styles.modalOverlay}>
       <div className={styles.modal}>
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
index 10ec1a98d..5f2c26621 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 
 import { SignWidget } from "../sign_widget/sign_widget";
 import { useOko } from "@/hooks/use_oko";
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_cosmjs_sign_widget/cosmos_onchain_cosmjs_sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_cosmjs_sign_widget/cosmos_onchain_cosmjs_sign_widget.tsx
index bbc7f1982..6b6004fa8 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_cosmjs_sign_widget/cosmos_onchain_cosmjs_sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_cosmjs_sign_widget/cosmos_onchain_cosmjs_sign_widget.tsx
@@ -1,13 +1,12 @@
-import React from "react";
+import type { FC } from "react";
 import { MsgSend } from "@keplr-wallet/proto-types/cosmos/bank/v1beta1/tx";
 import { coin } from "@cosmjs/amino";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 
 import { GasPrice, SigningStargateClient } from "@cosmjs/stargate";
 import { makeMockSendTokenAminoSignDoc } from "@/utils/cosmos";
 import styles from "./cosmos_onchain_cosmjs_sign_widget.module.scss";
 import { useOko } from "@/hooks/use_oko";
-// import { useAuthState } from "@/state/auth";
 import { TEST_COSMOS_CHAIN_ID, TEST_COSMOS_CHAIN_RPC } from "@/constants";
 import { useUserInfoState } from "@/state/user_info";
 
@@ -210,7 +209,7 @@ interface ActionButtonProps {
   actionName: string;
 }
 
-const ActionButton: React.FC<ActionButtonProps> = ({
+const ActionButton: FC<ActionButtonProps> = ({
   label,
   onClick,
   mutation,
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
index 7c04d6115..ec464c524 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { type DirectSignResponse } from "@cosmjs/proto-signing";
 import { type AminoSignResponse } from "@cosmjs/amino";
 import { useMutation } from "@tanstack/react-query";
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/docs_widget/docs_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/docs_widget/docs_widget.tsx
index 24700cab9..7f0cf0c05 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/docs_widget/docs_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/docs_widget/docs_widget.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import type { FC } from "react";
 
 import { Widget } from "../widget_components";
 import styles from "./docs_widget.module.scss";
 
-export const DocsWidget: React.FC = () => {
+export const DocsWidget: FC = () => {
   const handleOpenDocs = () => {
     console.log("Open docs clicked");
   };
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
index 292f856d7..2802783e5 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { hashMessage, hashTypedData, recoverPublicKey } from "viem";
 import { publicKeyToEthereumAddress } from "@oko-wallet/oko-sdk-eth";
 
@@ -6,7 +6,7 @@ import styles from "./ethereum_offchain_sign_widget.module.scss";
 import { SignWidget } from "@/components/widgets/sign_widget/sign_widget";
 import { useOko } from "@/hooks/use_oko";
 
-export const EthereumOffchainSignWidget = () => {
+export const EthereumOffchainSignWidget: FC = () => {
   const { okoEth } = useOko();
   const [isLoading, setIsLoading] = useState(false);
   const [signType, setSignType] = useState<"personal_sign" | "typed_data_v4">(
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
index 8e6a46e98..7d5d9ea03 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   keccak256,
   parseTransaction,
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/mock_dapp_modal/mock_dapp_modal.tsx b/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/mock_dapp_modal/mock_dapp_modal.tsx
index 5472452d5..4a7862b0f 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/mock_dapp_modal/mock_dapp_modal.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/mock_dapp_modal/mock_dapp_modal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { createPortal } from "react-dom";
 
 import styles from "./mock_dapp_modal.module.scss";
@@ -10,7 +10,7 @@ export interface MockDappModalProps {
   signWidgetProps: SignWidgetProps;
 }
 
-export const MockDappModal: React.FC<MockDappModalProps> = ({
+export const MockDappModal: FC<MockDappModalProps> = ({
   isOpen,
   onClose,
   signWidgetProps,
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/sign_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/sign_widget.tsx
index dbd6fdcd3..8e214605d 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/sign_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/sign_widget/sign_widget.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactElement, useState } from "react";
+import { type ReactElement, useState, type FC } from "react";
 
 import { MockDappModal } from "@/components/widgets/sign_widget/mock_dapp_modal/mock_dapp_modal";
 import styles from "@/components/widgets/sign_widget/sign_widget.module.scss";
@@ -9,7 +9,7 @@ export type SignWidgetInnerProps = SignWidgetProps & {
   hideDappModalButton?: boolean;
 };
 
-export const SignWidgetContent: React.FC<SignWidgetInnerProps> = ({
+export const SignWidgetContent: FC<SignWidgetInnerProps> = ({
   chain,
   chainIcon,
   signType,
@@ -51,7 +51,7 @@ export const SignWidgetContent: React.FC<SignWidgetInnerProps> = ({
   );
 };
 
-export const SignWidget: React.FC<SignWidgetProps> = (props) => {
+export const SignWidget: FC<SignWidgetProps> = (props) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const openModal = () => setIsModalOpen(true);
diff --git a/sandbox/sandbox_simple_host/src/components/widgets/user_data_widget/user_data_widget.tsx b/sandbox/sandbox_simple_host/src/components/widgets/user_data_widget/user_data_widget.tsx
index 067bfe489..1f22bafd1 100644
--- a/sandbox/sandbox_simple_host/src/components/widgets/user_data_widget/user_data_widget.tsx
+++ b/sandbox/sandbox_simple_host/src/components/widgets/user_data_widget/user_data_widget.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import styles from "./user_data_widget.module.scss";
 
-export const UserDataWidget: React.FC<UserDataWidgetProps> = ({ userData }) => {
+export const UserDataWidget: FC<UserDataWidgetProps> = ({ userData }) => {
   const isLoggedIn = !!userData;
 
   return (
diff --git a/sdk/oko_sdk_core/scripts/build.ts b/sdk/oko_sdk_core/scripts/build.ts
index aa0f30d22..cc5bcc6ee 100644
--- a/sdk/oko_sdk_core/scripts/build.ts
+++ b/sdk/oko_sdk_core/scripts/build.ts
@@ -20,13 +20,13 @@ const __dirname = path.dirname(__filename);
 const PKG_ROOT = path.resolve(__dirname, "..");
 
 async function main() {
-  console.log("Start building");
+  console.log("Start build");
 
   await removeDirtyFiles();
   await bundle();
   replaceTscAlias();
 
-  console.log("Done");
+  console.log("Done build");
 }
 
 async function removeDirtyFiles() {
diff --git a/sdk/oko_sdk_eth/scripts/build.ts b/sdk/oko_sdk_eth/scripts/build.ts
index 426af195b..26193941c 100644
--- a/sdk/oko_sdk_eth/scripts/build.ts
+++ b/sdk/oko_sdk_eth/scripts/build.ts
@@ -27,7 +27,7 @@ async function main() {
   await bundle();
   replaceTscAlias();
 
-  console.log("Done");
+  console.log("Done build");
 }
 
 async function removeDirtyFiles() {
diff --git a/ui/oko_common_ui/src/card/card.tsx b/ui/oko_common_ui/src/card/card.tsx
index 6089c16cc..763de094f 100644
--- a/ui/oko_common_ui/src/card/card.tsx
+++ b/ui/oko_common_ui/src/card/card.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import cn from "classnames";
 
 import styles from "./card.module.scss";
@@ -10,7 +10,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   footer?: React.ReactNode;
 }
 
-export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
+export const Card: FC<React.PropsWithChildren<CardProps>> = ({
   variant = "default",
   padding = "md",
   header,
diff --git a/ui/oko_common_ui/src/checkbox/check_icon.tsx b/ui/oko_common_ui/src/checkbox/check_icon.tsx
index 519b7f5a2..8ed11e71b 100644
--- a/ui/oko_common_ui/src/checkbox/check_icon.tsx
+++ b/ui/oko_common_ui/src/checkbox/check_icon.tsx
@@ -1,4 +1,6 @@
-export const CheckIcon = ({ size = 14 }: { size?: number }) => {
+import type { FC } from "react";
+
+export const CheckIcon: FC<CheckIconProps> = ({ size = 14, color }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +11,7 @@ export const CheckIcon = ({ size = 14 }: { size?: number }) => {
     >
       <path
         d="M12.1666 3.5L5.74998 9.91667L2.83331 7"
-        stroke="white"
+        stroke={color || "currentColor"}
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -17,3 +19,8 @@ export const CheckIcon = ({ size = 14 }: { size?: number }) => {
     </svg>
   );
 };
+
+interface CheckIconProps {
+  size?: number;
+  color?: string;
+}
diff --git a/ui/oko_common_ui/src/checkbox/checkbox.module.scss b/ui/oko_common_ui/src/checkbox/checkbox.module.scss
index 518ffa2e8..9dd1f2903 100644
--- a/ui/oko_common_ui/src/checkbox/checkbox.module.scss
+++ b/ui/oko_common_ui/src/checkbox/checkbox.module.scss
@@ -16,6 +16,16 @@
   align-items: center;
 }
 
+[data-theme="light"] {
+  .checkboxInput {
+    color: var(--white);
+  }
+}
+[data-theme="dark"] {
+  .checkboxInput {
+    color: var(--gray-700);
+  }
+}
 .checkboxInput {
   display: flex;
 
diff --git a/ui/oko_common_ui/src/checkbox/checkbox.tsx b/ui/oko_common_ui/src/checkbox/checkbox.tsx
index fc06460c8..0fd30a625 100644
--- a/ui/oko_common_ui/src/checkbox/checkbox.tsx
+++ b/ui/oko_common_ui/src/checkbox/checkbox.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import cn from "classnames";
 
 import styles from "./checkbox.module.scss";
@@ -13,6 +13,9 @@ interface CheckboxProps {
   size?: "sm" | "md";
   checked: boolean;
   onChange: (checked: boolean) => void;
+  checkBoxInputContainerClassName?: string;
+  checkboxContainerClassName?: string;
+
   label: string;
   labelStyle?: {
     color?: BaseTypographyProps["color"];
@@ -21,13 +24,15 @@ interface CheckboxProps {
   };
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: FC<CheckboxProps> = ({
   id,
   size = "md",
   checked,
   onChange,
   label,
   labelStyle,
+  checkBoxInputContainerClassName,
+  checkboxContainerClassName,
 }) => {
   const iconSize = size === "sm" ? 12 : 14;
   const checkBoxInputStyle = cn(
@@ -38,6 +43,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   const checkboxContainerStyle = cn(
     styles.checkboxContainer,
     styles[`checkboxContainer-${size}`],
+    checkboxContainerClassName,
   );
 
   return (
@@ -50,7 +56,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         onChange={(e) => onChange(e.target.checked)}
       />
       <label htmlFor={id} className={checkboxContainerStyle}>
-        <div className={styles.checkboxInputContainer}>
+        <div
+          className={cn(
+            styles.checkboxInputContainer,
+            checkBoxInputContainerClassName,
+          )}
+        >
           <span className={checkBoxInputStyle}>
             {/* NOTE: For animate processing, it adjust the display by adjusting the opacity of the corresponding icon in the css @retto*/}
             <CheckIcon size={iconSize} />
diff --git a/ui/oko_common_ui/src/dropdown/dropdown.tsx b/ui/oko_common_ui/src/dropdown/dropdown.tsx
index 39d9c3c3d..0abe5f0b7 100644
--- a/ui/oko_common_ui/src/dropdown/dropdown.tsx
+++ b/ui/oko_common_ui/src/dropdown/dropdown.tsx
@@ -1,9 +1,12 @@
-import React, {
+import {
   createContext,
   useContext,
   useState,
   useRef,
   useEffect,
+  type FC,
+  isValidElement,
+  cloneElement,
 } from "react";
 import { createPortal } from "react-dom";
 import cn from "classnames";
@@ -60,7 +63,7 @@ export interface DropdownDividerProps {
   className?: string;
 }
 
-const DropdownRoot: React.FC<DropdownProps> = ({ children, className }) => {
+const DropdownRoot: FC<DropdownProps> = ({ children, className }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const triggerRef = useRef<HTMLElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -140,7 +143,7 @@ const DropdownRoot: React.FC<DropdownProps> = ({ children, className }) => {
  * Open menu
  * </button>
  */
-const DropdownTrigger: React.FC<DropdownTriggerProps> = ({
+const DropdownTrigger: FC<DropdownTriggerProps> = ({
   children,
   className,
   asChild = false,
@@ -159,9 +162,9 @@ const DropdownTrigger: React.FC<DropdownTriggerProps> = ({
     }
   };
 
-  if (asChild && React.isValidElement(children)) {
+  if (asChild && isValidElement(children)) {
     const childProps = (children as React.ReactElement<any>).props;
-    return React.cloneElement(children as React.ReactElement<any>, {
+    return cloneElement(children as React.ReactElement<any>, {
       ref: triggerRef,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -190,7 +193,7 @@ const DropdownTrigger: React.FC<DropdownTriggerProps> = ({
   );
 };
 
-const DropdownContent: React.FC<DropdownContentProps> = ({
+const DropdownContent: FC<DropdownContentProps> = ({
   children,
   className,
   defaultOffsetFromTrigger = 4,
@@ -261,7 +264,7 @@ const DropdownContent: React.FC<DropdownContentProps> = ({
   return createPortal(content, document.body);
 };
 
-const DropdownItem: React.FC<DropdownItemProps> = ({
+const DropdownItem: FC<DropdownItemProps> = ({
   children,
   onClick,
   disabled = false,
@@ -305,7 +308,7 @@ const DropdownItem: React.FC<DropdownItemProps> = ({
   );
 };
 
-const DropdownDivider: React.FC<DropdownDividerProps> = ({ className }) => {
+const DropdownDivider: FC<DropdownDividerProps> = ({ className }) => {
   return <div className={cn(styles.divider, className)} />;
 };
 
diff --git a/ui/oko_common_ui/src/icons/apple_icon.tsx b/ui/oko_common_ui/src/icons/apple_icon.tsx
index 1bc257850..b37396ab6 100644
--- a/ui/oko_common_ui/src/icons/apple_icon.tsx
+++ b/ui/oko_common_ui/src/icons/apple_icon.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { type FC } from "react";
 
-export const AppleIcon: React.FC<AppleIconProps> = ({ size = 20 }) => {
+export const AppleIcon: FC<AppleIconProps> = ({ size = 20 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/oko_common_ui/src/icons/arrow_up_right.tsx b/ui/oko_common_ui/src/icons/arrow_up_right.tsx
index ab93b1476..3728859a3 100644
--- a/ui/oko_common_ui/src/icons/arrow_up_right.tsx
+++ b/ui/oko_common_ui/src/icons/arrow_up_right.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ArrowUpRightIcon: React.FC<BasicIconProps> = ({
+export const ArrowUpRightIcon: FC<BasicIconProps> = ({
   className,
   size = 16,
   color = "currentColor",
diff --git a/ui/oko_common_ui/src/icons/chart_outlined.tsx b/ui/oko_common_ui/src/icons/chart_outlined.tsx
index 6fad9674b..89971594d 100644
--- a/ui/oko_common_ui/src/icons/chart_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/chart_outlined.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ChartOutlinedIcon: React.FC<BasicIconProps> = ({
+export const ChartOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/check_circle_outlined.tsx b/ui/oko_common_ui/src/icons/check_circle_outlined.tsx
index 4269d1121..14fc978fb 100644
--- a/ui/oko_common_ui/src/icons/check_circle_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/check_circle_outlined.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import { type FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const CheckCircleOutlinedIcon: React.FC<BasicIconProps> = ({
+export const CheckCircleOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 16,
diff --git a/ui/oko_common_ui/src/icons/chevron_down.tsx b/ui/oko_common_ui/src/icons/chevron_down.tsx
index 7c34b0925..6e03a7bf8 100644
--- a/ui/oko_common_ui/src/icons/chevron_down.tsx
+++ b/ui/oko_common_ui/src/icons/chevron_down.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ChevronDownIcon: React.FC<BasicIconProps> = ({
+export const ChevronDownIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 16,
diff --git a/ui/oko_common_ui/src/icons/chevron_up.tsx b/ui/oko_common_ui/src/icons/chevron_up.tsx
index 0c12287db..e77f16bc3 100644
--- a/ui/oko_common_ui/src/icons/chevron_up.tsx
+++ b/ui/oko_common_ui/src/icons/chevron_up.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ChevronUpIcon: React.FC<BasicIconProps> = ({
+export const ChevronUpIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 16,
diff --git a/ui/oko_common_ui/src/icons/close_button_icon.tsx b/ui/oko_common_ui/src/icons/close_button_icon.tsx
index bbb29551b..a7e045fe8 100644
--- a/ui/oko_common_ui/src/icons/close_button_icon.tsx
+++ b/ui/oko_common_ui/src/icons/close_button_icon.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const CloseButtonIcon: React.FC<BasicIconProps> = ({
+export const CloseButtonIcon: FC<BasicIconProps> = ({
   className,
   color = "#A4A7AE",
   size = 12,
diff --git a/ui/oko_common_ui/src/icons/code.tsx b/ui/oko_common_ui/src/icons/code.tsx
index c4dc1c299..f698509d0 100644
--- a/ui/oko_common_ui/src/icons/code.tsx
+++ b/ui/oko_common_ui/src/icons/code.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const CodeIcon: React.FC<BasicIconProps> = ({
+export const CodeIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/copy_outlined.tsx b/ui/oko_common_ui/src/icons/copy_outlined.tsx
index c71ca75a2..aae92258d 100644
--- a/ui/oko_common_ui/src/icons/copy_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/copy_outlined.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const CopyOutlinedIcon: React.FC<BasicIconProps> = ({
+export const CopyOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/cosmos_icon.tsx b/ui/oko_common_ui/src/icons/cosmos_icon.tsx
index 1e0896dcd..efbbe58fb 100644
--- a/ui/oko_common_ui/src/icons/cosmos_icon.tsx
+++ b/ui/oko_common_ui/src/icons/cosmos_icon.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const CosmosIcon: React.FC<CosmosIconProps> = ({
+export const CosmosIcon: FC<CosmosIconProps> = ({
   width = 16,
   height = 16,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/discord_icon.tsx b/ui/oko_common_ui/src/icons/discord_icon.tsx
index 26f1e1874..9389f0241 100644
--- a/ui/oko_common_ui/src/icons/discord_icon.tsx
+++ b/ui/oko_common_ui/src/icons/discord_icon.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import type { FC } from "react";
 
-export const DiscordIcon: React.FC<DiscordIconProps> = ({ size = 20 }) => {
+export const DiscordIcon: FC<DiscordIconProps> = ({ size = 20 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/oko_common_ui/src/icons/door_outlined.tsx b/ui/oko_common_ui/src/icons/door_outlined.tsx
index 61d52c08e..d69ef41a6 100644
--- a/ui/oko_common_ui/src/icons/door_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/door_outlined.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const DoorOutlinedIcon: React.FC<BasicIconProps> = ({
+export const DoorOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/edit.tsx b/ui/oko_common_ui/src/icons/edit.tsx
index 757387d71..d344431b4 100644
--- a/ui/oko_common_ui/src/icons/edit.tsx
+++ b/ui/oko_common_ui/src/icons/edit.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const EditIcon: React.FC<BasicIconProps> = ({
+export const EditIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/empty_state_icon.tsx b/ui/oko_common_ui/src/icons/empty_state_icon.tsx
index 9852751b1..3f53d76de 100644
--- a/ui/oko_common_ui/src/icons/empty_state_icon.tsx
+++ b/ui/oko_common_ui/src/icons/empty_state_icon.tsx
@@ -1,6 +1,6 @@
 import type { BasicIconProps } from "./types";
 
-export const EmptyStateIcon: React.FC<BasicIconProps> = ({
+export const EmptyStateIcon: FC<BasicIconProps> = ({
   className,
   size = 28,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/error_icon.tsx b/ui/oko_common_ui/src/icons/error_icon.tsx
index ccd451d53..60d08eef0 100644
--- a/ui/oko_common_ui/src/icons/error_icon.tsx
+++ b/ui/oko_common_ui/src/icons/error_icon.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ErrorIcon: React.FC<BasicIconProps> = ({
+export const ErrorIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/ethereum_blue_icon.tsx b/ui/oko_common_ui/src/icons/ethereum_blue_icon.tsx
index 9d3f2e45f..b48335061 100644
--- a/ui/oko_common_ui/src/icons/ethereum_blue_icon.tsx
+++ b/ui/oko_common_ui/src/icons/ethereum_blue_icon.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const EthereumBlueIcon: React.FC<EthereumBlueIconProps> = ({
+export const EthereumBlueIcon: FC<EthereumBlueIconProps> = ({
   width = 16,
   height = 16,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/ethereum_icon.tsx b/ui/oko_common_ui/src/icons/ethereum_icon.tsx
index 971f38fea..01b357297 100644
--- a/ui/oko_common_ui/src/icons/ethereum_icon.tsx
+++ b/ui/oko_common_ui/src/icons/ethereum_icon.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const EthereumIcon: React.FC<EthereumIconProps> = ({
+export const EthereumIcon: FC<EthereumIconProps> = ({
   width = 16,
   height = 16,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/external_link_outlined.tsx b/ui/oko_common_ui/src/icons/external_link_outlined.tsx
index 8ecb63c2e..a582fbcc1 100644
--- a/ui/oko_common_ui/src/icons/external_link_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/external_link_outlined.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ExternalLinkOutlinedIcon: React.FC<BasicIconProps> = ({
+export const ExternalLinkOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/eye.tsx b/ui/oko_common_ui/src/icons/eye.tsx
index 3422fb513..ce55f2422 100644
--- a/ui/oko_common_ui/src/icons/eye.tsx
+++ b/ui/oko_common_ui/src/icons/eye.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const EyeIcon: React.FC<BasicIconProps> = ({
+export const EyeIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/google_icon.tsx b/ui/oko_common_ui/src/icons/google_icon.tsx
index d02d6de9a..e3019111b 100644
--- a/ui/oko_common_ui/src/icons/google_icon.tsx
+++ b/ui/oko_common_ui/src/icons/google_icon.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const GoogleIcon: React.FC<GoogleIconProps> = ({
+export const GoogleIcon: FC<GoogleIconProps> = ({
   width = 16,
   height = 16,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/home_outlined.tsx b/ui/oko_common_ui/src/icons/home_outlined.tsx
index e6a8ba83f..0a0e7d96c 100644
--- a/ui/oko_common_ui/src/icons/home_outlined.tsx
+++ b/ui/oko_common_ui/src/icons/home_outlined.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const HomeOutlinedIcon: React.FC<BasicIconProps> = ({
+export const HomeOutlinedIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/info_circle.tsx b/ui/oko_common_ui/src/icons/info_circle.tsx
index 566d665f4..a8a787165 100644
--- a/ui/oko_common_ui/src/icons/info_circle.tsx
+++ b/ui/oko_common_ui/src/icons/info_circle.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const InfoCircleIcon: React.FC<BasicIconProps> = ({
+export const InfoCircleIcon: FC<BasicIconProps> = ({
   className,
   color = "#535862",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/keplr_icon.tsx b/ui/oko_common_ui/src/icons/keplr_icon.tsx
index 843f06716..8c80dbf55 100644
--- a/ui/oko_common_ui/src/icons/keplr_icon.tsx
+++ b/ui/oko_common_ui/src/icons/keplr_icon.tsx
@@ -2,10 +2,7 @@ import React from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const KeplrIcon: React.FC<KeplrIconProps> = ({
-  width = 20,
-  height = 20,
-}) => {
+export const KeplrIcon: FC<KeplrIconProps> = ({ width = 20, height = 20 }) => {
   return (
     <img
       src={`${s3BucketURL}/keplr.png`}
diff --git a/ui/oko_common_ui/src/icons/leap_icon.tsx b/ui/oko_common_ui/src/icons/leap_icon.tsx
index 257690798..f19b3870c 100644
--- a/ui/oko_common_ui/src/icons/leap_icon.tsx
+++ b/ui/oko_common_ui/src/icons/leap_icon.tsx
@@ -1,11 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const LeapIcon: React.FC<LeapIconProps> = ({
-  width = 20,
-  height = 20,
-}) => {
+export const LeapIcon: FC<LeapIconProps> = ({ width = 20, height = 20 }) => {
   return (
     <img
       src={`${s3BucketURL}/leap.png`}
diff --git a/ui/oko_common_ui/src/icons/loading.tsx b/ui/oko_common_ui/src/icons/loading.tsx
index 6711ddb16..9ce8e9efa 100644
--- a/ui/oko_common_ui/src/icons/loading.tsx
+++ b/ui/oko_common_ui/src/icons/loading.tsx
@@ -1,8 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const LoadingIcon: React.FC<
-  BasicIconProps & { backgroundColor?: string }
-> = ({
+export const LoadingIcon: FC<BasicIconProps & { backgroundColor?: string }> = ({
   className,
   color = "currentColor",
   backgroundColor = "transparent",
diff --git a/ui/oko_common_ui/src/icons/loading_circle_icon.tsx b/ui/oko_common_ui/src/icons/loading_circle_icon.tsx
index 1697e3c2f..4a9e5742d 100644
--- a/ui/oko_common_ui/src/icons/loading_circle_icon.tsx
+++ b/ui/oko_common_ui/src/icons/loading_circle_icon.tsx
@@ -1,8 +1,10 @@
-import type { BasicIconProps } from "./types";
-import styles from "./loading_circle_icon.module.scss";
 import cn from "classnames";
+import type { FC } from "react";
+
+import styles from "./loading_circle_icon.module.scss";
+import type { BasicIconProps } from "./types";
 
-export const LoadingCircleIcon: React.FC<BasicIconProps> = ({
+export const LoadingCircleIcon: FC<BasicIconProps> = ({
   className,
   size = 62,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/logo_text_icon.tsx b/ui/oko_common_ui/src/icons/logo_text_icon.tsx
index 477d4ed58..b19a7e6ce 100644
--- a/ui/oko_common_ui/src/icons/logo_text_icon.tsx
+++ b/ui/oko_common_ui/src/icons/logo_text_icon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const LogoTextIcon: React.FC<LogoTextIconProps> = ({
+export const LogoTextIcon: FC<LogoTextIconProps> = ({
   width = 54.231,
   height = "auto",
   style,
diff --git a/ui/oko_common_ui/src/icons/logout.tsx b/ui/oko_common_ui/src/icons/logout.tsx
index 49a5062bb..149a8fab3 100644
--- a/ui/oko_common_ui/src/icons/logout.tsx
+++ b/ui/oko_common_ui/src/icons/logout.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const LogoutIcon: React.FC<BasicIconProps> = ({
+export const LogoutIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/mailbox.tsx b/ui/oko_common_ui/src/icons/mailbox.tsx
index 15470e2b3..08278146c 100644
--- a/ui/oko_common_ui/src/icons/mailbox.tsx
+++ b/ui/oko_common_ui/src/icons/mailbox.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const MailboxIcon: React.FC<BasicIconProps> = ({
+export const MailboxIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/metamask_icon.tsx b/ui/oko_common_ui/src/icons/metamask_icon.tsx
index ba834b06b..5f45cbdf6 100644
--- a/ui/oko_common_ui/src/icons/metamask_icon.tsx
+++ b/ui/oko_common_ui/src/icons/metamask_icon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const MetamaskIcon: React.FC<MetamaskIconProps> = ({
+export const MetamaskIcon: FC<MetamaskIconProps> = ({
   width = 20,
   height = 20,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/oko_logo_icon.tsx b/ui/oko_common_ui/src/icons/oko_logo_icon.tsx
index 232c7421b..c4156c823 100644
--- a/ui/oko_common_ui/src/icons/oko_logo_icon.tsx
+++ b/ui/oko_common_ui/src/icons/oko_logo_icon.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 import type { Theme } from "@oko-wallet-common-ui/theme/theme_provider";
 
-export const OkoLogoIcon: React.FC<OkoLogoIconProps> = ({
+export const OkoLogoIcon: FC<OkoLogoIconProps> = ({
   width = 84,
   height = 32,
   className,
diff --git a/ui/oko_common_ui/src/icons/oko_logo_with_name_icon.tsx b/ui/oko_common_ui/src/icons/oko_logo_with_name_icon.tsx
index f8b30e7d3..9f4ff1a36 100644
--- a/ui/oko_common_ui/src/icons/oko_logo_with_name_icon.tsx
+++ b/ui/oko_common_ui/src/icons/oko_logo_with_name_icon.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 import type { Theme } from "@oko-wallet-common-ui/theme/theme_provider";
 
-export const OkoLogoWithNameIcon: React.FC<OkoLogoWithNameIconProps> = ({
+export const OkoLogoWithNameIcon: FC<OkoLogoWithNameIconProps> = ({
   width = 39,
   height = 14,
   className,
diff --git a/ui/oko_common_ui/src/icons/oko_product_logo_icon.tsx b/ui/oko_common_ui/src/icons/oko_product_logo_icon.tsx
index af9760af8..9c7b0f2ec 100644
--- a/ui/oko_common_ui/src/icons/oko_product_logo_icon.tsx
+++ b/ui/oko_common_ui/src/icons/oko_product_logo_icon.tsx
@@ -6,7 +6,7 @@ import type { Theme } from "@oko-wallet-common-ui/theme/theme_provider";
 /**
  * @deprecated Use OkoLogoIcon instead
  */
-export const OkoProductLogoIcon: React.FC<OkoProductLogoIconProps> = ({
+export const OkoProductLogoIcon: FC<OkoProductLogoIconProps> = ({
   width = 323.702,
   height = 128,
   className,
diff --git a/ui/oko_common_ui/src/icons/osmosis_icon.tsx b/ui/oko_common_ui/src/icons/osmosis_icon.tsx
index 52a5dcf08..91a4f105c 100644
--- a/ui/oko_common_ui/src/icons/osmosis_icon.tsx
+++ b/ui/oko_common_ui/src/icons/osmosis_icon.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import { s3BucketURL } from "./paths";
 
-export const OsmosisIcon: React.FC<OsmosisIconProps> = ({
+export const OsmosisIcon: FC<OsmosisIconProps> = ({
   width = 16,
   height = 16,
 }) => {
diff --git a/ui/oko_common_ui/src/icons/password.tsx b/ui/oko_common_ui/src/icons/password.tsx
index a9a8de30d..7e581d00b 100644
--- a/ui/oko_common_ui/src/icons/password.tsx
+++ b/ui/oko_common_ui/src/icons/password.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const PasswordIcon: React.FC<BasicIconProps> = ({
+export const PasswordIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/plus.tsx b/ui/oko_common_ui/src/icons/plus.tsx
index c28e3fab6..cc93128d2 100644
--- a/ui/oko_common_ui/src/icons/plus.tsx
+++ b/ui/oko_common_ui/src/icons/plus.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const PlusIcon: React.FC<BasicIconProps> = ({
+export const PlusIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/search.tsx b/ui/oko_common_ui/src/icons/search.tsx
index 3cb5845db..2002b2da3 100644
--- a/ui/oko_common_ui/src/icons/search.tsx
+++ b/ui/oko_common_ui/src/icons/search.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const SearchIcon: React.FC<BasicIconProps> = ({
+export const SearchIcon: FC<BasicIconProps> = ({
   className,
   color = "#A4A7AE",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/setting_icon.tsx b/ui/oko_common_ui/src/icons/setting_icon.tsx
index 67f42100d..13c71d025 100644
--- a/ui/oko_common_ui/src/icons/setting_icon.tsx
+++ b/ui/oko_common_ui/src/icons/setting_icon.tsx
@@ -1,6 +1,6 @@
 import type { BasicIconProps } from "./types";
 
-export const SettingIcon: React.FC<BasicIconProps> = ({
+export const SettingIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/telegram_icon.tsx b/ui/oko_common_ui/src/icons/telegram_icon.tsx
index 563147bf3..dcff952b7 100644
--- a/ui/oko_common_ui/src/icons/telegram_icon.tsx
+++ b/ui/oko_common_ui/src/icons/telegram_icon.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { type FC } from "react";
 
-export const TelegramIcon: React.FC<TelegramIconProps> = ({ size = 20 }) => {
+export const TelegramIcon: FC<TelegramIconProps> = ({ size = 20 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/oko_common_ui/src/icons/three_dots_vertical.tsx b/ui/oko_common_ui/src/icons/three_dots_vertical.tsx
index 387d7291f..90cfad58b 100644
--- a/ui/oko_common_ui/src/icons/three_dots_vertical.tsx
+++ b/ui/oko_common_ui/src/icons/three_dots_vertical.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const ThreeDotsVerticalIcon: React.FC<BasicIconProps> = ({
+export const ThreeDotsVerticalIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
 }) => {
diff --git a/ui/oko_common_ui/src/icons/users.tsx b/ui/oko_common_ui/src/icons/users.tsx
index 65f9c53f4..984082f3e 100644
--- a/ui/oko_common_ui/src/icons/users.tsx
+++ b/ui/oko_common_ui/src/icons/users.tsx
@@ -1,6 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const UsersIcon: React.FC<BasicIconProps> = ({
+export const UsersIcon: FC<BasicIconProps> = ({
   className,
   color = "currentColor",
   size = 20,
diff --git a/ui/oko_common_ui/src/icons/warning_icon.tsx b/ui/oko_common_ui/src/icons/warning_icon.tsx
index 61b4c110a..4e3bd6d05 100644
--- a/ui/oko_common_ui/src/icons/warning_icon.tsx
+++ b/ui/oko_common_ui/src/icons/warning_icon.tsx
@@ -1,9 +1,8 @@
+import type { FC } from "react";
+
 import type { BasicIconProps } from "./types";
 
-export const WarningIcon: React.FC<BasicIconProps> = ({
-  className,
-  size = 42,
-}) => {
+export const WarningIcon: FC<BasicIconProps> = ({ className, size = 42 }) => {
   return (
     <svg
       width={size}
diff --git a/ui/oko_common_ui/src/icons/x_close.tsx b/ui/oko_common_ui/src/icons/x_close.tsx
index ef9953120..8db5a7307 100644
--- a/ui/oko_common_ui/src/icons/x_close.tsx
+++ b/ui/oko_common_ui/src/icons/x_close.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import { type FC } from "react";
 
 import type { BasicIconProps } from "./types";
 
-export const XCloseIcon: React.FC<BasicIconProps> = ({
+export const XCloseIcon: FC<BasicIconProps> = ({
   className,
   size = 20,
   color = "#A4A7AE",
diff --git a/ui/oko_common_ui/src/icons/x_icon.tsx b/ui/oko_common_ui/src/icons/x_icon.tsx
index 6fef8243a..71e2d5639 100644
--- a/ui/oko_common_ui/src/icons/x_icon.tsx
+++ b/ui/oko_common_ui/src/icons/x_icon.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { type FC } from "react";
 
-export const XIcon: React.FC<TelegramIconProps> = ({ size = 24 }) => {
+export const XIcon: FC<TelegramIconProps> = ({ size = 24 }) => {
   return (
     <svg
       width={size}
diff --git a/ui/oko_common_ui/src/input/input.tsx b/ui/oko_common_ui/src/input/input.tsx
index c464005d8..73133e51e 100644
--- a/ui/oko_common_ui/src/input/input.tsx
+++ b/ui/oko_common_ui/src/input/input.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import cn from "classnames";
 
 import styles from "./input.module.scss";
@@ -17,7 +17,7 @@ export interface InputProps
   resetError?: () => void;
 }
 
-export const Input: React.FC<InputProps> = ({
+export const Input: FC<InputProps> = ({
   variant = "default",
   inputSize = "md",
   fullWidth = false,
diff --git a/ui/oko_common_ui/src/logo/logo.tsx b/ui/oko_common_ui/src/logo/logo.tsx
index ecbda5e6f..07972e8ae 100644
--- a/ui/oko_common_ui/src/logo/logo.tsx
+++ b/ui/oko_common_ui/src/logo/logo.tsx
@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import styles from "./logo.module.scss";
 import { OkoLogoIcon } from "@oko-wallet-common-ui/icons/oko_logo_icon";
 import type { Theme } from "@oko-wallet-common-ui/theme/theme_provider";
@@ -9,7 +11,7 @@ export interface LogoProps {
   theme?: Theme | null;
 }
 
-export const Logo: React.FC<LogoProps> = ({
+export const Logo: FC<LogoProps> = ({
   width = 58,
   height = 22,
   className,
diff --git a/ui/oko_common_ui/src/otp_input/otp_input.tsx b/ui/oko_common_ui/src/otp_input/otp_input.tsx
index 118d823e4..e24262a0e 100644
--- a/ui/oko_common_ui/src/otp_input/otp_input.tsx
+++ b/ui/oko_common_ui/src/otp_input/otp_input.tsx
@@ -1,8 +1,9 @@
-import React, {
+import {
   useState,
   useRef,
   type KeyboardEvent,
   type ClipboardEvent,
+  type FC,
 } from "react";
 import styles from "./otp_input.module.scss";
 
@@ -25,7 +26,7 @@ function isComplete(digits: string[], length: number): boolean {
   );
 }
 
-export const OtpInput: React.FC<OtpInputProps> = ({
+export const OtpInput: FC<OtpInputProps> = ({
   length,
   value,
   onChange,
diff --git a/ui/oko_common_ui/src/skeleton/skeleton.tsx b/ui/oko_common_ui/src/skeleton/skeleton.tsx
index 7b09c680d..af8260a5d 100644
--- a/ui/oko_common_ui/src/skeleton/skeleton.tsx
+++ b/ui/oko_common_ui/src/skeleton/skeleton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 
 import "./skeleton.scss";
 
@@ -9,7 +9,7 @@ interface SkeletonProps {
   className?: string;
 }
 
-export const Skeleton: React.FC<SkeletonProps> = ({
+export const Skeleton: FC<SkeletonProps> = ({
   width = "100%",
   height = "1em",
   borderRadius = "12px",
diff --git a/ui/oko_common_ui/src/table/table.tsx b/ui/oko_common_ui/src/table/table.tsx
index 1893dbee9..a9fc26e7c 100644
--- a/ui/oko_common_ui/src/table/table.tsx
+++ b/ui/oko_common_ui/src/table/table.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import cn from "classnames";
 
 import styles from "./table.module.scss";
@@ -32,7 +32,7 @@ export interface TableHeaderCellProps
   sortable?: boolean;
 }
 
-export const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
+export const Table: FC<React.PropsWithChildren<TableProps>> = ({
   variant = "default",
   size = "md",
   children,
@@ -64,7 +64,7 @@ export const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
   );
 };
 
-export const TableHead: React.FC<React.PropsWithChildren<TableHeadProps>> = ({
+export const TableHead: FC<React.PropsWithChildren<TableHeadProps>> = ({
   children,
   className,
   ...rest
@@ -76,7 +76,7 @@ export const TableHead: React.FC<React.PropsWithChildren<TableHeadProps>> = ({
   );
 };
 
-export const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
+export const TableBody: FC<React.PropsWithChildren<TableBodyProps>> = ({
   children,
   className,
   ...rest
@@ -88,7 +88,7 @@ export const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
   );
 };
 
-export const TableRow: React.FC<React.PropsWithChildren<TableRowProps>> = ({
+export const TableRow: FC<React.PropsWithChildren<TableRowProps>> = ({
   selected = false,
   children,
   className,
@@ -109,7 +109,7 @@ export const TableRow: React.FC<React.PropsWithChildren<TableRowProps>> = ({
   );
 };
 
-export const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
+export const TableCell: FC<React.PropsWithChildren<TableCellProps>> = ({
   align = "left",
   children,
   className,
@@ -124,7 +124,7 @@ export const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
   );
 };
 
-export const TableHeaderCell: React.FC<
+export const TableHeaderCell: FC<
   React.PropsWithChildren<TableHeaderCellProps>
 > = ({ align = "left", sortable = false, children, className, ...rest }) => {
   const headerClassName = cn(
diff --git a/ui/oko_common_ui/src/theme/theme_provider.tsx b/ui/oko_common_ui/src/theme/theme_provider.tsx
index 80d68d34d..8aefdfd1d 100644
--- a/ui/oko_common_ui/src/theme/theme_provider.tsx
+++ b/ui/oko_common_ui/src/theme/theme_provider.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import React, { createContext, type PropsWithChildren } from "react";
+import { createContext, type FC, type PropsWithChildren } from "react";
 
 export type Theme = "light" | "dark" | "system";
 
 export const ThemeContext = createContext<Theme>("system");
 
-export const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
+export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
   theme,
 }) => {
diff --git a/ui/oko_common_ui/src/toggle/toggle.tsx b/ui/oko_common_ui/src/toggle/toggle.tsx
index a70ccf50b..198e017fd 100644
--- a/ui/oko_common_ui/src/toggle/toggle.tsx
+++ b/ui/oko_common_ui/src/toggle/toggle.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import cn from "classnames";
 
 import styles from "./toggle.module.scss";
@@ -12,7 +12,7 @@ export interface ToggleProps {
   className?: string;
 }
 
-export const Toggle: React.FC<ToggleProps> = ({
+export const Toggle: FC<ToggleProps> = ({
   onChange,
   checked = false,
   disabled = false,
diff --git a/ui/oko_common_ui/tsconfig.json b/ui/oko_common_ui/tsconfig.json
index de4b67d7c..2c609d655 100644
--- a/ui/oko_common_ui/tsconfig.json
+++ b/ui/oko_common_ui/tsconfig.json
@@ -15,15 +15,10 @@
     "rootDir": ".",
     "jsx": "preserve",
     "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@oko-wallet-common-ui/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }