diff --git a/src/components/composite/Hero.tsx b/src/components/composite/Hero.tsx
index 2cc2607..b62b002 100644
--- a/src/components/composite/Hero.tsx
+++ b/src/components/composite/Hero.tsx
@@ -51,34 +51,24 @@ export default function Hero({
       <OverrideTheme mode="light">
         <Group
           className={`${
-            location?.pathname === "/" ||
-            location?.pathname === "/opportunities"
-              ? "bg-cover"
-              : "bg-main-6"
+            location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
           } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
           style={{
             backgroundImage:
-              location?.pathname === "/" ||
-              location?.pathname === "/opportunities"
+              location?.pathname === "/" || location?.pathname === "/opportunities"
                 ? `url('${config.images.hero}')`
                 : "none",
-          }}
-        >
+          }}>
           <Container>
             <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
               <Group className="items-center" size="sm">
                 <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
                   Home
                 </Button>
-                {breadcrumbs?.map((breadcrumb) => {
+                {breadcrumbs?.map(breadcrumb => {
                   if (breadcrumb.component) return <>{breadcrumb.component}</>;
                   return (
-                    <Button
-                      key={breadcrumb.link}
-                      to={breadcrumb.link}
-                      look="soft"
-                      size="xs"
-                    >
+                    <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
                       <Icon remix="RiArrowRightSLine" />
                       {breadcrumb.name}
                     </Button>
@@ -92,14 +82,14 @@ export default function Hero({
                       {!!icons && (
                         <Icons size="lg">
                           {icons?.length > 1
-                            ? icons?.map((icon) => (
+                            ? icons?.map(icon => (
                                 <Icon
                                   className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
                                   key={`${Object.values(icon)}`}
                                   {...icon}
                                 />
                               ))
-                            : icons?.map((icon) => (
+                            : icons?.map(icon => (
                                 <Icon
                                   className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
                                   key={`${Object.values(icon)}`}
@@ -122,11 +112,8 @@ export default function Hero({
                   {!!tags && <Group className="mb-lg">{tags}</Group>}
                 </Group>
                 {!!sideDatas && (
-                  <Group
-                    className="w-full lg:w-auto lg:flex-col mr-xl*2"
-                    size="lg"
-                  >
-                    {sideDatas.map((data) => (
+                  <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="lg">
+                    {sideDatas.map(data => (
                       <Group key={data.key} className="flex-col" size="xs">
                         <Text size={4} className="!text-main-12">
                           {data.data}
@@ -151,11 +138,7 @@ export default function Hero({
   );
 }
 
-export function defaultHeroSideDatas(
-  count: number,
-  maxApr: number,
-  dailyRewards: number
-) {
+export function defaultHeroSideDatas(count: number, maxApr: number, dailyRewards: number) {
   return [
     !!count && {
       data: (
@@ -184,5 +167,5 @@ export function defaultHeroSideDatas(
       label: "Max APR",
       key: uuidv4(),
     },
-  ].filter((data) => !!data);
+  ].filter(data => !!data);
 }
diff --git a/src/components/element/participate/Participate.tsx b/src/components/element/participate/Participate.tsx
index d4289c7..9a151f2 100644
--- a/src/components/element/participate/Participate.tsx
+++ b/src/components/element/participate/Participate.tsx
@@ -15,29 +15,17 @@ export type ParticipateProps = {
   displayLinks?: boolean;
 };
 
-export default function Participate({
-  opportunity,
-  displayOpportunity,
-  displayMode,
-  displayLinks,
-}: ParticipateProps) {
+export default function Participate({ opportunity, displayOpportunity, displayMode, displayLinks }: ParticipateProps) {
   const [tokenAddress, setTokenAddress] = useState();
   const [amount, setAmount] = useState<bigint>(0n);
-  const [mode] = useState<"deposit" | "withdraw">(
-    typeof displayMode === "string" ? displayMode : "deposit"
-  );
+  const [mode] = useState<"deposit" | "withdraw">(typeof displayMode === "string" ? displayMode : "deposit");
 
   const {
     target,
     balance,
     token: inputToken,
     loading,
-  } = useParticipate(
-    opportunity.chainId,
-    opportunity.protocol?.id,
-    opportunity.identifier,
-    tokenAddress
-  );
+  } = useParticipate(opportunity.chainId, opportunity.protocol?.id, opportunity.identifier, tokenAddress);
   const { link } = useOpportunity(opportunity);
 
   // const switchModeButton = useMemo(() => {
@@ -70,8 +58,7 @@ export default function Participate({
                 to={opportunity.protocol?.url}
                 disabled={!opportunity.protocol?.url}
                 size="md"
-                look="base"
-              >
+                look="base">
                 Visit {opportunity.protocol.name}
                 <Icon remix="RiArrowRightUpLine" />
               </Button>
@@ -87,36 +74,25 @@ export default function Participate({
       <Group>
         <Input.BigInt
           className="w-full"
-          state={[amount, (a) => setAmount(a)]}
+          state={[amount, a => setAmount(a)]}
           base={inputToken?.decimals ?? 18}
           header={
             <Group className="justify-between w-full">
               <Text>{mode === "deposit" ? "Supply" : "Withdraw"}</Text>
               <Group>
                 <Text>Balance</Text>
-                {inputToken && (
-                  <Value format="$0,0.#">
-                    {Fmt.toPrice(inputToken.balance, inputToken)}
-                  </Value>
-                )}
+                {inputToken && <Value format="$0,0.#">{Fmt.toPrice(inputToken.balance, inputToken)}</Value>}
                 <PrimitiveTag
                   onClick={() => {
                     setAmount(BigInt(inputToken?.balance ?? "0"));
                   }}
-                  size="xs"
-                >
+                  size="xs">
                   Max
                 </PrimitiveTag>
               </Group>
             </Group>
           }
-          suffix={
-            <TokenSelect
-              balances
-              state={[tokenAddress, setTokenAddress]}
-              tokens={balance}
-            />
-          }
+          suffix={<TokenSelect balances state={[tokenAddress, setTokenAddress]} tokens={balance} />}
           placeholder="0.0"
         />
         {/* biome-ignore lint/complexity/noUselessFragments: <explanation> */}