diff --git a/public/img/s2/icon-spin-gradient.svg b/public/img/s2/icon-spin-gradient.svg
new file mode 100644
index 00000000..e2530f35
--- /dev/null
+++ b/public/img/s2/icon-spin-gradient.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM15.6666 4.61156C15.96 7.84781 14.5313 9.3225 12.6563 10.6509C12.4453 8.35594 11.865 5.98219 9.05907 4.29281C10.123 3.88627 11.2596 3.70471 12.3972 3.75957C13.5347 3.81443 14.6486 4.10453 15.6684 4.61156H15.6666ZM3.76688 12.5194C6.42375 10.6444 8.41407 11.1431 10.5047 12.1078C8.625 13.4381 6.86157 15.1275 6.79875 18.3994C5.91466 17.6818 5.18883 16.7889 4.66701 15.7769C4.14518 14.7649 3.8387 13.6557 3.76688 12.5194ZM16.5638 18.8691C13.6153 17.505 13.0509 15.5334 12.8409 13.2441C14.0334 13.7934 15.3075 14.2519 16.7128 14.2519C17.775 14.2519 18.9122 13.9894 20.1469 13.3069C19.9647 14.4307 19.5525 15.5049 18.9359 16.462C18.3193 17.4191 17.5118 18.2386 16.5638 18.8691Z" fill="url(#paint0_linear_10445_4987)"/>
+<defs>
+<linearGradient id="paint0_linear_10445_4987" x1="2.25" y1="12" x2="21.75" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BA790"/>
+<stop offset="0.503103" stop-color="#FBFBFB" stop-opacity="0.6"/>
+<stop offset="1" stop-color="#9747FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/api/index.ts b/src/api/index.ts
index 65033954..e96ed85b 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -3,15 +3,6 @@ import { user } from "@nextui-org/react";
 import axios, { AxiosResponse } from "axios";
 import qs from "qs";
 
-type Response = {
-  status: string;
-  message: string;
-  result?: any;
-  error?: any;
-  data?: any;
-  statusCode?: number;
-};
-
 const isProd = import.meta.env.PROD;
 const apiBaseURL = import.meta.env.VITE_API_BASE_URL;
 
@@ -23,6 +14,15 @@ export const BASE_URL_TWITTER = `${BASE_URL}/twitter`;
 export const BASE_URL_LRT_POINTS = `${BASE_URL}/lrt-points`;
 export const BASE_URL_QUEST = `${BASE_URL}/quest-api`;
 
+export interface APIResponse<T = any> {
+  status: string;
+  message: string;
+  result?: T;
+  error?: any;
+  data?: T;
+  statusCode?: number;
+}
+
 export type BindInviteCodeWithAddressParams = {
   address: string;
   code?: string | null;
@@ -31,7 +31,7 @@ export type BindInviteCodeWithAddressParams = {
 };
 export const bindInviteCodeWithAddress = (
   data: BindInviteCodeWithAddressParams
-): Promise<Response> => {
+): Promise<APIResponse> => {
   console.log(data);
   if (!data.code) {
     delete data.code;
@@ -41,7 +41,7 @@ export const bindInviteCodeWithAddress = (
   });
 };
 
-export const checkInviteCode = (code: string): Promise<Response> => {
+export const checkInviteCode = (code: string): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/validCode`, {
     params: {
       code,
@@ -49,13 +49,13 @@ export const checkInviteCode = (code: string): Promise<Response> => {
   });
 };
 
-export const getRemainDrawCount = (address: string): Promise<Response> => {
+export const getRemainDrawCount = (address: string): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/draw/nft/remain`, {
     params: { address },
   });
 };
 
-export const drawTrademarkNFT = (address: string): Promise<Response> => {
+export const drawTrademarkNFT = (address: string): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/draw/nft`, {
     address,
   });
@@ -63,7 +63,7 @@ export const drawTrademarkNFT = (address: string): Promise<Response> => {
 
 export const getRemainMysteryboxDrawCount = (
   address: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/draw/mysterybox/remain`, {
     params: { address },
   });
@@ -71,32 +71,32 @@ export const getRemainMysteryboxDrawCount = (
 
 export const getRemainMysteryboxDrawCountV2 = (
   address: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/draw/mysterybox/v2/remain`, {
     params: { address },
   });
 };
 
 // for mint box params
-export const mintMysteryboxNFT = (address: string): Promise<Response> => {
+export const mintMysteryboxNFT = (address: string): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/mint/mysterybox`, {
     address,
   });
 };
 
-export const mintMysteryboxNFTV2 = (address: string): Promise<Response> => {
+export const mintMysteryboxNFTV2 = (address: string): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/mint/mysterybox/v2`, {
     address,
   });
 };
 
-export const openMysteryboxNFT = (address: string): Promise<Response> => {
+export const openMysteryboxNFT = (address: string): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/open/mysterybox`, {
     address,
   });
 };
 
-export const openMysteryboxNFTV2 = (address: string): Promise<Response> => {
+export const openMysteryboxNFTV2 = (address: string): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/open/mysterybox/v2`, {
     address,
   });
@@ -104,7 +104,7 @@ export const openMysteryboxNFTV2 = (address: string): Promise<Response> => {
 
 export const getRemainMysteryboxOpenableCount = (
   address: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/open/mysterybox/remain`, {
     params: { address },
   });
@@ -112,64 +112,64 @@ export const getRemainMysteryboxOpenableCount = (
 
 export const getRemainMysteryboxOpenableCountV2 = (
   address: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/open/mysterybox/v2/remain`, {
     params: { address },
   });
 };
 
-export const getMintSignature = (address: string): Promise<Response> => {
+export const getMintSignature = (address: string): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/validate/nft`, {
     params: { address, projectId: "NOVA-SBT-1" },
   });
 };
-export const getInvite = (address: string): Promise<Response> =>
+export const getInvite = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/${address}`);
 
-export const getReferrer = (address: string): Promise<Response> =>
+export const getReferrer = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/referrer/${address}`);
 
 export const getDepositETHThreshold = (): Promise<{ ethAmount: number }> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getDepositEthThreshold`);
 
-export const getAccounTvl = (address: string): Promise<Response> =>
+export const getAccounTvl = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccounTvl`, {
     params: { address },
   });
 
-export const getAccountPoint = (address: string): Promise<Response> =>
+export const getAccountPoint = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccountPoint`, {
     params: { address },
   });
 
-export const getTotalTvl = (): Promise<Response> =>
+export const getTotalTvl = (): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getTotalTvl`);
-export const getActiveAccounts = (): Promise<Response> =>
+export const getActiveAccounts = (): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/getActiveAccounts`);
 
-export const getAccountTvl = (address: string): Promise<Response> =>
+export const getAccountTvl = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccounTvl`, {
     params: {
       address,
     },
   });
 
-export const getGroupTvl = (address: string): Promise<Response> =>
+export const getGroupTvl = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getGroupTvl`, {
     params: {
       address,
     },
   });
 
-export const getTotalTvlByToken = (): Promise<Response> =>
+export const getTotalTvlByToken = (): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getTotalTvlByToken`);
 
-export const getReferralTvl = (address: string): Promise<Response> =>
+export const getReferralTvl = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getReferralTvl`, {
     params: { address },
   });
 
-export const getAccountTwitter = (params: any): Promise<Response> =>
+export const getAccountTwitter = (params: any): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/invite/account/twitter`, params);
 
 export type SupportToken = {
@@ -202,7 +202,7 @@ export const getAccountRefferalsTVL = (
   address: string,
   page = 1,
   limit = 100
-): Promise<Response> =>
+): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccountRefferalsTVL`, {
     params: { address, page, limit },
   });
@@ -219,12 +219,12 @@ export type PageParams = {
   limit: number;
 };
 
-export const getAccountsRank = (params?: PageParams): Promise<Response> =>
+export const getAccountsRank = (params?: PageParams): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccountsRank`, {
     params,
   });
 
-export const getAccountRank = (address: string): Promise<Response> =>
+export const getAccountRank = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccountRank`, {
     params: { address },
   });
@@ -258,7 +258,7 @@ export const getExplorerTokenTvl = (
 export const validTwitter = (
   twitterHandler: string,
   address?: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.get(`${BASE_URL_API}/invite/validTwitter2`, {
     params: {
       twitterHandler,
@@ -292,7 +292,7 @@ export type RegisterAccountParams = {
 
 export const registerAccount = (
   data: RegisterAccountParams
-): Promise<Response> => {
+): Promise<APIResponse> => {
   console.log(data);
   if (!data.code) {
     delete data.code;
@@ -306,7 +306,7 @@ export const registerAccountByBridge = (data: {
   address: string;
   code: string;
   siganture: string;
-}): Promise<Response> =>
+}): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/invite/register/account/byBridge`, { ...data });
 
 export type AccessTokenParams = {
@@ -346,17 +346,17 @@ export const getTwitterUser = (
     },
   });
 
-export const checkOkx = (address: string): Promise<Response> =>
+export const checkOkx = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/check/okx`, {
     params: { addressList: [address] },
   });
 
-export const visitReward = (address: string): Promise<Response> =>
+export const visitReward = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/visit/reward`, {
     params: { address },
   });
 
-export const okxVisitTask = (address: string): Promise<Response> =>
+export const okxVisitTask = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/task/okx/visit/task`, { params: { address } });
 
 export const getEigenlayerPoints = (address: string) =>
@@ -411,12 +411,12 @@ export const getRenzoPoints = (address: string): Promise<RenzoResponse> =>
     params: { address },
   });
 
-export const getTradeMarkRank = (address: string): Promise<Response> =>
+export const getTradeMarkRank = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/referrer/tradeMark/balance/rank`, {
     params: { address },
   });
 
-export const getTopInviteAndRandom = (date?: string): Promise<Response> =>
+export const getTopInviteAndRandom = (date?: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/referrer/daily/topInviteAndRandom`, {
     params: { date },
   });
@@ -469,15 +469,15 @@ export const getLinkswapNovaPoints = (
     params: { address },
   });
 
-export const getRoyaltyBooster = (address: string): Promise<Response> =>
+export const getRoyaltyBooster = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_POINTS}/addressTokenTvl/getAccountLoyaltyBooster`, {
     params: { address },
   });
 
-export const getNFTLashin = (address: string): Promise<Response> =>
+export const getNFTLashin = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/nft/user/recruitment`, { params: { address } });
 
-export const postNFTLashin = (address: string): Promise<Response> =>
+export const postNFTLashin = (address: string): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/nft/user/recruitment?address=${address}`);
 
 export interface RsethPointsResponse {
@@ -504,7 +504,7 @@ export const getRsethPoints = (address: string): Promise<RsethPointsResponse> =>
     params: { address },
   });
 
-export const getUserTvl = (address: string): Promise<Response> =>
+export const getUserTvl = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/user/tvl`, {
     params: { address },
   });
@@ -512,7 +512,7 @@ export const getUserTvl = (address: string): Promise<Response> =>
 export const bindTwitter = (
   address: string,
   accessToken: string
-): Promise<Response> => {
+): Promise<APIResponse> => {
   return http.post(`${BASE_URL_API}/invite/bind/twitter`, {
     address,
     accessToken,
@@ -535,7 +535,7 @@ export const getNovaProjectPoints = (
     params: { address, project },
   });
 
-export const checkBridge = async (address: string): Promise<Response> =>
+export const checkBridge = async (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/invite/check/bridge`, { params: { address } });
 
 export interface BridgePoints {
@@ -548,23 +548,25 @@ export const getBridgePoints = (name: string): Promise<BridgePoints> =>
     params: { name },
   });
 
-export const checkWinnerAddress = (address: string): Promise<Response> =>
+export const checkWinnerAddress = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/referrer/checkWinnerAddress`, {
     params: { address },
   });
 
-export const getEcoRamain = (address: string): Promise<Response> =>
+export const getEcoRamain = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/nft/ecology/nft/remain`, {
     params: { address },
   });
 
-export const getEcoRank = (): Promise<Response> =>
+export const getEcoRank = (): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/nft/ecology/rank`);
 
-export const postEcoDraw = (address: string): Promise<Response> =>
+export const postEcoDraw = (address: string): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/nft/ecology/nft/draw?address=${address}`);
 
-export const getMemeMysteryboxReward = (address: string): Promise<Response> =>
+export const getMemeMysteryboxReward = (
+  address: string
+): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/meme/meme/mysterybox/reward`, {
     params: { address },
   });
@@ -572,18 +574,18 @@ export const getMemeMysteryboxReward = (address: string): Promise<Response> =>
 export const authLogin = (data: {
   address: string;
   signature: string;
-}): Promise<Response> =>
+}): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/auth/login`, {
     ...data,
   });
 
-export const getPointsDetail = (): Promise<Response> =>
+export const getPointsDetail = (): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/referrer/points/detail`);
 
-export const getMystery3Reamin = (address: string): Promise<Response> =>
+export const getMystery3Reamin = (address: string): Promise<APIResponse> =>
   http.get(`${BASE_URL_API}/nft/mystery3/remain`, { params: { address } });
 
-export const drawMystery3 = (address: string): Promise<Response> =>
+export const drawMystery3 = (address: string): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/nft/mystery3/draw?address=${address}`);
 
 export interface NovaCategoryUserPoints {
@@ -698,7 +700,7 @@ export const getTvlCategoryMilestone =
   (): Promise<TvlCategoryMilestoneResponse> =>
     http.get(`${BASE_URL_LRT_POINTS}/tvl/category/milestone`);
 
-export const modifyUsername = (userName: string): Promise<Response> =>
+export const modifyUsername = (userName: string): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/invite/modify/username`, { userName });
 
 export interface CategoryListItem {
@@ -735,12 +737,15 @@ export const getCategoryList = (
     }
   );
 
-export const dailyOpen = (): Promise<Response> =>
+export const dailyOpen = (): Promise<APIResponse> =>
   http.post(`${BASE_URL_API}/invite/checkin/open`);
 
 export const dailySkipMint = (): Promise<Response> =>
   http.post(`${BASE_URL_API}/invite/skip`);
 
+export const protocolSkipMint = (projectName: string): Promise<Response> =>
+  http.post(`${BASE_URL_API}/invite/project/skip?projectName=${projectName}`);
+
 export interface DailyCheckinHistoryData {
   date: string;
   expired: boolean;
@@ -822,3 +827,14 @@ interface CategoryZKLResponse {
 export const getCategoryZKL = (): Promise<CategoryZKLResponse> => {
   return http.get(`${BASE_URL_LRT_POINTS}/tvl/category/milestone/s2-1`);
 };
+
+export interface PortocolSpinItem {
+  projectName: string;
+  remainSpinNum: number;
+}
+
+export const getProtocolSpin = (): Promise<APIResponse<PortocolSpinItem[]>> =>
+  http.get(`${BASE_URL_API}/invite/protocol/spin`);
+
+export const openProtocolSpin = (projectName: string): Promise<APIResponse> =>
+  http.post(`${BASE_URL_API}/invite/protocol/open?projectName=${projectName}`);
diff --git a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx
index 75c299ec..0e479693 100644
--- a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx
+++ b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx
@@ -12,7 +12,12 @@ import {
 import { UseDisclosureReturn } from "@nextui-org/use-disclosure";
 import Marquee from "@/components/Marquee";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
-import { dailyOpen, dailySkipMint } from "@/api";
+import {
+  dailyOpen,
+  openProtocolSpin,
+  dailySkipMint,
+  protocolSkipMint,
+} from "@/api";
 import { sleep } from "@/utils";
 import useNovaNFT, {
   MysteryboxMintParams,
@@ -31,6 +36,8 @@ interface IProps {
   modalInstance: UseDisclosureReturn;
   onDrawed: () => void;
   remain?: number;
+  type?: "daily" | "protocol";
+  projectName?: string;
 }
 export const PrizeItems = [
   {
@@ -77,7 +84,7 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
   const { updateFactor } = useUpdateNftBalanceStore();
 
   const { sendTrademarkMintTx } = useNovaNFT();
-  const { modalInstance, onDrawed, remain } = props;
+  const { modalInstance, onDrawed, remain, type, projectName } = props;
   const drawRef = useRef<{ start: (target: number) => void }>();
   const [mintResult, setMintResult] = useState<{
     name: string;
@@ -110,7 +117,10 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
       modalInstance.onOpen();
     }
     setSpinging(true);
-    const res = await dailyOpen();
+    const res =
+      type === "protocol" && projectName
+        ? await openProtocolSpin(projectName)
+        : await dailyOpen();
     const tokenId = res.result.tokenId as number;
     const prizeId = PRIZE_MAP[tokenId];
     onDrawed(); // update remain times
@@ -135,7 +145,7 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
       mintResultModal.onOpen();
     }
     setSpinging(false);
-    if (!remain || remain <= 1) {
+    if (!remain && !mintParams) {
       modalInstance.onClose();
     }
   }, [
@@ -160,7 +170,7 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
       onDrawed(); // update remain times after mint tx
       setMintParams(undefined);
       updateFactor();
-    } catch (e) {
+    } catch (e: any) {
       console.log(e);
       setMintStatus(MintStatus.Failed);
       if (e.message) {
@@ -182,7 +192,9 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
   ]);
 
   const handleSkip = async () => {
-    await dailySkipMint();
+    type === "protocol" && projectName
+      ? await protocolSkipMint(projectName)
+      : await dailySkipMint();
     setMintParams(undefined);
     mintResultModal.onClose();
     onDrawed(); // update remain times after skip
@@ -201,9 +213,11 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
     } else if (minting) {
       return "Start Minting";
     } else {
-      return `Spin Your Daily Roulette (${remain})`;
+      return `Spin Your ${
+        type === "protocol" ? "Protocol" : "Daily"
+      } Roulette (${remain})`;
     }
-  }, [isInvaidChain, minting, remain]);
+  }, [isInvaidChain, minting, remain, type]);
 
   return (
     <>
@@ -218,16 +232,15 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
           {() => (
             <>
               <ModalHeader className="flex flex-col gap-1">
-                Daily Roulette
+                {type === "protocol" ? "Protocol Roulette" : "Daily Roulette"}
               </ModalHeader>
               <ModalBody>
                 <div className="flex flex-col items-center">
                   <Divide />
                   <p className="text-neutral font-chakra text-[14px] mt-4 ">
-                    On a daily basis, each user has x times of opportunity to
-                    participate in a Roulette game on the campaign page. Users
-                    have the probability to win trademarks and Lynks. The
-                    minimum reward will be 1 Nova Points.
+                    {type === "protocol"
+                      ? "Congratulations! You now have the chance to spin the roulette and win rewards!"
+                      : "On a daily basis, each user has x times of opportunity to participate in a Roulette game on the campaign page. Users have the probability to win trademarks and Lynks. The minimum reward will be 1 Nova Points."}
                   </p>
                 </div>
                 <Marquee
@@ -439,11 +452,11 @@ const SpinButton = styled(Button)`
   box-shadow: 0px 2.306px 18.446px 0px rgba(0, 0, 0, 0.15),
     0px 0px 13.835px 0px rgba(255, 255, 255, 0.75) inset;
   height: 54px;
-  gap: 8px;
+  gap: 4px;
   color: #fff;
   text-align: center;
   font-family: Satoshi;
-  font-size: 18.446px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 900;
   line-height: normal;
@@ -463,7 +476,7 @@ const SpinPointer = styled.div`
 const ModalContainer = styled(Modal)`
   background: url("img/s2/bg-spin-container.svg") no-repeat;
   background-size: cover;
-  width: 400px;
+  width: 428px;
   .prize-text {
     color: var(--Neutral-2, rgba(251, 251, 251, 0.6));
     font-family: Satoshi;
diff --git a/src/components/DashboardS2/Tabs/EcoDApps.tsx b/src/components/DashboardS2/Tabs/EcoDApps.tsx
index 15b7a944..1ab5c74b 100644
--- a/src/components/DashboardS2/Tabs/EcoDApps.tsx
+++ b/src/components/DashboardS2/Tabs/EcoDApps.tsx
@@ -2,8 +2,10 @@ import {
   NovaCategoryPoints,
   NovaCategoryUserPoints,
   NovaProjectTotalPoints,
+  PortocolSpinItem,
   TvlCategoryMilestone,
   getNovaProjectTotalPoints,
+  getProtocolSpin,
 } from "@/api";
 import useNovaPoints from "@/hooks/useNovaPoints";
 import { formatNumberWithUnit } from "@/utils";
@@ -24,6 +26,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { NovaPointsListItem } from "@/pages/DashboardS2/index2";
 import SectorHeader from "./SectorHeader";
+import DailyDrawModal from "../DailyRoulette/DailyDrawModal";
 
 const Container = styled.div`
   .holding-title {
@@ -245,6 +248,8 @@ interface EcoDAppItem {
     iconURL: string;
   }[];
   holdingPoints: NovaProjectTotalPoints;
+  remainSpinNum?: number;
+  projectName: string;
   totalPoints?: NovaProjectTotalPoints;
   details: {
     booster: string | ReactNode;
@@ -260,9 +265,11 @@ interface EcoDAppItem {
 const EcoDApp = (props: {
   data: EcoDAppItem;
   handleLink: (link: string) => void;
+  onDrawed: () => void;
 }) => {
-  const { data, handleLink } = props;
+  const { data, handleLink, onDrawed } = props;
   const [isOpen, setIsOpen] = useState(false);
+  const modal = useDisclosure();
 
   const allocatedTooltips = useMemo(() => {
     const protocolPoints = [
@@ -293,157 +300,206 @@ const EcoDApp = (props: {
     };
   }, [data]);
 
-  return (
-    <div className="row mb-[24px] overflow-hidden">
-      <div className="flex items-center cursor-pointer">
-        <div className="list-content-item flex items-center gap-[10px] w-1/5">
-          <img
-            src={data.iconURL}
-            alt=""
-            className="w-[55px] h-[56px] rounded-full block"
-          />
-          <div>
-            <div
-              className="symbol flex items-center gap-[4px]"
-              onClick={(e) => {
-                handleLink(data.link);
-              }}
-            >
-              <span className="whitespace-nowrap">{data.name}</span>
-              <img src="/img/icon-ecolink.svg" alt="" width={16} height={16} />
-            </div>
-            <div className="name mt-[5px]">{data.handler}</div>
-          </div>
-        </div>
-        <div
-          className="row-items flex items-center gap-[10px] w-4/5"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <div className="col-line"></div>
-          <div className="list-content-item text-center flex items-center justify-center">
-            <Tooltip
-              classNames={{
-                content:
-                  "py-[20px] px-[16px] text-[14px] text-[#FBFBFB99] bg-[#000811]",
-              }}
-              content={data.details[0].booster}
-            >
-              <GradientBox>{data.rewards}</GradientBox>
-            </Tooltip>
-          </div>
-          <div className="col-line"></div>
+  const handleSpinModal = (e: React.MouseEvent<HTMLElement>) => {
+    if (!data.remainSpinNum) {
+      return;
+    }
+    e.stopPropagation();
+    modal.onOpen();
+  };
 
-          <div className="list-content-item text-center flex items-center justify-center gap-[4px]">
-            {data?.rewardsIcon?.map((item, index) => (
-              <Tooltip content={item.name} key={index}>
+  return (
+    <>
+      <div className="row mb-[24px] overflow-hidden">
+        <div className="flex items-center cursor-pointer">
+          <div className="list-content-item flex items-center gap-[10px] w-1/5">
+            <img
+              src={data.iconURL}
+              alt=""
+              className="w-[55px] h-[56px] rounded-full block"
+            />
+            <div>
+              <div
+                className="symbol flex items-center gap-[4px]"
+                onClick={(e) => {
+                  handleLink(data.link);
+                }}
+              >
+                <span className="whitespace-nowrap">{data.name}</span>
                 <img
-                  src={item.iconURL}
-                  className="min-w-[32px] w-[32px] rounded-full"
+                  src="/img/icon-ecolink.svg"
+                  alt=""
+                  width={16}
+                  height={16}
                 />
-              </Tooltip>
-            ))}
+              </div>
+              <div className="name mt-[5px]">{data.handler}</div>
+            </div>
           </div>
-          <div className="col-line"></div>
+          <div
+            className="row-items flex items-center w-4/5"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <div className="col-line"></div>
+            <div className="list-content-item text-center flex items-center justify-center">
+              <Tooltip
+                classNames={{
+                  content:
+                    "py-[20px] px-[16px] text-[14px] text-[#FBFBFB99] bg-[#000811]",
+                }}
+                content={data.details[0].booster}
+              >
+                <GradientBox>{data.rewards}</GradientBox>
+              </Tooltip>
+            </div>
+            <div className="col-line"></div>
 
-          <div className="list-content-item text-center">
-            <Tooltip
-              classNames={{
-                content: "py-[20px] px-[16px] text-[14px] bg-[#000811]",
-              }}
-              content={
-                <div className="min-w-[200px]">
-                  <div className="text-[#999] text-[14px] font-[500]">
-                    Your Allocated Points
-                  </div>
-                  {allocatedTooltips.yourPoints.map((item, index) => (
-                    <div
-                      className="flex items-center justify-between text-[#fff] text-[14px] font-[500]"
-                      key={index}
-                    >
-                      <span>{item.label}</span>
-                      <span>{item.value}</span>
-                    </div>
-                  ))}
+            <div className="list-content-item text-center flex items-center justify-center gap-[4px]">
+              {data?.rewardsIcon?.map((item, index) => (
+                <Tooltip content={item.name} key={index}>
+                  <img
+                    src={item.iconURL}
+                    className="min-w-[32px] w-[32px] rounded-full"
+                  />
+                </Tooltip>
+              ))}
+            </div>
+            <div className="col-line"></div>
 
-                  <div className="mt-[18px] text-[#999] text-[14px] font-[500]">
-                    Protocol Allocated Points
-                  </div>
+            <div className="list-content-item text-center">
+              <Tooltip
+                classNames={{
+                  content: "py-[20px] px-[16px] text-[14px] bg-[#000811]",
+                }}
+                content={
+                  <div className="min-w-[200px]">
+                    <div className="text-[#999] text-[14px] font-[500]">
+                      Your Allocated Points
+                    </div>
+                    {allocatedTooltips.yourPoints.map((item, index) => (
+                      <div
+                        className="flex items-center justify-between text-[#fff] text-[14px] font-[500]"
+                        key={index}
+                      >
+                        <span>{item.label}</span>
+                        <span>{item.value}</span>
+                      </div>
+                    ))}
 
-                  {allocatedTooltips.protocolPoints.map((item, index) => (
-                    <div
-                      className="flex items-center justify-between text-[#fff] text-[14px] font-[500]"
-                      key={index}
-                    >
-                      <span>{item.label}</span>
-                      <span>{item.value}</span>
+                    <div className="mt-[18px] text-[#999] text-[14px] font-[500]">
+                      Protocol Allocated Points
                     </div>
-                  ))}
-                </div>
-              }
-            >
-              <div>
-                {formatNumberWithUnit(
-                  data.holdingPoints.ecoPoints +
-                    data.holdingPoints.referralPoints
-                )}
-                /
-                <span className="opacity-40">
+
+                    {allocatedTooltips.protocolPoints.map((item, index) => (
+                      <div
+                        className="flex items-center justify-between text-[#fff] text-[14px] font-[500]"
+                        key={index}
+                      >
+                        <span>{item.label}</span>
+                        <span>{item.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                }
+              >
+                <div>
                   {formatNumberWithUnit(
-                    (data.totalPoints?.ecoPoints || 0) +
-                      (data.totalPoints?.referralPoints || 0)
+                    data.holdingPoints.ecoPoints +
+                      data.holdingPoints.referralPoints
                   )}
-                </span>
-              </div>
-            </Tooltip>
-          </div>
-          <div className="col-line"></div>
+                  /
+                  <span className="opacity-40">
+                    {formatNumberWithUnit(
+                      (data.totalPoints?.ecoPoints || 0) +
+                        (data.totalPoints?.referralPoints || 0)
+                    )}
+                  </span>
+                </div>
+              </Tooltip>
+            </div>
+            <div className="col-line"></div>
 
-          <div className="list-content-item  flex justify-end items-center gap-[10px]">
-            {/* <span className="action">Action:</span> */}
-            <div className="flex items-center gap-[4px] cursor-pointer select-none">
-              <GradientText className="participate">How to earn</GradientText>
-              <img src="/img/icon-ecolink2.svg" alt="" width={16} height={16} />
+            <div className="list-content-item flex justify-center items-center">
+              {data.projectName !== "orbiter" &&
+              data.projectName !== "symbiosis" &&
+              data.projectName !== "meson" ? (
+                data.remainSpinNum === 0 ? (
+                  <GradientText>Spined</GradientText>
+                ) : (
+                  <div
+                    className={`px-[8px] py-[4px] bg-[#282828] rounded-[4px] flex justify-center items-center gap-[8px] ${
+                      !data.remainSpinNum
+                        ? "cursor-not-allowed opacity-50"
+                        : "cursor-pointer"
+                    }`}
+                    onClick={handleSpinModal}
+                  >
+                    <img
+                      src="/img/s2/icon-spin-gradient.svg"
+                      alt=""
+                      width={24}
+                      height={24}
+                      className="min-w-[24px]"
+                    />
+                    <GradientText>Spin</GradientText>
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+            </div>
+
+            <div className="list-content-item  flex justify-end items-center">
+              {/* <span className="action">Action:</span> */}
+              <div className="flex items-center gap-[4px] cursor-pointer select-none">
+                <GradientText className="participate">How to earn</GradientText>
+                <img
+                  src="/img/icon-ecolink2.svg"
+                  alt=""
+                  width={16}
+                  height={16}
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      {/* <div className="row-line"></div> */}
-      {isOpen && (
-        <DetailBox className="w-full mt-[4px] px-[7px]">
-          {data.details.map((detail, index) => (
-            <div
-              className={`detail-row mb-[8px] flex justify-between ${
-                index === data.details.length - 1 ? "rounded-bottom" : ""
-              }`}
-              key={index}
-            >
-              <div className="detail-item min-w-[440px] w-[440px]">
-                <div className="detail-label">Booster</div>
-                <div className="detail-value">{detail.booster}</div>
-              </div>
-              <div className="detail-item min-w-[480px] w-[480px]">
-                <div className="detail-label">Description</div>
-                <div className="detail-value">
-                  {detail.description}
+        {/* <div className="row-line"></div> */}
+        {isOpen && (
+          <DetailBox className="w-full mt-[4px] px-[7px]">
+            {data.details.map((detail, index) => (
+              <div
+                className={`detail-row mb-[8px] flex justify-between ${
+                  index === data.details.length - 1 ? "rounded-bottom" : ""
+                }`}
+                key={index}
+              >
+                <div className="detail-item min-w-[440px] w-[440px]">
+                  <div className="detail-label">Booster</div>
+                  <div className="detail-value">{detail.booster}</div>
+                </div>
+                <div className="detail-item min-w-[480px] w-[480px]">
+                  <div className="detail-label">Description</div>
+                  <div className="detail-value">
+                    {detail.description}
 
-                  {detail?.descriptionTooltip && (
-                    <Tooltip
-                      content={detail.descriptionTooltip}
-                      classNames={{
-                        content:
-                          "max-w-[600px] py-[20px] px-[16px] text-[14px] text-[#FBFBFB99] bg-[#000811]",
-                      }}
-                    >
-                      <img
-                        src="/img/icon-info-2.svg"
-                        alt=""
-                        className="w-[20px] h-[20px] inline-block"
-                      />
-                    </Tooltip>
-                  )}
+                    {detail?.descriptionTooltip && (
+                      <Tooltip
+                        content={detail.descriptionTooltip}
+                        classNames={{
+                          content:
+                            "max-w-[600px] py-[20px] px-[16px] text-[14px] text-[#FBFBFB99] bg-[#000811]",
+                        }}
+                      >
+                        <img
+                          src="/img/icon-info-2.svg"
+                          alt=""
+                          className="w-[20px] h-[20px] inline-block"
+                        />
+                      </Tooltip>
+                    )}
+                  </div>
                 </div>
-              </div>
-              <div className="detail-item text-right  w-full">
+
                 <div className="detail-label">Action</div>
                 {detail.actionLinks ? (
                   <Dropdown>
@@ -494,11 +550,19 @@ const EcoDApp = (props: {
                   </div>
                 )}
               </div>
-            </div>
-          ))}
-        </DetailBox>
-      )}
-    </div>
+            ))}
+          </DetailBox>
+        )}
+      </div>
+      <DailyDrawModal
+        key={data.name}
+        modalInstance={modal}
+        onDrawed={onDrawed}
+        remain={data.remainSpinNum}
+        type="protocol"
+        projectName={data.projectName}
+      />
+    </>
   );
 };
 
@@ -561,6 +625,25 @@ export default function EcoDApps({
       referralPoints: data?.refPoints || 0,
     };
   };
+
+  const [spinList, setSpinList] = useState<PortocolSpinItem[]>([]);
+
+  const getSpin = async () => {
+    const { result } = await getProtocolSpin();
+    console.log("getProtocolSpin", result);
+    if (result) {
+      setSpinList(result);
+    }
+  };
+
+  const getSpinByProject = (project: string) => {
+    const data = spinList.find((item) => item.projectName === project);
+    return {
+      project,
+      remainSpinNum: data?.remainSpinNum,
+    };
+  };
+
   const ecoDAppsList = useMemo(() => {
     // const novaswap = geNovaCategoryUserPointsByProject("novaswap");
     const izumi = geNovaCategoryUserPointsByProject("izumi");
@@ -593,6 +676,8 @@ export default function EcoDApps({
         ],
         holdingPoints: getHoldingPointsByProject("nowaswap"),
         totalPoints: getTotalPointsByProject("novaswap"),
+        remainSpinNum: getSpinByProject("novaswap").remainSpinNum,
+        projectName: "novaswap",
         details: [
           {
             booster: (
@@ -621,6 +706,8 @@ export default function EcoDApps({
         ],
         holdingPoints: getHoldingPointsByProject("nowaswap"),
         totalPoints: getTotalPointsByProject("novaswap"),
+        remainSpinNum: getSpinByProject("novaswap").remainSpinNum,
+        projectName: "novaswap",
         details: [
           {
             booster: (
@@ -657,9 +744,10 @@ export default function EcoDApps({
             iconURL: "/img/icon-rewards-layerbank.svg",
           },
         ],
-
         holdingPoints: getHoldingPointsByProject("layerbank"),
         totalPoints: getTotalPointsByProject("layerbank"),
+        remainSpinNum: getSpinByProject("layerbank").remainSpinNum,
+        projectName: "layerbank",
         details: [
           {
             booster: (
@@ -690,6 +778,8 @@ export default function EcoDApps({
         ],
         holdingPoints: getHoldingPointsByProject("logx"),
         totalPoints: getTotalPointsByProject("logx"),
+        remainSpinNum: getSpinByProject("logx").remainSpinNum,
+        projectName: "logx",
         details: [
           {
             booster: (
@@ -726,6 +816,8 @@ export default function EcoDApps({
         rewards: "Up to 10x",
         holdingPoints: getHoldingPointsByProject("shoebill"),
         totalPoints: getTotalPointsByProject("shoebill"),
+        remainSpinNum: getSpinByProject("shoebill").remainSpinNum,
+        projectName: "shoebill",
         details: [
           {
             booster: (
@@ -752,6 +844,8 @@ export default function EcoDApps({
         rewards: "Up to 10x",
         holdingPoints: getHoldingPointsByProject("aqua"),
         totalPoints: getTotalPointsByProject("aqua"),
+        remainSpinNum: getSpinByProject("aqua").remainSpinNum,
+        projectName: "aqua",
         details: [
           {
             booster: (
@@ -781,6 +875,8 @@ export default function EcoDApps({
         rewards: "Up to 10x",
         holdingPoints: getHoldingPointsByProject("izumi"),
         totalPoints: getTotalPointsByProject("izumi"),
+        remainSpinNum: getSpinByProject("izumi").remainSpinNum,
+        projectName: "izumi",
         details: [
           {
             booster: (
@@ -813,6 +909,8 @@ export default function EcoDApps({
         rewards: "Up to 10x / Trading",
         holdingPoints: getHoldingPointsByProject("wagmi"),
         totalPoints: getTotalPointsByProject("wagmi"),
+        remainSpinNum: getSpinByProject("wagmi").remainSpinNum,
+        projectName: "wagmi",
         details: [
           {
             booster: (
@@ -837,8 +935,8 @@ export default function EcoDApps({
       },
 
       {
-        category: zkdx?.category,
-        iconURL: "/img/icon-zkdx.svg" || "perpdex",
+        category: zkdx?.category || "perpdex",
+        iconURL: "/img/icon-zkdx.svg",
         name: "zkDX",
         link: "https://app.zkdx.io/stakingliquidity",
         handler: "@zkDXio",
@@ -849,6 +947,8 @@ export default function EcoDApps({
         rewards: "Up to 10x / Trading",
         holdingPoints: getHoldingPointsByProject("zkdx"),
         totalPoints: getTotalPointsByProject("zkdx"),
+        remainSpinNum: getSpinByProject("zkdx").remainSpinNum,
+        projectName: "zkdx",
         details: [
           {
             booster: (
@@ -889,6 +989,8 @@ export default function EcoDApps({
         rewards: "Interaction",
         holdingPoints: getHoldingPointsByProject("allspark"),
         totalPoints: getTotalPointsByProject("allspark"),
+        remainSpinNum: getSpinByProject("allspark").remainSpinNum,
+        projectName: "allspark",
         details: [
           {
             booster: (
@@ -915,6 +1017,8 @@ export default function EcoDApps({
         rewards: "Bridge",
         holdingPoints: getHoldingPointsByProject("rubic"),
         totalPoints: getTotalPointsByProject("rubic"),
+        remainSpinNum: getSpinByProject("rubic").remainSpinNum,
+        projectName: "rubic",
         details: [
           {
             booster: (
@@ -941,6 +1045,8 @@ export default function EcoDApps({
         rewards: "Up to 10x",
         holdingPoints: getHoldingPointsByProject("interport"),
         totalPoints: getTotalPointsByProject("interport"),
+        remainSpinNum: getSpinByProject("interport").remainSpinNum,
+        projectName: "interport",
         details: [
           {
             booster: (
@@ -967,6 +1073,8 @@ export default function EcoDApps({
         rewards: "Bridge",
         holdingPoints: getHoldingPointsByProject("orbiter"),
         totalPoints: getTotalPointsByProject("orbiter"),
+        remainSpinNum: getSpinByProject("orbiter").remainSpinNum,
+        projectName: "orbiter",
         details: [
           {
             booster: `${orbiterBridgeNovaPoints} Nova Points`,
@@ -991,6 +1099,8 @@ export default function EcoDApps({
         rewards: "Bridge",
         holdingPoints: getHoldingPointsByProject("symbiosis"),
         totalPoints: getTotalPointsByProject("symbiosis"),
+        remainSpinNum: getSpinByProject("symbiosis").remainSpinNum,
+        projectName: "symbiosis",
         details: [
           {
             booster: `${symbiosisBridgeNovaPoints} Nova Points`,
@@ -1014,6 +1124,8 @@ export default function EcoDApps({
         rewards: "Bridge",
         holdingPoints: getHoldingPointsByProject("meson"),
         totalPoints: getTotalPointsByProject("meson"),
+        remainSpinNum: getSpinByProject("meson").remainSpinNum,
+        projectName: "meson",
         details: [
           {
             booster: `${mesonBridgeNovaPoints} Nova Points`,
@@ -1036,6 +1148,8 @@ export default function EcoDApps({
         rewards: "Trading",
         holdingPoints: getHoldingPointsByProject("eddy"),
         totalPoints: getTotalPointsByProject("eddy"),
+        remainSpinNum: getSpinByProject("eddy").remainSpinNum,
+        projectName: "eddy",
         details: [
           {
             booster: (
@@ -1061,6 +1175,8 @@ export default function EcoDApps({
         rewards: "20x Boost",
         holdingPoints: getHoldingPointsByProject("steer"),
         totalPoints: getTotalPointsByProject("steer"),
+        remainSpinNum: getSpinByProject("steer").remainSpinNum,
+        projectName: "steer",
         details: [
           {
             booster: (
@@ -1089,6 +1205,8 @@ export default function EcoDApps({
         rewards: "Interaction",
         holdingPoints: getHoldingPointsByProject("skyrangers"),
         totalPoints: getTotalPointsByProject("skyrangers"),
+        remainSpinNum: getSpinByProject("skyrangers").remainSpinNum,
+        projectName: "skyrangers",
         details: [
           {
             booster: (
@@ -1129,6 +1247,10 @@ export default function EcoDApps({
     warningModal.onOpen();
   };
 
+  useEffect(() => {
+    getSpin();
+  }, []);
+
   return (
     <Container>
       <SectorHeader
@@ -1145,12 +1267,32 @@ export default function EcoDApps({
             <div className="list-header-item text-center">Points Booster</div>
             <div className="list-header-item text-center">Rewards</div>
             <div className="list-header-item text-center">Allocated Points</div>
+            <div className="list-header-item text-center">
+              <div className="flex itmes-center justify-center gap-[4px]">
+                <span>Roulette</span>
+                <Tooltip
+                  className="max-w-[360px]"
+                  classNames={{
+                    content:
+                      "py-[20px] px-[16px] text-[14px] text-[#FBFBFB99] bg-[#000811]",
+                  }}
+                  content="Interact with the dApp and once you earn more than 1 Nova Point, you'll get a chance to spin the roulette three times to win more Nova Points and Trademark NFTs."
+                >
+                  <img src="/img/icon-info-2.svg" alt="" />
+                </Tooltip>
+              </div>
+            </div>
             <div className="list-header-item"></div>
           </div>
         </div>
         <div className="list-content">
           {ecoDAppsList.map((item, index) => (
-            <EcoDApp key={index} data={item} handleLink={handleLink} />
+            <EcoDApp
+              key={index}
+              data={item}
+              handleLink={handleLink}
+              onDrawed={getSpin}
+            />
           ))}
         </div>
       </List>
diff --git a/src/pages/DashboardS2/index2.tsx b/src/pages/DashboardS2/index2.tsx
index 1f3925cc..03e8c9b9 100644
--- a/src/pages/DashboardS2/index2.tsx
+++ b/src/pages/DashboardS2/index2.tsx
@@ -599,7 +599,7 @@ export default function Dashboard() {
 
   return (
     <Container>
-      <div className="side fixed right-[32px] top-[120px] z-[999] max-w-[400px]">
+      <div className="side fixed right-[32px] top-[120px] z-[999] max-w-[400px] w-[400px]">
         <ZKLClaimAd />
         <MysteryBoxIII />
         {/* <GoogleRecaptcha /> */}
diff --git a/vite.config.ts b/vite.config.ts
index 80419bc0..9bc30499 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -47,8 +47,8 @@ export default defineConfig({
     port: 3001,
     proxy: {
       "/app-api": {
-        // target: "https://goerli.app.zklink.io",
-        target: "https://app-api.zklink.io",
+        target: "https://goerli.app.zklink.io",
+        // target: "https://app-api.zklink.io",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/app-api/, ""),
       },