diff --git a/.eslintrc.json b/.eslintrc.json
index 3722418..b4923b7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,11 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-const": "off",
+    "@next/next/no-img-element": "off",
+    "react/no-unescaped-entities": "off"
+  }
 }
diff --git a/app/context/network-context.tsx b/app/context/network-context.tsx
index ef2e277..c3eb492 100644
--- a/app/context/network-context.tsx
+++ b/app/context/network-context.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, { createContext, useContext, useState, ReactNode, useEffect } from "react";
 import { networkOptions } from "@/app/lib/constants";
+import Cookie from "js-cookie"
 
 interface NetworkContextType {
   currentNetwork: NetworkOption | undefined;
@@ -16,6 +17,12 @@ export const NetworkProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [currentNetwork, setCurrentNetwork] = useState<NetworkOption>();
 
+  useEffect(()=>{
+    if(currentNetwork?.name){
+      Cookie.set("network",currentNetwork.name)
+    }
+  },[currentNetwork?.name])
+
   return (
     <NetworkContext.Provider
       value={{ currentNetwork, setCurrentNetwork, networks: networkOptions }}
diff --git a/app/globals.css b/app/globals.css
index c6a28be..813186f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -25,6 +25,18 @@ body {
   }
 }
 
+/* global.css */
+.no-spinner::-webkit-outer-spin-button,
+.no-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.no-spinner {
+  -moz-appearance: textfield;
+}
+
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index aab2352..a152401 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -1,3 +1,4 @@
+
 export const poolMap: Map<string, Pool> = new Map<string, Pool>([
   ["1", { id: 1, name: "Ethereum", shortName: "WETH" }],
   ["2", { id: 2, name: "Wrap Bitcoin", shortName: "WBTC" }],
@@ -30,15 +31,44 @@ export const networkOptions = [
     rpcUrl: "https://mainnet.optimism.io/",
     blockExplorerUrl: "https://optimistic.etherscan.io/",
   },
+  {
+    id: "katana",
+    name: "Katana",
+    icon: "/katana.png",
+    chainId: "0xB67D2",
+    rpcUrl: "https://rpc.katana.network",
+    blockExplorerUrl: "https://explorer.katanarpc.com/",
+  },
 ];
 
 export const BASE_NETWORK = "base";
 export const ARBITRUM_NETWORK = "arbitrum";
 export const OPTIMISM_NETWORK = "optimism";
+export const KATANA_NETWORK = "katana";
 
 export const SECS_PER_YEAR = 31556952;
 export const FEES = 0.01;
 export const oneMonthTimestampInterval = 2629743;
 export const referralCode =
   "0x0000000000000000000000000000000000000000000000000000000000000000";
-export const percentageClickValues = [10, 25, 50, 100]
+export const percentageClickValues = [10, 25, 50, 100];
+
+// Mock data for RemoveLiquidityTab
+export const mockRemoveLiquidityState = {
+  percentage: 0,
+  token0Amount: 0,
+  token1Amount: 0,
+  fees: {
+    token0: 0,
+    token1: 0,
+  },
+};
+
+// Mock data for FeesTab
+export const mockFeesTabState = {
+  unclaimedFees: 0.0002,
+  tokens: [
+    { symbol: "USDC", amount: 0.000068, usdValue: 0.000068 },
+    { symbol: "USDT", amount: 0.000151, usdValue: 0.0002 },
+  ],
+};
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
index e23761d..d815265 100644
--- a/app/lib/definitions.ts
+++ b/app/lib/definitions.ts
@@ -4,7 +4,14 @@ interface FeatureCardProps {
   icon: string;
   title: string;
   subtitle: string;
-  isSoon: boolean;
+  isSoon?: boolean;
+}
+
+interface WalletItem {
+  name: string;
+  icon: string;
+  onClick: string | null;
+  label?: string;
 }
 
 interface NetworkOption {
@@ -16,6 +23,23 @@ interface NetworkOption {
   blockExplorerUrl: string;
 }
 
+interface PoolsType {
+  id: string;
+  name: string;
+  icons: string[];
+  tvl: string;
+  tvlChange: number;
+  vol24h: string;
+  vol24hChange: number;
+  vol1w: string;
+  vol1wChange: number;
+  tx24h: number;
+  apr: string;
+  protocol_version: string;
+  swap_fee: number;
+  isSoon: boolean;
+}
+
 interface TabProps {
   tabs: {
     name: string;
@@ -230,9 +254,50 @@ interface NavItem {
   count: number | null;
   component: React.ComponentType<any>; // Accepts any component
   props?: Record<string, any>; // Optional props
-};
+}
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 interface PositionSectionProps {
   dataFetching: boolean;
 }
+
+// Types for modular liquidity management tabs
+
+interface LiquidityTabState {
+  activeTab: "add" | "remove" | "fees";
+}
+
+interface RemoveLiquidityState {
+  percentage: number;
+  token0Amount: number;
+  token1Amount: number;
+  fees: {
+    token0: number;
+    token1: number;
+  };
+}
+
+interface FeesTabState {
+  unclaimedFees: number;
+  tokens: Array<{
+    symbol: string;
+    amount: number;
+    usdValue: number;
+  }>;
+}
+
+interface RemoveLiquidityTabProps {
+  state: RemoveLiquidityState;
+  onChange: (state: RemoveLiquidityState) => void;
+  onConnectWallet: () => void;
+  isWalletConnected: boolean;
+  token0: { symbol: string; icon: string };
+  token1: { symbol: string; icon: string };
+}
+interface FeesTabProps {
+  state: FeesTabState;
+  onConnectWallet: () => void;
+  isWalletConnected: boolean;
+  token0: { symbol: string; icon: string };
+  token1: { symbol: string; icon: string };
+}
diff --git a/app/lib/extensions.ts b/app/lib/extensions.ts
new file mode 100644
index 0000000..8e9379c
--- /dev/null
+++ b/app/lib/extensions.ts
@@ -0,0 +1,85 @@
+// Utility for detecting installed wallet extensions and returning wallet options for the modal
+
+interface EthereumProvider {
+  isMetaMask?: boolean;
+}
+
+interface Window {
+  ethereum?: EthereumProvider;
+}
+
+// Returns an array of wallet sections (Installed, Not Installed, Others) with wallet info for the modal
+export const detectInstalledWallets = (): {
+  section: string;
+  items: WalletItem[];
+}[] => {
+  const installed: WalletItem[] = [];
+  const notInstalled: WalletItem[] = [];
+
+  // Detect MetaMask extension
+  if (
+    typeof window !== "undefined" &&
+    (window as Window).ethereum?.isMetaMask
+  ) {
+    installed.push({
+      icon: "/metamask-icon.svg",
+      name: "MetaMask",
+      label: "Installed",
+      onClick: "onMetaMask",
+    });
+  } else {
+    notInstalled.push({
+      icon: "/metamask-icon.svg",
+      name: "MetaMask",
+      label: "Not Installed",
+      onClick: "onMetaMask",
+    });
+  }
+
+  // Other wallet options (not detected, just shown as 'soon')
+  const others: WalletItem[] = [
+    {
+      icon: "/coinbase-wallet-icon.svg",
+      name: "Coinbase",
+      label: "soon",
+      onClick: "onCoinbase",
+    },
+    {
+      icon: "/trust-wallet-icon.png",
+      name: "Trust Wallet",
+      label: "soon",
+      onClick: "onTrustWallet",
+    },
+    {
+      icon: "/wallet-connect-icon.png",
+      name: "Wallet Connect",
+      label: "soon",
+      onClick: "onWalletConnect",
+    },
+  ];
+
+  const walletSections: { section: string; items: WalletItem[] }[] = [];
+
+  // Add installed wallets section if any
+  if (installed.length > 0) {
+    walletSections.push({
+      section: "Installed",
+      items: installed,
+    });
+  }
+  // Add not installed wallets section if any
+  if (notInstalled.length > 0) {
+    walletSections.push({
+      section: "Not Installed",
+      items: notInstalled,
+    });
+  }
+
+  // Always add others section
+  walletSections.push({
+    section: "Others",
+    items: others,
+  });
+
+  return walletSections;
+};
diff --git a/app/lib/helper.ts b/app/lib/helper.ts
index 2b81f64..ee72e3a 100644
--- a/app/lib/helper.ts
+++ b/app/lib/helper.ts
@@ -69,4 +69,4 @@ export const check0xHex = (num: BigNumberish) => {
 
 export const capitalizeFirstLetter = (val: string) => {
   return val.charAt(0).toUpperCase() + val.slice(1);
-}
+};
diff --git a/app/lib/static-values.ts b/app/lib/static-values.ts
index fb520f8..b8a473e 100644
--- a/app/lib/static-values.ts
+++ b/app/lib/static-values.ts
@@ -127,13 +127,15 @@ export const tradeMenuSubLinks = [
   {
     title: "Perps",
     href: "/trade/future",
-    subtitle: "Leveraged perpetual contracts to trade crypto without expiration",
+    subtitle:
+      "Leveraged perpetual contracts to trade crypto without expiration",
     icon: "/perps-menu-icon.svg",
   },
   {
     title: "Options",
     href: "/trade/options",
-    subtitle: "Leveraged contracts for hedging, speculation, or income with controlled risk",
+    subtitle:
+      "Leveraged contracts for hedging, speculation, or income with controlled risk",
     icon: "/options-menu-icon.svg",
   },
   {
@@ -142,6 +144,64 @@ export const tradeMenuSubLinks = [
     subtitle: "Margin trade to buy/sell assets at spot prices",
     icon: "/spot-menu-icon.svg",
   },
+  {
+    title: "Farm",
+    href: "/trade/farm",
+    subtitle: "Top Crypto Liquidity Pools Ranked by Performance",
+    icon: "/leaves-icon.png",
+  },
+];
+
+export const mockPools: PoolsType[] = [
+  {
+    id: "1",
+    name: "USDC / USDT",
+    icons: ["/usdc-icon.svg", "/usdt-icon.svg"],
+    tvl: "$15.98m",
+    tvlChange: -2.03,
+    vol24h: "$3.63m",
+    vol24hChange: 19.58,
+    vol1w: "$11.00m",
+    vol1wChange: 50.19,
+    tx24h: 3764,
+    apr: "14.47%",
+    protocol_version: "V3",
+    swap_fee: 0.01,
+    isSoon: false,
+  },
+  // {
+  //   id: "2",
+  //   name: "AUSD / USDC",
+  //   icons: ["/ausd-icon.svg", "/usdc-icon.svg"],
+  //   tvl: "$12.14m",
+  //   tvlChange: 21.12,
+  //   vol24h: "$8.51m",
+  //   vol24hChange: 125.9,
+  //   vol1w: "$21.35m",
+  //   vol1wChange: 309.61,
+  //   tx24h: 7357,
+  //   apr: "56.45%",
+  //   protocol_version: "V3",
+  //   swap_fee: 0.01,
+  //   isSoon: true,
+  // },
+  // {
+  //   id: "3",
+  //   name: "BTCK / LBTC",
+  //   icons: ["/bitcoin.svg", "/lbtc-icon.svg"],
+  //   tvl: "$6.32m",
+  //   tvlChange: 253.57,
+  //   vol24h: "$449.75",
+  //   vol24hChange: -97.61,
+  //   vol1w: "$258.38k",
+  //   vol1wChange: 95.78,
+  //   tx24h: 156,
+  //   apr: "11.02%",
+  //   protocol_version: "V3",
+  //   swap_fee: 0.01,
+  //   isSoon: true,
+  // },
+  // Add more mock pools as needed
 ];
 
 export const defaultTokenOptions: Option[] = [
@@ -163,4 +223,4 @@ export const ethPoolObj: PoolTable = {
   isActive: false,
   version: 0,
   vToken: "ETH",
-}
+};
diff --git a/app/lib/web3-constants.ts b/app/lib/web3-constants.ts
index 854f068..e9e4cbe 100644
--- a/app/lib/web3-constants.ts
+++ b/app/lib/web3-constants.ts
@@ -12,10 +12,11 @@ export const injected = new InjectedConnector({
     901, // lyraTestNet
     10, // optimism
     8453, // base
+    747474
   ],
 });
 
-export const allowedChainIds = [8453, 42161, 10];
+export const allowedChainIds = [8453, 42161, 10, 747474];
 
 export const getShortenedAddress = (address: string, start = 6, end = 4) => {
   if (address != "") {
diff --git a/app/store/farm-slice.ts b/app/store/farm-slice.ts
new file mode 100644
index 0000000..f5c4395
--- /dev/null
+++ b/app/store/farm-slice.ts
@@ -0,0 +1,36 @@
+"use client";
+
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { mockPools } from "../lib/static-values";
+import { RootState } from "../store/store"; // assuming store.ts is in same folder
+
+interface FarmInitalData {
+  FarmData: PoolsType[] | undefined;
+}
+
+const initialState: FarmInitalData = {
+  FarmData: mockPools,
+};
+
+const FarmDataSlice = createSlice({
+  name: "farm",
+  initialState,
+  reducers: {
+    setFarmData: (state, action: PayloadAction<PoolsType[]>) => {
+      state.FarmData = action.payload;
+    },
+  },
+});
+
+export const { setFarmData } = FarmDataSlice.actions;
+
+export const selectFarmData = (state: RootState) => state.farm.FarmData;
+
+// Selector to get a pool by id
+export const selectFarmDataById = (id: string) => (state: RootState) => {
+  return state.farm.FarmData?.find(
+    (pool: PoolsType) => String(pool.id) === String(id)
+  );
+};
+
+export default FarmDataSlice.reducer;
diff --git a/app/store/store.ts b/app/store/store.ts
index 8828f58..4a033df 100644
--- a/app/store/store.ts
+++ b/app/store/store.ts
@@ -2,10 +2,12 @@
 
 import { configureStore } from "@reduxjs/toolkit";
 import poolsReducer from "./pools-slice";
+import farmReducer from "./farm-slice"
 
 export const store = configureStore({
   reducer: {
     pools: poolsReducer,
+    farm:farmReducer
   },
 });
 
diff --git a/app/trade/dashboard/page.tsx b/app/trade/dashboard/page.tsx
index e223030..0758f95 100644
--- a/app/trade/dashboard/page.tsx
+++ b/app/trade/dashboard/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+
+
 import OptionPayoffChart from "@/app/ui/dashboard/option-payoff-chart";
 import { SimpleTableComponent } from "@/app/ui/dashboard/simple-table";
 import {
@@ -41,7 +43,7 @@ import Multicall from "@/app/abi/vanna/v1/out/Multicall.sol/Multicall.json";
 import DefaultRateModel from "@/app/abi/vanna/v1/out/DefaultRateModel.sol/DefaultRateModel.json";
 import Loader from "@/app/ui/components/loader";
 
-export default function Page() {
+function Dashboard() {
   const { account, library } = useWeb3React();
   const { currentNetwork } = useNetwork();
   const [activeAccount, setActiveAccount] = useState<string | undefined>();
@@ -1355,3 +1357,5 @@ export default function Page() {
     </div>
   );
 }
+
+export default Dashboard
\ No newline at end of file
diff --git a/app/trade/farm/[id]/page.tsx b/app/trade/farm/[id]/page.tsx
new file mode 100644
index 0000000..d2b5869
--- /dev/null
+++ b/app/trade/farm/[id]/page.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import Image from "next/image";
+import { useDispatch, useSelector } from "react-redux";
+import { selectFarmData, selectFarmDataById } from "@/app/store/farm-slice";
+import { AppDispatch } from "@/app/store/store";
+import { useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import { useWeb3React } from "@web3-react/core";
+import AddLiquidityTab from '@/app/ui/components/AddLiquidityTab';
+import RemoveLiquidityTab from '@/app/ui/components/RemoveLiquidityTab';
+import FeesTab from '@/app/ui/components/FeesTab';
+import { mockRemoveLiquidityState, mockFeesTabState } from '@/app/lib/constants';
+import { AnimatePresence } from "framer-motion";
+
+// Interface for price range management
+interface priceType {
+  minPrice: number;
+  maxPrice: number;
+}
+
+/**
+ * Farm Detail Page Component
+ * Displays detailed information about a specific liquidity farming pool
+ * Allows users to add liquidity with custom price ranges
+ */
+export default function PoolDetailPage({ params }: { params: { id: string } }) {
+  // Navigation and routing hooks
+  const router = useRouter();
+  const { id } = params;
+
+  // Web3 connection state
+  const { account } = useWeb3React();
+
+  // Redux state management
+  const pool = useSelector(selectFarmDataById(id));
+  const dispatch = useDispatch<AppDispatch>();
+
+  // Price range state for liquidity position
+  const [prices, setPrices] = useState<priceType>({
+    minPrice: 0.9981,
+    maxPrice: 1.0001,
+  });
+
+  // Token input amounts and USD price states
+  const [token0Amount, setToken0Amount] = useState<string>("");
+  const [token1Amount, setToken1Amount] = useState<string>("");
+  const [usdcUsdPrice, setUsdcUsdPrice] = useState("0.00");
+  const [usdtUsdPrice, setUsdtUsdPrice] = useState("0.00");
+
+  // Tab state
+  const [activeTab, setActiveTab] = useState<'add' | 'remove' | 'fees'>('add');
+
+  // Remove liquidity state
+  const [removeState, setRemoveState] = useState<RemoveLiquidityState>(mockRemoveLiquidityState);
+  // Fees tab state
+  const [feesState, setFeesState] = useState<FeesTabState>(mockFeesTabState);
+
+  /**
+   * Parse pool data to extract token information
+   * Creates token objects with symbols, icons, addresses, and balances
+   */
+  const [token0, token1] = useMemo(() => {
+    // Split pool name to get individual token symbols (e.g., "USDC / USDT")
+    const [symbol0, symbol1] = pool?.name?.split("/")?.map((s: string) => s.trim()) || [
+      "USDC",
+      "USDT",
+    ];
+    const icons = pool?.icons || [];
+
+    return [
+      {
+        symbol: symbol0,
+        icon: icons[0] || "/usdc-icon.svg",
+        address: "0x203A...FD36",
+        balance: 0,
+        value: 0,
+      },
+      {
+        symbol: symbol1,
+        icon: icons[1] || "/usdt-icon.svg",
+        address: "0x2DCa...D2F2",
+        balance: 0,
+        value: 0,
+      },
+    ];
+  }, [pool?.name, pool?.icons]);
+
+  // Early return if pool data is not found
+  if (!pool) {
+    return (
+      <motion.div
+        className="min-h-screen flex items-center justify-center bg-white dark:bg-baseDark text-baseBlack dark:text-white"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div>Pool not found.</div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="min-h-screen bg-white dark:bg-baseDark text-baseBlack dark:text-white md:pt-4"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.6 }}
+    >
+      <div className="max-w-screen mx-auto">
+        {/* Navigation: Back button */}
+        <motion.button
+          className="ml-6 mt-5 text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
+          onClick={() => router.back()}
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.4, delay: 0.1 }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <span className="text-lg">←</span> Back
+        </motion.button>
+
+        {/* Pool Header Section */}
+        <motion.div
+          className="pb-4 max-w-screen mb-6 border-b border-neutral-400 dark:border-neutral-700 flex flex-col justify-center items-center mx-auto w-full px-4"
+          initial={{ opacity: 0, y: -30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          {/* Token icons, pool name, and protocol version badge */}
+          <div className="flex items-center justify-center gap-2 mt-4 md:mt-0 flex-wrap">
+            {/* Token pair icons with overlapping design */}
+            <motion.div
+              className="flex"
+              whileHover={{ scale: 1.1 }}
+              transition={{ duration: 0.2 }}
+            >
+              <div className="w-8 h-8 rounded-full border border-neutral-400 dark:border-white flex items-center justify-center bg-white dark:bg-baseDark">
+                <Image
+                  src={token0.icon}
+                  alt={token0.symbol}
+                  width={24}
+                  height={24}
+                  className="rounded-full"
+                />
+              </div>
+              <div className="w-8 h-8 -ml-2 rounded-full border border-neutral-400 dark:border-white flex items-center justify-center bg-white dark:bg-baseDark">
+                <Image
+                  src={token1.icon}
+                  alt={token1.symbol}
+                  width={24}
+                  height={24}
+                  className="rounded-full"
+                />
+              </div>
+            </motion.div>
+
+            {/* Pool name */}
+            <span className="font-bold text-center text-xl md:text-2xl lg:text-4xl">
+              {pool.name}
+            </span>
+
+            {/* Protocol version badge */}
+            <motion.span
+              className="px-2 py-1 text-xs md:text-sm lg:text-xl rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 font-semibold"
+              whileHover={{ scale: 1.1 }}
+              transition={{ duration: 0.2 }}
+            >
+              {pool.protocol_version}
+            </motion.span>
+          </div>
+
+          {/* Pool statistics and information */}
+          <div className="flex flex-col items-center gap-1 mt-4 text-xs md:text-sm lg:flex-row lg:gap-4 lg:mt-4">
+            <div>
+              APR{" "}
+              <span className="text-blue-600 dark:text-blue-400 font-semibold">
+                {pool.apr}
+              </span>
+            </div>
+            <div>
+              Fee{" "}
+              <span className="text-neutral-600 dark:text-neutral-300">
+                {pool.swap_fee}%
+              </span>
+            </div>
+            <div>
+              Network{" "}
+              <span className="text-neutral-600 dark:text-neutral-300">
+                Katana
+              </span>
+            </div>
+            <div className="text-center lg:text-left">
+              {token0.symbol}{" "}
+              <a
+                href="#"
+                className="text-blue-600 dark:text-blue-400 hover:underline"
+              >
+                {token0.address}
+              </a>
+            </div>
+            <div className="text-center lg:text-left">
+              {token1.symbol}{" "}
+              <a
+                href="#"
+                className="text-blue-600 dark:text-blue-400 hover:underline"
+              >
+                {token1.address}
+              </a>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Main Content Card */}
+        <motion.div
+          className="p-2 max-w-4xl mx-auto w-full px-4"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+        >
+          <div className=" bg-white dark:bg-baseDark border border-neutral-400 dark:border-neutral-700 rounded-xl p-4 md:p-6 mb-6 overflow-hidden">
+            {/* Tab Switcher */}
+            <div className="max-w-full border border-neutral-400 dark:border-neutral-800 rounded-lg flex justify-between  mb-6  p-2">
+              {/* Add Tab */}
+              {activeTab === 'add' ? (
+                <div className="bg-gradient-to-r from-gradient-1 to-gradient-2 p-[2px] rounded-lg w-full mx-1">
+                  <button
+                    className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white bg-white dark:bg-baseDark transition"
+                    onClick={() => setActiveTab('add')}
+                  >
+                    Add
+                  </button>
+                </div>
+              ) : (
+                <button
+                  className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white transition mx-1"
+                  onClick={() => setActiveTab('add')}
+                >
+                  Add
+                </button>
+              )}
+              {/* Remove Tab */}
+              {activeTab === 'remove' ? (
+                <div className="bg-gradient-to-r from-gradient-1 to-gradient-2 p-[2px] rounded-lg w-full mx-1">
+                  <button
+                    className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white bg-white dark:bg-baseDark transition"
+                    onClick={() => setActiveTab('remove')}
+                  >
+                    Remove
+                  </button>
+                </div>
+              ) : (
+                <button
+                  className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white transition mx-1"
+                  onClick={() => setActiveTab('remove')}
+                >
+                  Remove
+                </button>
+              )}
+              {/* Fees Tab */}
+              {activeTab === 'fees' ? (
+                <div className="bg-gradient-to-r from-gradient-1 to-gradient-2 p-[2px] rounded-lg w-full mx-1">
+                  <button
+                    className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white bg-white dark:bg-baseDark transition"
+                    onClick={() => setActiveTab('fees')}
+                  >
+                    Fees
+                  </button>
+                </div>
+              ) : (
+                <button
+                  className="w-full px-4 py-2 rounded-lg font-semibold text-baseBlack dark:text-white transition mx-1"
+                  onClick={() => setActiveTab('fees')}
+                >
+                  Fees
+                </button>
+              )}
+            </div>
+            {/* Tab Content */}
+            <AnimatePresence mode="wait">
+              {activeTab === 'add' && (
+                <motion.div
+                  key="add"
+                  initial={{ x: 40, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -40, opacity: 0 }}
+                  transition={{ duration: 0.3, type: "spring" }}
+                >
+                  <AddLiquidityTab
+                    prices={prices}
+                    setPrices={setPrices}
+                    token0Amount={token0Amount}
+                    setToken0Amount={setToken0Amount}
+                    token1Amount={token1Amount}
+                    setToken1Amount={setToken1Amount}
+                    usdcUsdPrice={usdcUsdPrice}
+                    usdtUsdPrice={usdtUsdPrice}
+                    account={account}
+                    token0={token0}
+                    token1={token1}
+                  />
+                </motion.div>
+              )}
+              {activeTab === 'remove' && (
+                <motion.div
+                  key="remove"
+                  initial={{ x: 40, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -40, opacity: 0 }}
+                  transition={{ duration: 0.3, type: "spring" }}
+                >
+                  <RemoveLiquidityTab
+                    state={removeState}
+                    onChange={setRemoveState}
+                    onConnectWallet={() => { }}
+                    isWalletConnected={!!account}
+                    token0={token0}
+                    token1={token1}
+                  />
+                </motion.div>
+              )}
+              {activeTab === 'fees' && (
+                <motion.div
+                  key="fees"
+                  initial={{ x: 40, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: -40, opacity: 0 }}
+                  transition={{ duration: 0.3, type: "spring" }}
+                >
+                  <FeesTab
+                    state={feesState}
+                    onConnectWallet={() => { }}
+                    isWalletConnected={!!account}
+                    token0={token0}
+                    token1={token1}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/trade/farm/page.tsx b/app/trade/farm/page.tsx
new file mode 100644
index 0000000..e454d14
--- /dev/null
+++ b/app/trade/farm/page.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import Image from "next/image";
+import { useDispatch, useSelector } from "react-redux";
+import { useRouter } from "next/navigation";
+import { selectFarmData } from "@/app/store/farm-slice";
+import { AppDispatch } from "@/app/store/store";
+import { motion } from "framer-motion";
+
+/**
+ * ChangeText Component
+ * Displays percentage changes with color-coded styling and animation
+ * Green for positive changes, red for negative, gray for zero
+ */
+function ChangeText({ value }: { value: number }) {
+  return (
+    <motion.span
+      className={
+        value > 0
+          ? "text-green-400"
+          : value < 0
+          ? "text-red-400"
+          : "text-gray-400"
+      }
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {value > 0 ? "+" : ""}
+      {value}%
+    </motion.span>
+  );
+}
+
+/**
+ * Farm Page Component
+ * Displays a table of farming pools with their statistics
+ * Includes animations, hover effects, and navigation to individual pool details
+ */
+export default function Page() {
+  // Router for navigation to individual pool pages
+  const router = useRouter();
+
+  // Redux state management - get farm data from store
+  const poolData = useSelector(selectFarmData);
+  const dispatch = useDispatch<AppDispatch>();
+
+  // Animation variants for staggered table row animations
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1, // Stagger child animations by 0.1s
+        delayChildren: 0.2, // Delay start of child animations by 0.2s
+      },
+    },
+  };
+
+  return (
+    // Main container with fade-in animation
+    <motion.div
+      className="min-h-screen bg-white dark:bg-baseDark text-baseBlack dark:text-white p-8"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.6 }}
+    >
+      <div className="max-w-6xl mx-auto">
+        {/* Page title with slide-down animation */}
+        <motion.h1
+          className="text-2xl font-bold mb-6"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          Farm
+        </motion.h1>
+
+        {/* Main table container with scale animation */}
+        <motion.div
+          className="overflow-x-auto border border-neutral-400 dark:border-neutral-700 rounded-lg shadow-lg bg-white dark:bg-baseDark"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <table className="min-w-full text-sm">
+            {/* Table header with column titles */}
+            <thead>
+              <tr className="bg-white dark:bg-baseDark border-b border-neutral-400 dark:border-neutral-700 text-neutral-600 dark:text-neutral-300">
+                <th className="px-4 py-3 text-left font-semibold">Name</th>
+                <th className="px-4 py-3 text-right font-semibold">TVL</th>
+                <th className="px-4 py-3 text-right font-semibold">
+                  Volume (24h)
+                </th>
+                <th className="px-4 py-3 text-right font-semibold">
+                  Volume (1w)
+                </th>
+                <th className="px-4 py-3 text-right font-semibold">
+                  Transactions (24h)
+                </th>
+                <th className="px-4 py-3 text-right font-semibold">APR</th>
+              </tr>
+            </thead>
+
+            {/* Table body with staggered row animations */}
+            <motion.tbody
+              variants={containerVariants}
+              initial="hidden"
+              animate="visible"
+            >
+              {/* Map through pool data to create table rows */}
+              {poolData?.map((pool, index) => (
+                <motion.tr
+                  key={pool.id}
+                  className="border-b border-neutral-400 dark:border-neutral-700 transition cursor-pointer relative group"
+                  onClick={() => {
+                    // Prevent navigation for pools marked as "coming soon"
+                    if (pool.isSoon) return;
+                    // Navigate to individual pool page
+                    router.push(`/trade/farm/${pool.id}`);
+                  }}
+                  whileHover={{
+                    transition: { duration: 0.2 },
+                  }}
+                  whileTap={{ scale: 0.98 }} // Scale down on tap for feedback
+                >
+                  {/* Gradient hover effect overlay */}
+                  <div className="absolute inset-0  bg-transparent z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out pointer-events-none">
+                    <div className="absolute inset-0 bg-gradient-to-r from-gradient-1 to-gradient-2 "></div>
+                    <div className="absolute inset-[1px] bg-white dark:bg-baseDark "></div>
+                  </div>
+
+                  {/* Pool name and icons column */}
+                  <td className="flex items-center gap-2 px-4 py-3 relative z-10">
+                    {/* Dual token icons with hover animation */}
+                    <motion.div
+                      className="flex"
+                      whileHover={{ scale: 1.05 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      {/* First token icon */}
+                      <div className="flex flex-col justify-center items-center w-[2.0rem] h-[2.0rem] rounded-full border border-neutral-400 dark:border-white bg-white dark:bg-baseDark">
+                        <Image
+                          width={10}
+                          height={10}
+                          src={pool.icons[0]}
+                          alt={pool.name}
+                          className="w-full h-full rounded-full"
+                        />
+                      </div>
+                      {/* Second token icon (overlapping) */}
+                      <div className="flex flex-col justify-center items-center w-[2.0rem] h-[2.0rem] -ml-1 rounded-full border border-neutral-400 dark:border-white bg-white dark:bg-baseDark">
+                        <Image
+                          width={10}
+                          height={10}
+                          src={pool.icons[1]}
+                          alt={pool.name}
+                          className="w-full h-full rounded-full"
+                        />
+                      </div>
+                    </motion.div>
+
+                    {/* Pool name and metadata */}
+                    <div>
+                      <div className="ml-2 flex gap-2 font-medium">
+                        <div>{pool.name}</div>
+                        <div>
+                          <button className="py-0.5 px-2 bg-neutral-600 text-xs rounded-xl text-baseWhite">
+                            sushi
+                          </button>
+                        </div>
+                      </div>
+                      <div className="ml-2 mt-2 flex gap-2">
+                        {/* Protocol version badge */}
+                        <motion.div
+                          className="font-medium text-xs rounded-full w-[2.0rem] p-1 flex flex-col justify-center items-center bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400"
+                          whileHover={{ scale: 1.1 }}
+                          transition={{ duration: 0.2 }}
+                        >
+                          {pool.protocol_version}
+                        </motion.div>
+                        {/* Swap fee badge */}
+                        <motion.div
+                          className="flex flex-col justify-center items-center w-[3.0rem] rounded-full text-xs font-medium bg-neutral-300 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300"
+                          whileHover={{ scale: 1.1 }}
+                          transition={{ duration: 0.2 }}
+                        >
+                          {pool.swap_fee}%
+                        </motion.div>
+                        {/* "Coming soon" badge for pools not yet available */}
+                        {pool.isSoon && (
+                          <motion.div
+                            className="font-medium text-xs rounded-full w-[2.0rem] p-1 flex flex-col justify-center items-center text-blue-600 dark:text-blue-400"
+                            whileHover={{ scale: 1.1 }}
+                            transition={{ duration: 0.2 }}
+                          >
+                            <button className="py-0.5 px-1 bg-gradient-to-r from-gradient-1 to-gradient-2 text-xs rounded-md text-baseWhite">
+                              soon
+                            </button>
+                          </motion.div>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+
+                  {/* TVL (Total Value Locked) column with change indicator */}
+                  <td className="px-4 py-3 text-right relative z-10">
+                    <div>{pool.tvl}</div>
+                    <ChangeText value={pool.tvlChange} />
+                  </td>
+
+                  {/* 24h Volume column with change indicator */}
+                  <td className="px-4 py-3 text-right relative z-10">
+                    <div>{pool.vol24h}</div>
+                    <ChangeText value={pool.vol24hChange} />
+                  </td>
+
+                  {/* 1 week Volume column with change indicator */}
+                  <td className="px-4 py-3 text-right relative z-10">
+                    <div>{pool.vol1w}</div>
+                    <ChangeText value={pool.vol1wChange} />
+                  </td>
+
+                  {/* 24h Transactions column */}
+                  <td className="px-4 py-3 text-right relative z-10">
+                    {pool.tx24h}
+                  </td>
+
+                  {/* APR (Annual Percentage Rate) column */}
+                  <td className="px-4 py-3 text-right font-semibold text-blue-600 dark:text-blue-400 relative z-10">
+                    {pool.apr}
+                  </td>
+                </motion.tr>
+              ))}
+            </motion.tbody>
+          </table>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/trade/future/page.tsx b/app/trade/future/page.tsx
index 08a26f2..18fb6a1 100644
--- a/app/trade/future/page.tsx
+++ b/app/trade/future/page.tsx
@@ -19,7 +19,8 @@ import OpMarkPrice from "../../abi/vanna/v1/out/OpMarkPrice.sol/OpMarkPrice.json
 import OpIndexPrice from "../../abi/vanna/v1/out/OpIndexPrice.sol/OpIndexPrice.json";
 import { ceilWithPrecision } from "@/app/lib/helper";
 
-export default function Page() {
+
+function Future() {
   const { library } = useWeb3React();
   const { currentNetwork } = useNetwork();
 
@@ -281,3 +282,6 @@ export default function Page() {
     </div>
   );
 }
+
+
+export default Future
diff --git a/app/trade/options/page.tsx b/app/trade/options/page.tsx
index 2030cfb..f88044f 100644
--- a/app/trade/options/page.tsx
+++ b/app/trade/options/page.tsx
@@ -26,7 +26,7 @@ type DateOption =
   | "Next month";
 type GreekOption = "Delta" | "Mark Price" | "Gamma" | "Vega" | "Theta";
 
-export default function Page() {
+function Options() {
   // const { account, library } = useWeb3React();
   // const { currentNetwork } = useNetwork();
 
@@ -558,3 +558,6 @@ export default function Page() {
     </div>
   );
 }
+
+
+export default Options
\ No newline at end of file
diff --git a/app/trade/spot/page.tsx b/app/trade/spot/page.tsx
index 5a6ecff..f468728 100644
--- a/app/trade/spot/page.tsx
+++ b/app/trade/spot/page.tsx
@@ -42,7 +42,7 @@ import { formatUSD } from "@/app/lib/number-format-helper";
 import CreateSmartAccountModal from "@/app/ui/components/create-smart-account-model";
 import Notification from "@/app/ui/components/notification";
 
-export default function Page() {
+function Spot() {
   const { account, library } = useWeb3React();
   const [activeAccount, setActiveAccount] = useState<string | undefined>();
   const { currentNetwork } = useNetwork();
@@ -867,3 +867,6 @@ export default function Page() {
     </div>
   );
 }
+
+
+export default Spot
\ No newline at end of file
diff --git a/app/ui/components/AddLiquidityTab.tsx b/app/ui/components/AddLiquidityTab.tsx
new file mode 100644
index 0000000..27a3c19
--- /dev/null
+++ b/app/ui/components/AddLiquidityTab.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+
+export interface AddLiquidityTabProps {
+    prices: { minPrice: number; maxPrice: number };
+    setPrices: (prices: { minPrice: number; maxPrice: number }) => void;
+    token0Amount: string;
+    setToken0Amount: (amount: string) => void;
+    token1Amount: string;
+    setToken1Amount: (amount: string) => void;
+    usdcUsdPrice: string;
+    usdtUsdPrice: string;
+    account: string | null | undefined;
+    token0: { symbol: string; icon: string; address: string };
+    token1: { symbol: string; icon: string; address: string };
+}
+
+const AddLiquidityTab: React.FC<AddLiquidityTabProps> = ({
+    prices,
+    setPrices,
+    token0Amount,
+    setToken0Amount,
+    token1Amount,
+    setToken1Amount,
+    usdcUsdPrice,
+    usdtUsdPrice,
+    account,
+    token0,
+    token1,
+}) => {
+    return (
+        <>
+            {/* Price Range Controls */}
+            <motion.div className="flex flex-col md:flex-row gap-4 md:gap-6">
+                {/* Minimum Price Control */}
+                <motion.div className="border border-neutral-400 dark:border-neutral-700 py-4 rounded-[20px] flex-1 flex flex-col justify-center items-center">
+                    <div className="text-neutral-500 dark:text-neutral-400 text-xs mb-2">Min Price</div>
+                    <div className="text-xl md:text-2xl font-bold mb-1">{prices.minPrice.toFixed(4)}</div>
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400 mb-2 text-center">{token1.symbol} per {token0.symbol}</div>
+                    <div className="flex gap-2">
+                        <motion.button className="w-7 h-7 rounded-full bg-neutral-300 dark:bg-neutral-700 text-lg flex items-center justify-center" onClick={() => setPrices({ ...prices, minPrice: prices.minPrice - 0.0001 })}>-</motion.button>
+                        <motion.button className="w-7 h-7 rounded-full bg-neutral-300 dark:bg-neutral-700 text-lg flex items-center justify-center" onClick={() => setPrices({ ...prices, minPrice: prices.minPrice + 0.0001 })}>+</motion.button>
+                    </div>
+                </motion.div>
+                {/* Maximum Price Control */}
+                <motion.div className="py-4 border border-neutral-400 dark:border-neutral-700 rounded-[20px] flex-1 flex flex-col justify-center items-center">
+                    <div className="text-neutral-500 dark:text-neutral-400 text-xs mb-2">Max Price</div>
+                    <div className="text-xl md:text-2xl font-bold mb-1">{prices.maxPrice.toFixed(4)}</div>
+                    <div className="text-xs text-neutral-500 dark:text-neutral-400 mb-2 text-center">{token1.symbol} per {token0.symbol}</div>
+                    <div className="flex gap-2">
+                        <motion.button className="w-7 h-7 rounded-full bg-neutral-300 dark:bg-neutral-700 text-lg flex items-center justify-center" onClick={() => setPrices({ ...prices, maxPrice: prices.maxPrice - 0.0001 })}>-</motion.button>
+                        <motion.button className="w-7 h-7 rounded-full bg-neutral-300 dark:bg-neutral-700 text-lg flex items-center justify-center" onClick={() => setPrices({ ...prices, maxPrice: prices.maxPrice + 0.0001 })}>+</motion.button>
+                    </div>
+                </motion.div>
+            </motion.div>
+            {/* Liquidity Information Section */}
+            <motion.div className="mt-5 p-4 md:p-8 rounded-[20px]">
+                <div className="font-semibold text-baseBlack dark:text-white mb-1">Liquidity</div>
+                <div className="text-neutral-600 dark:text-neutral-300 text-sm">Depending on your range, the supplied tokens for this position will not always be a 50:50 ratio.</div>
+            </motion.div>
+            {/* Token Input Section */}
+            <motion.div className="mt-5 relative">
+                {/* First Token Input */}
+                <motion.div className="p-4 md:p-8 rounded-[20px] border border-neutral-400 dark:border-neutral-700 flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full border border-neutral-400 dark:border-white flex items-center justify-center bg-white dark:bg-baseDark flex-shrink-0">
+                        <Image src={token0.icon} alt={token0.symbol} width={24} height={24} className="rounded-full" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <input value={token0Amount} placeholder="0.0" onChange={e => setToken0Amount(e.target.value)} type="number" className="no-spinner bg-transparent focus:outline-none text-lg font-bold text-baseBlack dark:text-white w-full" />
+                        <div className="text-xs text-neutral-500 dark:text-neutral-400">${usdcUsdPrice}</div>
+                    </div>
+                    <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                        <div className="flex items-center gap-2 text-sm font-semibold">
+                            <Image width={16} height={16} className="w-6 h-6" alt={token0.symbol} src={token0.icon} />
+                            <span>{token0.symbol}</span>
+                        </div>
+                        <div className="mt-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 text-neutral-500 dark:text-neutral-400">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3" />
+                            </svg>
+                            <div className="text-xs text-neutral-500 dark:text-neutral-400">$0.00</div>
+                        </div>
+                    </div>
+                </motion.div>
+                {/* Second Token Input */}
+                <motion.div className="p-4 md:p-8 mt-2 rounded-[20px] border border-neutral-400 dark:border-neutral-700 flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full border border-neutral-400 dark:border-white flex items-center justify-center bg-white dark:bg-baseDark flex-shrink-0">
+                        <Image src={token1.icon} alt={token1.symbol} width={24} height={24} className="rounded-full" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <input value={token1Amount} placeholder="0.0" onChange={e => setToken1Amount(e.target.value)} type="number" className="no-spinner bg-transparent focus:outline-none text-lg font-bold text-baseBlack dark:text-white w-full" />
+                        <div className="text-xs text-neutral-500 dark:text-neutral-400">${usdtUsdPrice}</div>
+                    </div>
+                    <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                        <div className="flex items-center gap-2 text-sm font-semibold">
+                            <Image width={16} height={16} className="w-6 h-6" alt={token1.symbol} src={token1.icon} />
+                            <span>{token1.symbol}</span>
+                        </div>
+                        <div className="mt-2 flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 text-neutral-500 dark:text-neutral-400">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3" />
+                            </svg>
+                            <div className="text-xs text-neutral-500 dark:text-neutral-400">$0.00</div>
+                        </div>
+                    </div>
+                </motion.div>
+            </motion.div>
+            {/* Action Button Section */}
+            <motion.div className="mt-4">
+                {!account && (
+                    <motion.button disabled className="cursor-not-allowed w-full bg-gray-300 dark:bg-gray-500 text-neutral-400 font-bold py-3 rounded-xl text-lg mt-2">Connect Wallet</motion.button>
+                )}
+                {account && !token0Amount && (
+                    <motion.button className="w-full bg-gradient-to-r from-gradient-1 to-gradient-2 text-white font-bold py-3 rounded-xl text-lg mt-2">Enter an amount</motion.button>
+                )}
+                {account && token0Amount && (
+                    <motion.button className="w-full bg-gradient-to-r from-gradient-1 to-gradient-2 text-white font-bold py-3 rounded-xl text-lg mt-2">Add Liquidity</motion.button>
+                )}
+            </motion.div>
+        </>
+    );
+};
+
+export default AddLiquidityTab; 
\ No newline at end of file
diff --git a/app/ui/components/FeesTab.tsx b/app/ui/components/FeesTab.tsx
new file mode 100644
index 0000000..ce9cbf7
--- /dev/null
+++ b/app/ui/components/FeesTab.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Image from 'next/image';
+
+const FeesTab: React.FC<FeesTabProps> = ({
+    state,
+    onConnectWallet,
+    isWalletConnected,
+    token0,
+    token1,
+}) => {
+    return (
+        <div className="p-4 md:p-6 bg-white dark:bg-baseDark border border-neutral-400 dark:border-neutral-700 rounded-xl">
+            <div className="mb-4">
+                <div className="font-bold text-baseBlack dark:text-white text-xl mb-1">Unclaimed fees</div>
+                <div className="text-neutral-600 dark:text-neutral-300 text-sm mb-2">${state.unclaimedFees.toFixed(4)}</div>
+            </div>
+            <div className="mb-4">
+                <div className="text-neutral-600 dark:text-neutral-300 font-semibold mb-2">Tokens</div>
+                <div className="flex flex-col gap-1">
+                    {state.tokens.map((token, idx) => (
+                        <div className="flex items-center gap-2" key={token.symbol}>
+                            <Image src={idx === 0 ? token0.icon : token1.icon} alt={token.symbol} width={20} height={20} />
+                            <span className='font-semibold text-baseBlack dark:text-white mb-1'>{token.symbol}</span>
+                            <span className="ml-auto font-semibold">{token.amount}</span>
+                            <span className="font-semibold ml-2 text-xs text-neutral-500 dark:text-neutral-400">${token.usdValue}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {!isWalletConnected && (
+        <button
+          disabled
+          className="cursor-not-allowed w-full bg-gray-300 dark:bg-gray-500 text-neutral-400 font-bold py-3 rounded-xl text-lg mt-2"
+        >
+          Connect Wallet
+        </button>
+      )}
+      {isWalletConnected && (
+        <button className="w-full bg-gradient-to-r from-gradient-1 to-gradient-2 text-white font-bold py-3 rounded-xl text-lg mt-2">
+          Collect
+        </button>
+      )}
+        </div>
+    );
+};
+
+export default FeesTab; 
\ No newline at end of file
diff --git a/app/ui/components/ModalWalletInfoSection.tsx b/app/ui/components/ModalWalletInfoSection.tsx
new file mode 100644
index 0000000..574669c
--- /dev/null
+++ b/app/ui/components/ModalWalletInfoSection.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+
+// Info section for the wallet connect modal, explaining what a wallet is and providing helpful actions
+export default function ModalWalletInfoSection({
+  onGetWallet, // Called when the user clicks 'Get a Wallet'
+  onLearnMore, // Called when the user clicks 'Learn More'
+  onBack, // Called when the user clicks the back arrow
+  onClose, // Called when the user clicks the close (X) button
+}: {
+  onGetWallet?: () => void;
+  onLearnMore?: () => void;
+  onBack?: () => void;
+  onClose?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-8 w-96 max-w-full">
+      {/* Header with back and close buttons */}
+      <div className="flex items-center justify-between w-full mb-4">
+        <button
+          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary text-xl text-baseBlack dark:text-baseWhite focus:outline-none"
+          aria-label="Back"
+          onClick={onBack}
+        >
+          {/* Back arrow icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={2.0}
+            stroke="currentColor"
+            className="size-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
+            />
+          </svg>
+        </button>
+        <h2 className="text-lg font-bold text-baseBlack dark:text-baseWhite flex-1 text-center text-center">
+          What is a Wallet?
+        </h2>
+        <button
+          className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary text-2xl text-baseBlack dark:text-baseWhite focus:outline-none"
+          aria-label="Close"
+          onClick={onClose}
+        >
+          &times;
+        </button>
+      </div>
+      {/* Info Cards: Explain wallets and login */}
+      <div className="mt-4 flex flex-col gap-4 w-full mb-6">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
+            {/* Wallet icon */}
+            <span role="img" aria-label="wallet" className="text-2xl">
+              💼
+            </span>
+          </div>
+          <div>
+            <div className="font-semibold text-baseBlack dark:text-baseWhite">
+              A Home for your Digital Assets
+            </div>
+            <div className="text-sm text-neutral-600 dark:text-neutral-300">
+              Wallets are used to send, receive, store, and display digital
+              assets like Ethereum and NFTs.
+            </div>
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900">
+            {/* Login icon */}
+            <span role="img" aria-label="login" className="text-2xl">
+              🔑
+            </span>
+          </div>
+          <div>
+            <div className="font-semibold text-baseBlack dark:text-baseWhite">
+              A New Way to Log In
+            </div>
+            <div className="text-sm text-neutral-600 dark:text-neutral-300">
+              Instead of creating new accounts and passwords on every website,
+              just connect your wallet.
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Action buttons */}
+      <button
+        className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold py-3 mb-2 transition-colors"
+        onClick={onGetWallet}
+      >
+        Get a Wallet
+      </button>
+      <button
+        className="w-full text-blue-600 dark:text-blue-400 underline text-sm font-medium"
+        onClick={onLearnMore}
+      >
+        Learn More
+      </button>
+    </div>
+  );
+}
diff --git a/app/ui/components/ModalWalletsSection.tsx b/app/ui/components/ModalWalletsSection.tsx
new file mode 100644
index 0000000..3161d98
--- /dev/null
+++ b/app/ui/components/ModalWalletsSection.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+// Represents a single wallet option
+interface WalletItem {
+  name: string;
+  icon: string;
+  onClick?: string | null;
+  label?: string;
+}
+
+// Renders the wallet selection section of the modal, including all wallet options and the footer
+export default function ModalWalletsSection({
+  wallets, // Array of wallet sections (Installed, Not Installed, Others)
+  onMetaMask, // Handler for MetaMask connect
+  onClose, // Handler for closing the modal
+}: {
+  wallets: { section: string; items: WalletItem[] }[] | null;
+  onMetaMask: () => void;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      {/* Wallet sections list */}
+      <div className="flex-1 overflow-y-auto px-5 py-2">
+        {wallets?.map((section, idx) => (
+          <div key={section.section} className="mb-2">
+            <div
+              className={`${section.section === "Installed"
+                  ? " text-blue-500"
+                  : "text-neutral-500"
+                } text-xs font-semibold  uppercase mb-1 mt-3`}
+            >
+              {section.section}
+            </div>
+            <div className="flex flex-col gap-2">
+              {section.items.map((wallet, widx) => (
+                <motion.button
+                  key={wallet.name}
+                  onClick={
+                    wallet.onClick
+                      ? wallet.onClick === "onMetaMask"
+                        ? onMetaMask
+                        : undefined
+                      : undefined
+                  }
+                  className="relative group flex items-center w-full p-3 rounded-lg border border-transparent bg-white dark:bg-baseDark text-baseBlack dark:text-baseWhite hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary focus:outline-none focus:ring-2 focus:ring-purple transition-colors overflow-hidden"
+                  disabled={!wallet.onClick}
+                >
+                  {/* Gradient hover effect overlay */}
+                  <span className="absolute inset-0 z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out pointer-events-none">
+                    <span className="absolute inset-0 bg-gradient-to-r from-gradient-1 to-gradient-2 rounded-lg" />
+                    <span className="absolute inset-[1px] bg-white dark:bg-baseDark rounded-lg" />
+                  </span>
+                  {/* Button content */}
+                  <span className="relative z-10 flex items-center w-full">
+                    <img
+                      src={wallet.icon}
+                      alt={wallet.name}
+                      className="w-6 h-6 mr-3"
+                    />
+                    <span className="flex-1 text-left">{wallet.name}</span>
+                    {wallet.label && (
+                      <span className="text-xs bg-neutral-200 dark:bg-baseDarkComplementary text-neutral-700 dark:text-baseWhite px-2 py-0.5 rounded font-medium ml-2">
+                        {wallet.label}
+                      </span>
+                    )}
+                  </span>
+                </motion.button>
+              ))}
+            </div>
+            {idx < wallets.length - 1 && (
+              <div className="my-3 border-t border-neutral-100 dark:border-neutral-700" />
+            )}
+          </div>
+        ))}
+      </div>
+      {/* Footer with terms and privacy links */}
+      <div className="px-5 py-3 text-xs text-neutral-500 dark:text-neutral-400 border-t border-neutral-100 dark:border-neutral-700 text-center">
+        By connecting your wallet, you agree to Vanna's{" "}
+        <a href="#" className="underline">
+          Terms of Service
+        </a>{" "}
+        and{" "}
+        <a href="#" className="underline">
+          Privacy Policy
+        </a>
+      </div>
+    </>
+  );
+}
diff --git a/app/ui/components/RemoveLiquidityTab.tsx b/app/ui/components/RemoveLiquidityTab.tsx
new file mode 100644
index 0000000..a544c56
--- /dev/null
+++ b/app/ui/components/RemoveLiquidityTab.tsx
@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import Image from "next/image";
+import FarmSlider from "../future/farmSlider";
+
+const percentageOptions = [25, 50, 75, 100];
+
+const RemoveLiquidityTab: React.FC<RemoveLiquidityTabProps> = ({
+  state,
+  onChange,
+  onConnectWallet,
+  isWalletConnected,
+  token0,
+  token1,
+}) => {
+  const handlePercentageChange = (value: number) => {
+    onChange({
+      ...state,
+      percentage: value,
+      // Optionally update token amounts here if needed
+    });
+  };
+
+  return (
+    <div className="p-4 md:p-6 bg-white dark:bg-baseDark  rounded-xl">
+      <div className="mb-4">
+        <div className="font-semibold text-baseBlack dark:text-white text-lg mb-1">
+          Remove liquidity
+        </div>
+        <div className="text-neutral-600 dark:text-neutral-300 text-sm mb-2">
+          Please enter how much of the position you want to remove.
+        </div>
+        <div className="mt-6 mb-2 border border-neutral-400 dark:border-neutral-800 rounded-xl py-4 px-6 ">
+          <div className="flex flex-col md:flex-row justify-center items-center md:flex md:justify-between items-center gap-2">
+            <div className="mb-3 md:mb-0">
+              <span className=" text-xl font-bold">{state.percentage}%</span>
+            </div>
+
+            <div className="flex gap-2 mb-4">
+              {percentageOptions.map((opt) => (
+                <button
+                  key={opt}
+                  className={`px-3 py-1 rounded-lg  text-sm font-semibold ${
+                    state.percentage === opt
+                      ? "bg-gradient-to-r from-gradient-1 to-gradient-2 text-white"
+                      : "border border-neutral-400 dark:border-neutral-700  text-baseBlack dark:text-white"
+                  }`}
+                  onClick={() => handlePercentageChange(opt)}
+                >
+                  {opt === 100 ? "Max" : `${opt}%`}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="mt-2">
+            <FarmSlider
+              onChange={(val) => handlePercentageChange(val)}
+              value={state.percentage}
+              key={"range"}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="py-4 px-6 rounded-xl border border-neutral-400 dark:border-neutral-800 ">
+        <div className="mb-6 ">
+          <div className="font-semibold text-sm text-neutral-600 mb-2">
+            You'll receive
+          </div>
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+              <Image
+                src={token0.icon}
+                alt={token0.symbol}
+                width={20}
+                height={20}
+              />
+              <span className="font-semibold">{token0.symbol}</span>
+              <span className="ml-auto font-semibold">
+                {state.token0Amount}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Image
+                src={token1.icon}
+                alt={token1.symbol}
+                width={20}
+                height={20}
+              />
+              <span className="font-semibold">{token1.symbol}</span>
+              <span className="ml-auto font-semibold">
+                {state.token1Amount}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="mb-4">
+            <div className="text-sm text-neutral-600 mb-2">
+              You'll receive collected fees
+            </div>
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <Image
+                  src={token0.icon}
+                  alt={token0.symbol}
+                  width={20}
+                  height={20}
+                />
+                <span className="font-semibold">{token0.symbol}</span>
+                <span className="ml-auto font-semibold">
+                  {state.fees.token0}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Image
+                  src={token1.icon}
+                  alt={token1.symbol}
+                  width={20}
+                  height={20}
+                />
+                <span className="font-semibold">{token1.symbol}</span>
+                <span className="ml-auto font-semibold">
+                  {state.fees.token1}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {!isWalletConnected && (
+        <button
+          disabled
+          className="cursor-not-allowed w-full bg-gray-300 dark:bg-gray-500 text-neutral-400 font-bold py-3 rounded-xl text-lg mt-2"
+        >
+          Connect Wallet
+        </button>
+      )}
+      {isWalletConnected && (
+        <button className="w-full bg-gradient-to-r from-gradient-1 to-gradient-2 text-white font-bold py-3 rounded-xl text-lg mt-2">
+          Remove
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default RemoveLiquidityTab;
diff --git a/app/ui/components/WalletConnectModal.tsx b/app/ui/components/WalletConnectModal.tsx
new file mode 100644
index 0000000..175fa8f
--- /dev/null
+++ b/app/ui/components/WalletConnectModal.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { detectInstalledWallets } from "@/app/lib/extensions";
+import ModalWalletInfoSection from "./ModalWalletInfoSection";
+import ModalWalletsSection from "./ModalWalletsSection";
+
+// Main modal for connecting a wallet. Handles info/help section and wallet selection section.
+interface WalletConnectModalArgs {
+  open: boolean; // Whether the modal is open
+  onClose: () => void; // Handler to close the modal
+  onMetaMask: () => void; // Handler for MetaMask connect
+  // You can add more wallet handlers as needed
+}
+
+export default function WalletConnectModal({
+  open,
+  onClose,
+  onMetaMask,
+}: WalletConnectModalArgs) {
+  // Wallet sections (Installed, Not Installed, Others)
+  const [wallets, setWallets] = useState<
+    { section: string; items: WalletItem[] }[] | null
+  >(null);
+  // Whether to show the info/help section
+  const [showInfo, setShowInfo] = useState(false);
+
+  // Detect installed wallets on mount
+  useEffect(() => {
+    const wallets = detectInstalledWallets();
+    setWallets(wallets);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
+          <motion.div
+            initial={{ y: 80, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 80, opacity: 0 }}
+            transition={{
+              type: "spring" as const,
+              stiffness: 180,
+              damping: 24,
+              duration: 0.32,
+            }}
+            className="bg-white dark:bg-baseDark rounded-2xl p-0 w-96 border border-neutral-100 dark:border-neutral-700 shadow-2xl flex flex-col"
+          >
+            {/* Show info section or wallets section */}
+            {showInfo ? (
+              // Info/help section ("What is a Wallet?")
+              <ModalWalletInfoSection
+                onGetWallet={() =>
+                  window.open("https://metamask.io/download.html", "_blank")
+                }
+                onLearnMore={() =>
+                  window.open("https://ethereum.org/en/wallets/", "_blank")
+                }
+                onBack={() => setShowInfo(false)}
+                onClose={() => {
+                  setShowInfo(false);
+                  onClose();
+                }}
+              />
+            ) : (
+              <>
+                {/* Header with help and close buttons */}
+                <div className="flex items-center justify-between px-5 pt-4 pb-2 border-b border-neutral-100 dark:border-neutral-700">
+                  <button
+                    className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary text-xl text-baseBlack dark:text-baseWhite focus:outline-none"
+                    aria-label="Help"
+                    onClick={() => setShowInfo(true)}
+                  >
+                    <span className="font-bold">?</span>
+                  </button>
+                  <h2 className="text-lg font-bold text-baseBlack dark:text-baseWhite flex-1 text-center ">
+                    Connect a Wallet
+                  </h2>
+                  <button
+                    onClick={onClose}
+                    className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary text-2xl text-baseBlack dark:text-baseWhite focus:outline-none"
+                    aria-label="Close"
+                  >
+                    &times;
+                  </button>
+                </div>
+                {/* Wallet selection section */}
+                <ModalWalletsSection
+                  wallets={wallets}
+                  onMetaMask={onMetaMask}
+                  onClose={onClose}
+                />
+              </>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/app/ui/future/farmSlider.tsx b/app/ui/future/farmSlider.tsx
new file mode 100644
index 0000000..163b789
--- /dev/null
+++ b/app/ui/future/farmSlider.tsx
@@ -0,0 +1,109 @@
+"use client";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+interface SliderProps {
+  value: number;
+  onChange: (val: number) => void;
+}
+
+const FarmSlider: React.FC<SliderProps> = ({ value, onChange }) => {
+  const [inputValue, setInputValue] = useState(value.toString());
+
+  useEffect(() => {
+    setInputValue(value.toString());
+  }, [value]);
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = Number(e.target.value);
+    onChange(newValue);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    const numValue = Number(newValue);
+    if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
+      onChange(numValue);
+    }
+  };
+
+  const handleInputBlur = () => {
+    let numValue = Number(inputValue);
+    if (isNaN(numValue) || numValue < 0) {
+      numValue = 0;
+    } else if (numValue > 100) {
+      numValue = 100;
+    }
+    const rounded = Math.round(numValue);
+    setInputValue(rounded.toString());
+    onChange(rounded);
+  };
+
+  return (
+    <div className="w-full text-xl ">
+      <div className="flex items-center py-8 px-4">
+        {/* Slider */}
+        <div className="flex-grow relative">
+          {/* Background track */}
+          <div className="absolute h-1 w-full bg-gray-200 -translate-y-3/4 self-center"></div>
+
+          {/* Gradient track */}
+          <div
+            className="absolute h-1 bg-gradient-to-r from-gradient-1 to-gradient-2 -translate-y-3/4"
+            style={{ width: `${value}%` }}
+          ></div>
+
+          {/* Hexagon thumb */}
+          <div
+            className="absolute -translate-y-[60%] -translate-x-1/4 z-[5] pointer-events-none"
+            style={{ left: `${value}%` }}
+          >
+            <div
+              className="w-8 h-8 bg-gradient-to-r from-gradient-1 to-gradient-2 shadow-lg"
+              style={{
+                clipPath:
+                  "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
+              }}
+            >
+              <div
+                className="w-7 h-8 m-0.5 p-0.5 flex items-center justify-center"
+                style={{
+                  clipPath:
+                    "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
+                }}
+              >
+                <Image
+                  src="/vanna-white-logo.svg"
+                  alt="^_^"
+                  width="18"
+                  height="15"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Invisible range input */}
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            value={value}
+            onChange={handleSliderChange}
+            className="absolute left-0 w-full -translate-y-3/4 h-8 opacity-0 cursor-pointer z-[8]"
+          />
+
+          {/* Optional Tick Marks */}
+          <div className="absolute w-full flex justify-between mt-3.5 text-xs font-semibold text-neutral-500 pl-1.5">
+            {[0, 25, 50, 75, 100].map((val, i) => (
+              <span key={i}>{val}%</span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FarmSlider;
diff --git a/app/ui/header/burger-menu.tsx b/app/ui/header/burger-menu.tsx
index 32cf0fc..7ecc15a 100644
--- a/app/ui/header/burger-menu.tsx
+++ b/app/ui/header/burger-menu.tsx
@@ -4,7 +4,7 @@ import { CaretDown, CaretUp } from "@phosphor-icons/react";
 import { menuLinks, tradeMenuSubLinks } from "@/app/lib/static-values";
 import Image from "next/image";
 
-export default function BurgerMenu({ onClose }: BurgerMenuProps) {
+export default function BurgerMenu({ onClose, onConnectWallet }: BurgerMenuProps & { onConnectWallet?: () => void }) {
   const [isTradeExpanded, setIsTradeExpanded] = useState(false);
 
   return (
@@ -58,6 +58,15 @@ export default function BurgerMenu({ onClose }: BurgerMenuProps) {
             </div>
           ))}
         </div>
+        {/* Connect Wallet button at the bottom */}
+        <div className="p-4">
+          <button
+            className="w-full bg-gradient-to-r from-gradient-1 to-gradient-2 text-baseWhite rounded-lg text-base font-semibold py-3"
+            onClick={onConnectWallet}
+          >
+            Connect Wallet
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/app/ui/header/feature-card.tsx b/app/ui/header/feature-card.tsx
index 57e0296..89a7fd4 100644
--- a/app/ui/header/feature-card.tsx
+++ b/app/ui/header/feature-card.tsx
@@ -8,6 +8,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
   subtitle,
   isSoon,
 }) => {
+  
   return (
     <div className="bg-white dark:bg-baseDark rounded-lg px-2 py-3 flex items-start space-x-2 hover:bg-neutral-100 dark:hover:bg-baseDarkComplementary">
       <Image
diff --git a/app/ui/header/nav-links.tsx b/app/ui/header/nav-links.tsx
index 8c49f24..dfc7c6d 100644
--- a/app/ui/header/nav-links.tsx
+++ b/app/ui/header/nav-links.tsx
@@ -6,9 +6,11 @@ import { usePathname } from "next/navigation";
 import { CaretDown } from "@phosphor-icons/react";
 import FeatureCard from "./feature-card";
 import { menuLinks, tradeMenuSubLinks } from "@/app/lib/static-values";
+import { useNetwork } from "@/app/context/network-context";
 
 export default function NavLinks() {
   const pathname = usePathname();
+  const { currentNetwork } = useNetwork();
 
   return (
     <div className="flex flex-row gap-2 items-center justify-center text-sm">
@@ -50,21 +52,32 @@ export default function NavLinks() {
                 key={link.title + "2"}
                 className="absolute left-2 top-10 z-50 mt-2 rounded-md shadow-xl bg-white dark:bg-baseDark ring-1 ring-black dark:ring-neutral-800 ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
               >
-                {tradeMenuSubLinks.map((subItem, index) => (
-                  <Link
-                    key={index}
-                    href={subItem.href}
-                    className="block p-1 w-72 text-sm"
-                  >
-                    <FeatureCard
-                      key={"a" + index}
-                      icon={subItem.icon}
-                      title={subItem.title}
-                      subtitle={subItem.subtitle}
-                      isSoon={subItem.title === "Options"}
-                    />
-                  </Link>
-                ))}
+                {tradeMenuSubLinks
+                  .filter((subItem) => {
+                    // On Katana: only allow "Farm"
+                    if (currentNetwork?.name === "Katana") {
+                      return subItem.title === "Farm";
+                    } else {
+                      return subItem.title !=="Farm"
+                    }
+                    // On other networks: allow all
+                    return true;
+                  })
+                  .map((subItem, index) => (
+                    <Link
+                      key={index}
+                      href={subItem.href}
+                      className="block p-1 w-72 text-sm"
+                    >
+                      <FeatureCard
+                        key={"a" + index}
+                        icon={subItem.icon}
+                        title={subItem.title}
+                        subtitle={subItem.subtitle}
+                        isSoon={subItem.title === "Options"}
+                      />
+                    </Link>
+                  ))}
               </div>
             </div>
           );
diff --git a/app/ui/header/navbar-button.tsx b/app/ui/header/navbar-button.tsx
index 70cfa63..a0f417e 100644
--- a/app/ui/header/navbar-button.tsx
+++ b/app/ui/header/navbar-button.tsx
@@ -19,6 +19,7 @@ import { ethers } from "ethers";
 import { opAddressList } from "@/app/lib/web3-constants";
 import Faucet from "../../abi/vanna/v1/out/Faucet.sol/Faucet.json";
 import Loader from "../components/loader";
+import WalletConnectModal from "../components/WalletConnectModal";
 
 declare global {
   interface Window {
@@ -34,6 +35,7 @@ export default function NavbarButtons() {
   const { account, activate, deactivate, chainId, library } = useWeb3React();
   const [disable, setDisable] = useState(true);
   const [loading, setLoading] = useState(false);
+  const [walletModalOpen, setWalletModalOpen] = useState(false);
 
   const walletConnect = useCallback(async () => {
     try {
@@ -263,9 +265,7 @@ export default function NavbarButtons() {
       {!account && (
         <button
           className="bg-gradient-to-r from-gradient-1 to-gradient-2 w-40 h-11 text-baseWhite rounded-lg text-base font-semibold"
-          onClick={() => {
-            walletConnect();
-          }}
+          onClick={() => setWalletModalOpen(true)}
         >
           Connect Wallet
         </button>
@@ -281,6 +281,15 @@ export default function NavbarButtons() {
         </button>
       )}
 
+      <WalletConnectModal
+        open={walletModalOpen}
+        onClose={() => setWalletModalOpen(false)}
+        onMetaMask={() => {
+          setWalletModalOpen(false);
+          walletConnect();
+        }}
+      />
+
       <div className="fixed bottom-5 left-5 w-72">
         {notifications.map(({ id, type, message }) => (
           <Notification
diff --git a/app/ui/header/network-dropdown.tsx b/app/ui/header/network-dropdown.tsx
index b6dc0af..ab114bd 100644
--- a/app/ui/header/network-dropdown.tsx
+++ b/app/ui/header/network-dropdown.tsx
@@ -53,7 +53,6 @@ export const NetworkDropdown = () => {
         return;
       }
     }
-
     setSelectedNetwork(network);
     setCurrentNetwork(network);
   };
@@ -69,8 +68,11 @@ export const NetworkDropdown = () => {
       } else if (chainId === 10) {
         setSelectedNetwork(networks[2]);
         setCurrentNetwork(networks[2]);
+      } else if (chainId === 747474) {
+        setSelectedNetwork(networks[3]);
+        setCurrentNetwork(networks[3]);
       } else {
-        switchNetwork(networks[0]);
+        switchNetwork(networks[0])
       }
     }
 
diff --git a/middleware.ts b/middleware.ts
index ef144c4..bd7ab45 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { isTokenValid } from "./app/lib/access-utils";
+import Cookie from 'js-cookie'
 
 export function middleware(request: NextRequest) {
   // Allow direct access to SVG files in the root directory
@@ -17,6 +18,21 @@ export function middleware(request: NextRequest) {
     return NextResponse.redirect(new URL("/access", request.url));
   }
 
+  const network = request.cookies.get("network")?.value
+  const isTradeurl = request.nextUrl.pathname.startsWith("/trade")
+  const isFarmPage = request.nextUrl.pathname === "/trade/farm"
+  const isFarmDetailedPage = request.nextUrl.pathname.startsWith("/trade/farm/")
+
+  if(network==="Katana" && isTradeurl && !isFarmPage && !isFarmDetailedPage){
+    const url = request.nextUrl.clone()
+    url.pathname = "/"
+    return NextResponse.redirect(url)
+  } else if (network!=="Katana" && isTradeurl && (isFarmPage || isFarmDetailedPage)) {
+    const url = request.nextUrl.clone()
+    url.pathname = "/"
+    return NextResponse.redirect(url)
+  }
+
   return NextResponse.next();
 }
 
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..5f27680 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
+const nextConfig = {
+    images: {
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: 'source.unsplash.com',
+          pathname: '/random/**',
+        },
+      ],
+    },
+  };
+  
+  export default nextConfig;
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 749f6e8..6cd5bfe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,8 @@
         "@web3-react/injected-connector": "^6.0.7",
         "axios": "^1.7.7",
         "ethers": "^5.7.2",
+        "framer-motion": "^12.23.6",
+        "js-cookie": "^3.0.5",
         "next": "14.2.8",
         "react": "^18",
         "react-dom": "^18",
@@ -24,6 +26,7 @@
       },
       "devDependencies": {
         "@metamask/providers": "^18.2.0",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -1614,6 +1617,13 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3945,6 +3955,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.6.tgz",
+      "integrity": "sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.6",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4892,6 +4929,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-sha3": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
@@ -5173,6 +5219,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.6.tgz",
+      "integrity": "sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 6ed43c6..5bd77bb 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "@web3-react/injected-connector": "^6.0.7",
     "axios": "^1.7.7",
     "ethers": "^5.7.2",
+    "framer-motion": "^12.23.6",
+    "js-cookie": "^3.0.5",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18",
@@ -25,6 +27,7 @@
   },
   "devDependencies": {
     "@metamask/providers": "^18.2.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/public/acala-ausd-seeklogo.svg b/public/acala-ausd-seeklogo.svg
new file mode 100644
index 0000000..7f05f87
--- /dev/null
+++ b/public/acala-ausd-seeklogo.svg
@@ -0,0 +1,248 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;}
+	.st1{fill:none;stroke:#828282;stroke-width:3.8653;}
+	.st2{fill:url(#SVGID_1_);fill-opacity:0.8;}
+	.st3{fill:none;stroke:url(#SVGID_00000029024710971517382010000004502142346410132112_);stroke-width:15.4611;}
+	.st4{fill:none;stroke:url(#SVGID_00000122711379963459130670000011318273611621973178_);stroke-width:15.4611;}
+	.st5{fill:none;stroke:url(#SVGID_00000024682131895414550220000011792830803600346770_);stroke-width:15.4611;}
+	.st6{fill:none;stroke:url(#SVGID_00000091736479193310345940000001242870258515956617_);stroke-width:15.4611;}
+	.st7{fill:none;stroke:url(#SVGID_00000023961418791106228060000001272675244881241010_);stroke-width:15.4611;stroke-opacity:0.5;}
+	.st8{fill:url(#SVGID_00000119839159375058209010000000618377757954989731_);fill-opacity:0.7;}
+	.st9{fill:url(#SVGID_00000176733955412632465630000003959148129311842436_);}
+	.st10{fill:url(#SVGID_00000134236137641807094670000005953246537452081037_);}
+	.st11{fill:url(#SVGID_00000152972012901367581200000013986884173187085999_);}
+	.st12{fill:url(#SVGID_00000028285151277975576770000006038198278476185253_);fill-opacity:0.7;}
+	.st13{fill:url(#SVGID_00000065795875665014802300000011481394982196501380_);}
+	.st14{fill:url(#SVGID_00000005229089627151344040000001202062685466653584_);}
+	.st15{fill:url(#SVGID_00000131325937379369038620000005465686827904902792_);}
+	.st16{fill:url(#SVGID_00000159432633012172359130000017947777817143123076_);fill-opacity:0.7;}
+	.st17{fill:url(#SVGID_00000178908415160569303410000007472823766901047433_);}
+	.st18{fill:url(#SVGID_00000158730642367339228910000014458577490985884606_);}
+	.st19{fill:url(#SVGID_00000094605303717488283950000012906932894403976107_);}
+	
+		.st20{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000085212264639088161870000006667887474453250187_);fill-opacity:0.7;}
+	.st21{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000168819647531320885300000013275639327906193571_);}
+	.st22{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000083071001267523598820000000823404300307525788_);}
+	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000079464478170957787410000000686806123316080305_);}
+</style>
+<g>
+	<g class="st0">
+		<circle class="st1" cx="399.8" cy="299.6" r="249.3"/>
+	</g>
+	<g>
+		
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="736.0746" y1="-199.9883" x2="316.9355" y2="472.8625" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#645AFF"/>
+			<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+			<stop  offset="1" style="stop-color:#FF4C3B"/>
+		</linearGradient>
+		<circle class="st2" cx="399.8" cy="298.2" r="238.7"/>
+		
+			<linearGradient id="SVGID_00000036214742053768411110000010114200120945566113_" gradientUnits="userSpaceOnUse" x1="736.0746" y1="-199.9883" x2="316.9355" y2="472.8625" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#645AFF"/>
+			<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+			<stop  offset="1" style="stop-color:#FF4C3B"/>
+		</linearGradient>
+		
+			<circle style="fill:none;stroke:url(#SVGID_00000036214742053768411110000010114200120945566113_);stroke-width:15.4611;" cx="399.8" cy="298.2" r="231"/>
+	</g>
+	<g>
+		
+			<linearGradient id="SVGID_00000062898347651149819810000009588620132481790135_" gradientUnits="userSpaceOnUse" x1="684.3386" y1="-118.9537" x2="332.6042" y2="445.6902" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#645AFF"/>
+			<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+			<stop  offset="1" style="stop-color:#FF4C3B"/>
+		</linearGradient>
+		
+			<circle style="fill:none;stroke:url(#SVGID_00000062898347651149819810000009588620132481790135_);stroke-width:15.4611;" cx="398.8" cy="298.6" r="192.6"/>
+		
+			<linearGradient id="SVGID_00000000183070120166942550000010317887028289268922_" gradientUnits="userSpaceOnUse" x1="230.1403" y1="513.1338" x2="648.1806" y2="56.0115" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.78"/>
+			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</linearGradient>
+		
+			<circle style="fill:none;stroke:url(#SVGID_00000000183070120166942550000010317887028289268922_);stroke-width:15.4611;" cx="398.8" cy="298.6" r="192.6"/>
+		
+			<linearGradient id="SVGID_00000024683894786836478420000016343728740990779812_" gradientUnits="userSpaceOnUse" x1="619.0717" y1="434.3213" x2="88.6708" y2="92.3516" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.76"/>
+			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</linearGradient>
+		
+			<circle style="fill:none;stroke:url(#SVGID_00000024683894786836478420000016343728740990779812_);stroke-width:15.4611;" cx="398.8" cy="298.6" r="192.6"/>
+		
+			<linearGradient id="SVGID_00000058590015339003926960000014734629193829487038_" gradientUnits="userSpaceOnUse" x1="433.6378" y1="-91.1173" x2="412.6996" y2="506.9806" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</linearGradient>
+		
+			<circle style="fill:none;stroke:url(#SVGID_00000058590015339003926960000014734629193829487038_);stroke-width:15.4611;stroke-opacity:0.5;" cx="398.8" cy="298.6" r="192.6"/>
+	</g>
+</g>
+<g>
+	
+		<linearGradient id="SVGID_00000093145741765202750110000016025660846132034981_" gradientUnits="userSpaceOnUse" x1="390.3144" y1="115.7853" x2="360.7256" y2="236.2872" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#645AFF"/>
+		<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+		<stop  offset="1" style="stop-color:#FF4C3B"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000093145741765202750110000016025660846132034981_);fill-opacity:0.7;" d="M366.7,353.3v41.6
+		c0,4.7-1,8.8-3,12.3c-2,3.4-4.9,6.1-8.6,7.9c-3.8,1.8-8.2,2.7-13.3,2.7c-7.7,0-13.8-2-18.3-6c-4.5-4-6.7-9.5-6.8-16.5v-41.9h15.4
+		v42.2c0.2,7,3.4,10.4,9.7,10.4c3.2,0,5.6-0.9,7.2-2.6c1.6-1.7,2.4-4.6,2.4-8.5v-41.5H366.7z"/>
+	
+		<linearGradient id="SVGID_00000023268809272928620950000010112616633818138779_" gradientUnits="userSpaceOnUse" x1="352.7442" y1="257.0937" x2="400.7683" y2="115.642" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.88"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000023268809272928620950000010112616633818138779_);" d="M366.7,353.3v41.6c0,4.7-1,8.8-3,12.3
+		c-2,3.4-4.9,6.1-8.6,7.9c-3.8,1.8-8.2,2.7-13.3,2.7c-7.7,0-13.8-2-18.3-6c-4.5-4-6.7-9.5-6.8-16.5v-41.9h15.4v42.2
+		c0.2,7,3.4,10.4,9.7,10.4c3.2,0,5.6-0.9,7.2-2.6c1.6-1.7,2.4-4.6,2.4-8.5v-41.5H366.7z"/>
+	
+		<linearGradient id="SVGID_00000016774669312962876820000008606626212896797350_" gradientUnits="userSpaceOnUse" x1="383.1641" y1="301.5207" x2="343.5933" y2="160.4014" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.81"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000016774669312962876820000008606626212896797350_);" d="M366.7,353.3v41.6c0,4.7-1,8.8-3,12.3
+		c-2,3.4-4.9,6.1-8.6,7.9c-3.8,1.8-8.2,2.7-13.3,2.7c-7.7,0-13.8-2-18.3-6c-4.5-4-6.7-9.5-6.8-16.5v-41.9h15.4v42.2
+		c0.2,7,3.4,10.4,9.7,10.4c3.2,0,5.6-0.9,7.2-2.6c1.6-1.7,2.4-4.6,2.4-8.5v-41.5H366.7z"/>
+	
+		<linearGradient id="SVGID_00000109722134881942986370000004573539548861357478_" gradientUnits="userSpaceOnUse" x1="362.63" y1="281.1784" x2="362.63" y2="153.8195" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000109722134881942986370000004573539548861357478_);" d="M366.7,353.3v41.6c0,4.7-1,8.8-3,12.3
+		c-2,3.4-4.9,6.1-8.6,7.9c-3.8,1.8-8.2,2.7-13.3,2.7c-7.7,0-13.8-2-18.3-6c-4.5-4-6.7-9.5-6.8-16.5v-41.9h15.4v42.2
+		c0.2,7,3.4,10.4,9.7,10.4c3.2,0,5.6-0.9,7.2-2.6c1.6-1.7,2.4-4.6,2.4-8.5v-41.5H366.7z"/>
+	
+		<linearGradient id="SVGID_00000014607163522053255760000006662711139579803311_" gradientUnits="userSpaceOnUse" x1="442.7844" y1="128.6691" x2="413.1957" y2="249.171" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#645AFF"/>
+		<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+		<stop  offset="1" style="stop-color:#FF4C3B"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000014607163522053255760000006662711139579803311_);fill-opacity:0.7;" d="M409.1,400
+		c0-2.2-0.8-4-2.4-5.2c-1.6-1.3-4.4-2.5-8.3-3.9c-4-1.3-7.2-2.6-9.8-3.9c-8.2-4-12.4-9.6-12.4-16.7c0-3.5,1-6.6,3.1-9.3
+		c2.1-2.7,5-4.8,8.7-6.3c3.8-1.5,8-2.3,12.7-2.3c4.6,0,8.7,0.8,12.3,2.4c3.6,1.6,6.5,4,8.5,7c2,3,3,6.4,3,10.3h-15.3
+		c0-2.6-0.8-4.6-2.4-6c-1.6-1.4-3.7-2.1-6.4-2.1c-2.7,0-4.9,0.6-6.5,1.8c-1.6,1.2-2.4,2.7-2.4,4.6c0,1.6,0.9,3.1,2.6,4.5
+		c1.7,1.3,4.8,2.7,9.2,4.1c4.4,1.4,8,2.9,10.8,4.5c6.9,4,10.3,9.4,10.3,16.4c0,5.6-2.1,9.9-6.3,13.1c-4.2,3.2-9.9,4.8-17.3,4.8
+		c-5.2,0-9.8-0.9-14-2.8c-4.2-1.9-7.3-4.4-9.4-7.6c-2.1-3.2-3.1-6.9-3.1-11.1h15.4c0,3.4,0.9,5.9,2.6,7.6c1.8,1.6,4.6,2.4,8.6,2.4
+		c2.5,0,4.5-0.5,6-1.6C408.4,403.5,409.1,401.9,409.1,400z"/>
+	
+		<linearGradient id="SVGID_00000117659494327106420540000008796039294736344511_" gradientUnits="userSpaceOnUse" x1="402.0663" y1="273.839" x2="450.0905" y2="132.3873" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.88"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000117659494327106420540000008796039294736344511_);" d="M409.1,400c0-2.2-0.8-4-2.4-5.2
+		c-1.6-1.3-4.4-2.5-8.3-3.9c-4-1.3-7.2-2.6-9.8-3.9c-8.2-4-12.4-9.6-12.4-16.7c0-3.5,1-6.6,3.1-9.3c2.1-2.7,5-4.8,8.7-6.3
+		c3.8-1.5,8-2.3,12.7-2.3c4.6,0,8.7,0.8,12.3,2.4c3.6,1.6,6.5,4,8.5,7c2,3,3,6.4,3,10.3h-15.3c0-2.6-0.8-4.6-2.4-6
+		c-1.6-1.4-3.7-2.1-6.4-2.1c-2.7,0-4.9,0.6-6.5,1.8c-1.6,1.2-2.4,2.7-2.4,4.6c0,1.6,0.9,3.1,2.6,4.5c1.7,1.3,4.8,2.7,9.2,4.1
+		c4.4,1.4,8,2.9,10.8,4.5c6.9,4,10.3,9.4,10.3,16.4c0,5.6-2.1,9.9-6.3,13.1c-4.2,3.2-9.9,4.8-17.3,4.8c-5.2,0-9.8-0.9-14-2.8
+		c-4.2-1.9-7.3-4.4-9.4-7.6c-2.1-3.2-3.1-6.9-3.1-11.1h15.4c0,3.4,0.9,5.9,2.6,7.6c1.8,1.6,4.6,2.4,8.6,2.4c2.5,0,4.5-0.5,6-1.6
+		C408.4,403.5,409.1,401.9,409.1,400z"/>
+	
+		<linearGradient id="SVGID_00000005968049528180272590000012938361737628076457_" gradientUnits="userSpaceOnUse" x1="439.9585" y1="285.5952" x2="400.3878" y2="144.4758" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.81"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000005968049528180272590000012938361737628076457_);" d="M409.1,400c0-2.2-0.8-4-2.4-5.2
+		c-1.6-1.3-4.4-2.5-8.3-3.9c-4-1.3-7.2-2.6-9.8-3.9c-8.2-4-12.4-9.6-12.4-16.7c0-3.5,1-6.6,3.1-9.3c2.1-2.7,5-4.8,8.7-6.3
+		c3.8-1.5,8-2.3,12.7-2.3c4.6,0,8.7,0.8,12.3,2.4c3.6,1.6,6.5,4,8.5,7c2,3,3,6.4,3,10.3h-15.3c0-2.6-0.8-4.6-2.4-6
+		c-1.6-1.4-3.7-2.1-6.4-2.1c-2.7,0-4.9,0.6-6.5,1.8c-1.6,1.2-2.4,2.7-2.4,4.6c0,1.6,0.9,3.1,2.6,4.5c1.7,1.3,4.8,2.7,9.2,4.1
+		c4.4,1.4,8,2.9,10.8,4.5c6.9,4,10.3,9.4,10.3,16.4c0,5.6-2.1,9.9-6.3,13.1c-4.2,3.2-9.9,4.8-17.3,4.8c-5.2,0-9.8-0.9-14-2.8
+		c-4.2-1.9-7.3-4.4-9.4-7.6c-2.1-3.2-3.1-6.9-3.1-11.1h15.4c0,3.4,0.9,5.9,2.6,7.6c1.8,1.6,4.6,2.4,8.6,2.4c2.5,0,4.5-0.5,6-1.6
+		C408.4,403.5,409.1,401.9,409.1,400z"/>
+	
+		<linearGradient id="SVGID_00000054982768047127716420000017376758511563041200_" gradientUnits="userSpaceOnUse" x1="420.3531" y1="281.1784" x2="420.3531" y2="153.8195" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000054982768047127716420000017376758511563041200_);" d="M409.1,400c0-2.2-0.8-4-2.4-5.2
+		c-1.6-1.3-4.4-2.5-8.3-3.9c-4-1.3-7.2-2.6-9.8-3.9c-8.2-4-12.4-9.6-12.4-16.7c0-3.5,1-6.6,3.1-9.3c2.1-2.7,5-4.8,8.7-6.3
+		c3.8-1.5,8-2.3,12.7-2.3c4.6,0,8.7,0.8,12.3,2.4c3.6,1.6,6.5,4,8.5,7c2,3,3,6.4,3,10.3h-15.3c0-2.6-0.8-4.6-2.4-6
+		c-1.6-1.4-3.7-2.1-6.4-2.1c-2.7,0-4.9,0.6-6.5,1.8c-1.6,1.2-2.4,2.7-2.4,4.6c0,1.6,0.9,3.1,2.6,4.5c1.7,1.3,4.8,2.7,9.2,4.1
+		c4.4,1.4,8,2.9,10.8,4.5c6.9,4,10.3,9.4,10.3,16.4c0,5.6-2.1,9.9-6.3,13.1c-4.2,3.2-9.9,4.8-17.3,4.8c-5.2,0-9.8-0.9-14-2.8
+		c-4.2-1.9-7.3-4.4-9.4-7.6c-2.1-3.2-3.1-6.9-3.1-11.1h15.4c0,3.4,0.9,5.9,2.6,7.6c1.8,1.6,4.6,2.4,8.6,2.4c2.5,0,4.5-0.5,6-1.6
+		C408.4,403.5,409.1,401.9,409.1,400z"/>
+	
+		<linearGradient id="SVGID_00000168089112376529922480000017699587549981954973_" gradientUnits="userSpaceOnUse" x1="494.233" y1="141.302" x2="464.6443" y2="261.804" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#645AFF"/>
+		<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+		<stop  offset="1" style="stop-color:#FF4C3B"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000168089112376529922480000017699587549981954973_);fill-opacity:0.7;" d="M432.3,416.8v-63.6h20.5
+		c5.6,0,10.7,1.3,15.2,3.8c4.5,2.5,8,6.1,10.5,10.8c2.5,4.6,3.8,9.8,3.8,15.6v2.9c0,5.8-1.2,11-3.7,15.7c-2.4,4.6-5.9,8.2-10.4,10.8
+		c-4.5,2.6-9.4,3.9-14.9,3.9H432.3z M447.7,365.1v39.9h5.3c4.4,0,7.8-1.6,10.1-4.7c2.4-3.1,3.5-7.8,3.5-14v-2.8
+		c0-6.1-1.2-10.8-3.5-13.9c-2.4-3.1-5.8-4.7-10.3-4.7H447.7z"/>
+	
+		<linearGradient id="SVGID_00000133505443390478131550000005058138445180032644_" gradientUnits="userSpaceOnUse" x1="450.0593" y1="290.1331" x2="498.0834" y2="148.6813" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.88"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000133505443390478131550000005058138445180032644_);" d="M432.3,416.8v-63.6h20.5
+		c5.6,0,10.7,1.3,15.2,3.8c4.5,2.5,8,6.1,10.5,10.8c2.5,4.6,3.8,9.8,3.8,15.6v2.9c0,5.8-1.2,11-3.7,15.7c-2.4,4.6-5.9,8.2-10.4,10.8
+		c-4.5,2.6-9.4,3.9-14.9,3.9H432.3z M447.7,365.1v39.9h5.3c4.4,0,7.8-1.6,10.1-4.7c2.4-3.1,3.5-7.8,3.5-14v-2.8
+		c0-6.1-1.2-10.8-3.5-13.9c-2.4-3.1-5.8-4.7-10.3-4.7H447.7z"/>
+	
+		<linearGradient id="SVGID_00000132784020348421476110000002386481010321006997_" gradientUnits="userSpaceOnUse" x1="489.4211" y1="271.7256" x2="449.8503" y2="130.6062" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.81"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000132784020348421476110000002386481010321006997_);" d="M432.3,416.8v-63.6h20.5
+		c5.6,0,10.7,1.3,15.2,3.8c4.5,2.5,8,6.1,10.5,10.8c2.5,4.6,3.8,9.8,3.8,15.6v2.9c0,5.8-1.2,11-3.7,15.7c-2.4,4.6-5.9,8.2-10.4,10.8
+		c-4.5,2.6-9.4,3.9-14.9,3.9H432.3z M447.7,365.1v39.9h5.3c4.4,0,7.8-1.6,10.1-4.7c2.4-3.1,3.5-7.8,3.5-14v-2.8
+		c0-6.1-1.2-10.8-3.5-13.9c-2.4-3.1-5.8-4.7-10.3-4.7H447.7z"/>
+	
+		<linearGradient id="SVGID_00000067952767258724749450000013344523592094331307_" gradientUnits="userSpaceOnUse" x1="478.2743" y1="281.1784" x2="478.2743" y2="153.8195" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000067952767258724749450000013344523592094331307_);" d="M432.3,416.8v-63.6h20.5
+		c5.6,0,10.7,1.3,15.2,3.8c4.5,2.5,8,6.1,10.5,10.8c2.5,4.6,3.8,9.8,3.8,15.6v2.9c0,5.8-1.2,11-3.7,15.7c-2.4,4.6-5.9,8.2-10.4,10.8
+		c-4.5,2.6-9.4,3.9-14.9,3.9H432.3z M447.7,365.1v39.9h5.3c4.4,0,7.8-1.6,10.1-4.7c2.4-3.1,3.5-7.8,3.5-14v-2.8
+		c0-6.1-1.2-10.8-3.5-13.9c-2.4-3.1-5.8-4.7-10.3-4.7H447.7z"/>
+	
+		<linearGradient id="SVGID_00000114786115027065030690000009701969507728172181_" gradientUnits="userSpaceOnUse" x1="492.533" y1="181.4361" x2="368.6663" y2="403.306" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#645AFF"/>
+		<stop  offset="0.6376" style="stop-color:#E40C5B"/>
+		<stop  offset="1" style="stop-color:#FF4C3B"/>
+	</linearGradient>
+	
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000114786115027065030690000009701969507728172181_);fill-opacity:0.7;" d="
+		M399.8,280.3c-6.3,0-12.6,0.5-18.8,1.6l9.4-16.2c3.2-0.2,6.3-0.3,9.4-0.3c7.4,0,14.7,0.6,22,1.8l-36.2-62.7l-60.3,104.5l-8.6-14.9
+		l68.8-119.2l0.1,0.2l0.1-0.2l83,143.8h-17.2L432,284.9C421.6,281.8,410.7,280.2,399.8,280.3L399.8,280.3z M474,309.1l-80.3-139.3
+		h17.2l71.7,124.3L474,309.1z M394.3,238.5l-33,57.2c11.8-3.6,25.7-5.2,38.8-5.2c1.1,0,2.1,0,3.2,0c7.4,0.2,14.9,0.9,22.2,2.3
+		l11,19.1c-11.6-4.3-24-6.5-36.4-6.5c-18.1-0.1-35.9,4.4-51.8,12.9l0.2-0.4l-0.3,0.6h-17.2l54.8-95L394.3,238.5z"/>
+	
+		<linearGradient id="SVGID_00000150824118497754197770000004326326690249757320_" gradientUnits="userSpaceOnUse" x1="335.6038" y1="433.0314" x2="509.4176" y2="207.8766" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.88"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000150824118497754197770000004326326690249757320_);" d="
+		M399.8,280.3c-6.3,0-12.6,0.5-18.8,1.6l9.4-16.2c3.2-0.2,6.3-0.3,9.4-0.3c7.4,0,14.7,0.6,22,1.8l-36.2-62.7l-60.3,104.5l-8.6-14.9
+		l68.8-119.2l0.1,0.2l0.1-0.2l83,143.8h-17.2L432,284.9C421.6,281.8,410.7,280.2,399.8,280.3L399.8,280.3z M474,309.1l-80.3-139.3
+		h17.2l71.7,124.3L474,309.1z M394.3,238.5l-33,57.2c11.8-3.6,25.7-5.2,38.8-5.2c1.1,0,2.1,0,3.2,0c7.4,0.2,14.9,0.9,22.2,2.3
+		l11,19.1c-11.6-4.3-24-6.5-36.4-6.5c-18.1-0.1-35.9,4.4-51.8,12.9l0.2-0.4l-0.3,0.6h-17.2l54.8-95L394.3,238.5z"/>
+	
+		<linearGradient id="SVGID_00000084500357343845909280000001099383875915023008_" gradientUnits="userSpaceOnUse" x1="515.2729" y1="463.2975" x2="358.1108" y2="216.7891" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.81"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000084500357343845909280000001099383875915023008_);" d="
+		M399.8,280.3c-6.3,0-12.6,0.5-18.8,1.6l9.4-16.2c3.2-0.2,6.3-0.3,9.4-0.3c7.4,0,14.7,0.6,22,1.8l-36.2-62.7l-60.3,104.5l-8.6-14.9
+		l68.8-119.2l0.1,0.2l0.1-0.2l83,143.8h-17.2L432,284.9C421.6,281.8,410.7,280.2,399.8,280.3L399.8,280.3z M474,309.1l-80.3-139.3
+		h17.2l71.7,124.3L474,309.1z M394.3,238.5l-33,57.2c11.8-3.6,25.7-5.2,38.8-5.2c1.1,0,2.1,0,3.2,0c7.4,0.2,14.9,0.9,22.2,2.3
+		l11,19.1c-11.6-4.3-24-6.5-36.4-6.5c-18.1-0.1-35.9,4.4-51.8,12.9l0.2-0.4l-0.3,0.6h-17.2l54.8-95L394.3,238.5z"/>
+	
+		<linearGradient id="SVGID_00000111161414235122207570000013506690115900167567_" gradientUnits="userSpaceOnUse" x1="420.5657" y1="501.1434" x2="420.5657" y2="211.045" gradientTransform="matrix(1 0 0 -1 -20.9449 604.3622)">
+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	</linearGradient>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000111161414235122207570000013506690115900167567_);" d="
+		M399.8,280.3c-6.3,0-12.6,0.5-18.8,1.6l9.4-16.2c3.2-0.2,6.3-0.3,9.4-0.3c7.4,0,14.7,0.6,22,1.8l-36.2-62.7l-60.3,104.5l-8.6-14.9
+		l68.8-119.2l0.1,0.2l0.1-0.2l83,143.8h-17.2L432,284.9C421.6,281.8,410.7,280.2,399.8,280.3L399.8,280.3z M474,309.1l-80.3-139.3
+		h17.2l71.7,124.3L474,309.1z M394.3,238.5l-33,57.2c11.8-3.6,25.7-5.2,38.8-5.2c1.1,0,2.1,0,3.2,0c7.4,0.2,14.9,0.9,22.2,2.3
+		l11,19.1c-11.6-4.3-24-6.5-36.4-6.5c-18.1-0.1-35.9,4.4-51.8,12.9l0.2-0.4l-0.3,0.6h-17.2l54.8-95L394.3,238.5z"/>
+</g>
+</svg>
diff --git a/public/bitcoin.svg b/public/bitcoin.svg
new file mode 100644
index 0000000..cae4d6a
--- /dev/null
+++ b/public/bitcoin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0.004 0 63.993 64"><path d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z" fill="#f7931a"/><path d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/coinbase-wallet-icon.svg b/public/coinbase-wallet-icon.svg
new file mode 100644
index 0000000..c47fdf9
--- /dev/null
+++ b/public/coinbase-wallet-icon.svg
@@ -0,0 +1,4 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1024" height="1024" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z" fill="white"/>
+</svg>
diff --git a/public/katana.png b/public/katana.png
new file mode 100644
index 0000000..8dafb75
Binary files /dev/null and b/public/katana.png differ
diff --git a/public/lbtc-icon.svg b/public/lbtc-icon.svg
new file mode 100644
index 0000000..1fed0b1
--- /dev/null
+++ b/public/lbtc-icon.svg
@@ -0,0 +1,26 @@
+<svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_7129_8163" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="280" height="280">
+<circle cx="140" cy="140" r="140" fill="#162E2F"/>
+</mask>
+<g mask="url(#mask0_7129_8163)">
+<circle cx="140" cy="140" r="140" fill="#162E2F"/>
+<path d="M-52.5 43.75H164.5V87.15L186.2 114.275L164.5 141.4L202.475 165.813L164.5 190.225V239.05H-52.5V43.75Z" fill="url(#paint0_linear_7129_8163)"/>
+<rect y="87.5" width="105" height="26.25" fill="url(#paint1_linear_7129_8163)"/>
+<rect x="105" y="192.5" width="105" height="26.25" transform="rotate(-180 105 192.5)" fill="url(#paint2_linear_7129_8163)"/>
+<path d="M207.996 103.753C205.911 82.4357 187.51 75.3196 164.289 73.3233L164.239 43.75L146.251 43.7828L146.301 72.5772C141.572 72.5848 136.739 72.6867 131.936 72.7906L131.891 43.8051L113.913 43.8353L113.957 73.4005C110.064 73.4869 106.239 73.5666 102.51 73.5746L102.508 73.4822L77.699 73.5148L77.7361 92.7411C77.7361 92.7411 91.0185 92.466 90.7984 92.7098C98.0831 92.6994 100.462 96.9292 101.16 100.581C101.206 127.605 101.251 154.569 101.293 181.598C100.978 183.893 99.6369 187.556 94.5461 187.572C94.7775 187.776 81.4712 187.591 81.4712 187.591L77.9326 209.096L101.341 209.056C105.698 209.055 109.984 209.121 114.193 209.139L114.251 239.05L132.219 239.022L132.168 209.427C137.102 209.522 141.875 209.553 146.538 209.541L146.579 238.998L164.568 238.965L164.522 209.108C194.76 207.321 215.913 199.662 218.492 171.236C220.575 148.348 209.802 138.156 192.63 134.059C203.051 128.726 209.555 119.352 208.003 103.754L207.997 103.751L207.996 103.753ZM182.938 167.751C182.985 190.103 144.738 187.626 132.547 187.658L132.486 148.028C144.679 148.011 182.901 144.437 182.939 167.751L182.938 167.751ZM174.478 111.852C174.507 132.188 142.609 129.869 132.455 129.887L132.396 93.9452C142.55 93.9276 174.441 90.643 174.479 111.852L174.478 111.852Z" fill="#C4FDF2"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_7129_8163" x1="202.475" y1="141.4" x2="-52.5" y2="141.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4E988D"/>
+<stop offset="1" stop-color="#264C4A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7129_8163" x1="52.5" y1="87.5" x2="52.5" y2="113.75" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.1"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7129_8163" x1="157.5" y1="192.5" x2="157.5" y2="218.75" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.1"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/lbtc-icon.webp b/public/lbtc-icon.webp
new file mode 100644
index 0000000..a35837e
Binary files /dev/null and b/public/lbtc-icon.webp differ
diff --git a/public/leaves-icon.png b/public/leaves-icon.png
new file mode 100644
index 0000000..525c42d
Binary files /dev/null and b/public/leaves-icon.png differ
diff --git a/public/leaves-icon.svg b/public/leaves-icon.svg
new file mode 100644
index 0000000..b7ec676
--- /dev/null
+++ b/public/leaves-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 114.86"><defs><style>.cls-1{fill:#01a437;}</style></defs><title>leaves</title><path class="cls-1" d="M59.07,110.77C110.92,105,139.6,71.12,112.44,0c-21.29,14.9-50.39,24.6-65,44.55C57,52.94,64.89,62.23,67.08,74.37c13.19-16.08,27.63-30.72,35.23-47-7.79,39.07-20,53.84-38.78,73.81a93.64,93.64,0,0,1-4.46,9.62Zm-14.9,4C4,105-15.18,76.09,14.27,24.75c23.8,22.92,65.79,37.48,38.39,85.86a27.08,27.08,0,0,1-1.83,2.93C45.9,89.62,26.21,70.69,20.43,50.61,21.77,83.42,31.23,93,45.88,114.86c-.57,0-1.14-.06-1.71-.13Z"/></svg>
\ No newline at end of file
diff --git a/public/metamask-icon.svg b/public/metamask-icon.svg
new file mode 100644
index 0000000..003b12e
--- /dev/null
+++ b/public/metamask-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.83 470.86"><defs><style>.a{fill:#e2761b;stroke:#e2761b;}.a,.b,.c,.d,.e,.f,.g,.h,.i,.j{stroke-linecap:round;stroke-linejoin:round;}.b{fill:#e4761b;stroke:#e4761b;}.c{fill:#d7c1b3;stroke:#d7c1b3;}.d{fill:#233447;stroke:#233447;}.e{fill:#cd6116;stroke:#cd6116;}.f{fill:#e4751f;stroke:#e4751f;}.g{fill:#f6851b;stroke:#f6851b;}.h{fill:#c0ad9e;stroke:#c0ad9e;}.i{fill:#161616;stroke:#161616;}.j{fill:#763d16;stroke:#763d16;}</style></defs><title>metamask</title><polygon class="a" points="482.09 0.5 284.32 147.38 320.9 60.72 482.09 0.5"/><polygon class="b" points="25.54 0.5 221.72 148.77 186.93 60.72 25.54 0.5"/><polygon class="b" points="410.93 340.97 358.26 421.67 470.96 452.67 503.36 342.76 410.93 340.97"/><polygon class="b" points="4.67 342.76 36.87 452.67 149.57 421.67 96.9 340.97 4.67 342.76"/><polygon class="b" points="143.21 204.62 111.8 252.13 223.7 257.1 219.73 136.85 143.21 204.62"/><polygon class="b" points="364.42 204.62 286.91 135.46 284.32 257.1 396.03 252.13 364.42 204.62"/><polygon class="b" points="149.57 421.67 216.75 388.87 158.71 343.55 149.57 421.67"/><polygon class="b" points="290.88 388.87 358.26 421.67 348.92 343.55 290.88 388.87"/><polygon class="c" points="358.26 421.67 290.88 388.87 296.25 432.8 295.65 451.28 358.26 421.67"/><polygon class="c" points="149.57 421.67 212.18 451.28 211.78 432.8 216.75 388.87 149.57 421.67"/><polygon class="d" points="213.17 314.54 157.12 298.04 196.67 279.95 213.17 314.54"/><polygon class="d" points="294.46 314.54 310.96 279.95 350.71 298.04 294.46 314.54"/><polygon class="e" points="149.57 421.67 159.11 340.97 96.9 342.76 149.57 421.67"/><polygon class="e" points="348.72 340.97 358.26 421.67 410.93 342.76 348.72 340.97"/><polygon class="e" points="396.03 252.13 284.32 257.1 294.66 314.54 311.16 279.95 350.91 298.04 396.03 252.13"/><polygon class="e" points="157.12 298.04 196.87 279.95 213.17 314.54 223.7 257.1 111.8 252.13 157.12 298.04"/><polygon class="f" points="111.8 252.13 158.71 343.55 157.12 298.04 111.8 252.13"/><polygon class="f" points="350.91 298.04 348.92 343.55 396.03 252.13 350.91 298.04"/><polygon class="f" points="223.7 257.1 213.17 314.54 226.29 382.31 229.27 293.07 223.7 257.1"/><polygon class="f" points="284.32 257.1 278.96 292.87 281.34 382.31 294.66 314.54 284.32 257.1"/><polygon class="g" points="294.66 314.54 281.34 382.31 290.88 388.87 348.92 343.55 350.91 298.04 294.66 314.54"/><polygon class="g" points="157.12 298.04 158.71 343.55 216.75 388.87 226.29 382.31 213.17 314.54 157.12 298.04"/><polygon class="h" points="295.65 451.28 296.25 432.8 291.28 428.42 216.35 428.42 211.78 432.8 212.18 451.28 149.57 421.67 171.43 439.55 215.75 470.36 291.88 470.36 336.4 439.55 358.26 421.67 295.65 451.28"/><polygon class="i" points="290.88 388.87 281.34 382.31 226.29 382.31 216.75 388.87 211.78 432.8 216.35 428.42 291.28 428.42 296.25 432.8 290.88 388.87"/><polygon class="j" points="490.44 156.92 507.33 75.83 482.09 0.5 290.88 142.41 364.42 204.62 468.37 235.03 491.43 208.2 481.49 201.05 497.39 186.54 485.07 177 500.97 164.87 490.44 156.92"/><polygon class="j" points="0.5 75.83 17.39 156.92 6.66 164.87 22.56 177 10.44 186.54 26.34 201.05 16.4 208.2 39.26 235.03 143.21 204.62 216.75 142.41 25.54 0.5 0.5 75.83"/><polygon class="g" points="468.37 235.03 364.42 204.62 396.03 252.13 348.92 343.55 410.93 342.76 503.36 342.76 468.37 235.03"/><polygon class="g" points="143.21 204.62 39.26 235.03 4.67 342.76 96.9 342.76 158.71 343.55 111.8 252.13 143.21 204.62"/><polygon class="g" points="284.32 257.1 290.88 142.41 321.1 60.72 186.93 60.72 216.75 142.41 223.7 257.1 226.09 293.27 226.29 382.31 281.34 382.31 281.74 293.27 284.32 257.1"/></svg>
\ No newline at end of file
diff --git a/public/trust-wallet-icon.png b/public/trust-wallet-icon.png
new file mode 100644
index 0000000..f9a7210
Binary files /dev/null and b/public/trust-wallet-icon.png differ
diff --git a/public/trust-wallet-icon.svg b/public/trust-wallet-icon.svg
new file mode 100644
index 0000000..f9a7210
Binary files /dev/null and b/public/trust-wallet-icon.svg differ
diff --git a/public/wallet-connect-icon.png b/public/wallet-connect-icon.png
new file mode 100644
index 0000000..24a9d88
Binary files /dev/null and b/public/wallet-connect-icon.png differ
diff --git a/public/wallet-connect.svg b/public/wallet-connect.svg
new file mode 100644
index 0000000..c74cd6e
Binary files /dev/null and b/public/wallet-connect.svg differ