diff --git a/packages/web/.storybook/main.js b/packages/web/.storybook/main.js
index 247f34afc..f52e68e7f 100644
--- a/packages/web/.storybook/main.js
+++ b/packages/web/.storybook/main.js
@@ -21,6 +21,9 @@ module.exports = {
       },
     });
     return merge(config, {
+      experiments: {
+        topLevelAwait: true,
+      },
       resolve: {
         plugins: [new TsconfigPathsPlugin()],
       },
diff --git a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx
index 383a3bf02..16f7a4637 100644
--- a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx
+++ b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx
@@ -17,31 +17,33 @@ const Template: ComponentStory<typeof EnterAmounts> = args => (
 );
 
 const token = {
-  path: "1",
-  name: "HEX",
-  symbol: "HEX",
-  logoURI:
-    "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  "chainId": "test3",
+  "address": "0x111111111117dC0aa78b770fA6A738034120C302",
+  "path": "gno.land/r/demo/1inch",
+  "name": "1inch",
+  "symbol": "1INCH",
+  "decimals": 6,
+  "logoURI": "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+  "priceId": "1inch",
+  "createdAt": "1999-01-01T00:00:01Z"
 };
 
 export const Default = Template.bind({});
 Default.args = {
-  token0Input: {
+  tokenAInput: {
     token: token,
     amount: "121",
     usdValue: "$0.00",
     balance: "0",
     changeAmount: action("changeAmount"),
-    changeBalance: action("changeBalance"),
   },
-  token1Input: {
+  tokenBInput: {
     token: token,
     amount: "121",
     usdValue: "$0.00",
     balance: "0",
     changeAmount: action("changeAmount"),
-    changeBalance: action("changeBalance"),
   },
-  changeToken0: action("changeToken0"),
-  changeToken1: action("changeToken1"),
+  changeTokenA: action("changeTokenA"),
+  changeTokenB: action("changeTokenB"),
 };
diff --git a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx
index ad42f7ad7..f04ccc1d8 100644
--- a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx
+++ b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx
@@ -3,26 +3,26 @@ import IconAdd from "../icons/IconAdd";
 import { LiquidityEnterAmountsWrapper } from "./LiquidityEnterAmounts.styles";
 import TokenAmountInput from "../token-amount-input/TokenAmountInput";
 import { TokenAmountInputModel } from "@hooks/token/use-token-amount-input";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 interface LiquidityEnterAmountsProps {
-  token0Input: TokenAmountInputModel;
-  token1Input: TokenAmountInputModel;
-  changeToken0: (token: TokenInfo) => void;
-  changeToken1: (token: TokenInfo) => void;
+  tokenAInput: TokenAmountInputModel;
+  tokenBInput: TokenAmountInputModel;
+  changeTokenA: (token: TokenModel) => void;
+  changeTokenB: (token: TokenModel) => void;
 }
 
 const LiquidityEnterAmounts: React.FC<LiquidityEnterAmountsProps> = ({
-  token0Input,
-  token1Input,
-  changeToken0,
-  changeToken1,
+  tokenAInput,
+  tokenBInput,
+  changeTokenA,
+  changeTokenB,
 }) => {
 
   return (
     <LiquidityEnterAmountsWrapper>
-      <TokenAmountInput changeToken={changeToken0} {...token0Input} />
-      <TokenAmountInput changeToken={changeToken1} {...token1Input} />
+      <TokenAmountInput changeToken={changeTokenA} {...tokenAInput} />
+      <TokenAmountInput changeToken={changeTokenB} {...tokenBInput} />
       <div className="arrow">
         <div className="shape">
           <IconAdd className="add-icon" />
diff --git a/packages/web/src/components/common/modal/Modal.styles.ts b/packages/web/src/components/common/modal/Modal.styles.ts
index 21c13b91e..d07bdb840 100644
--- a/packages/web/src/components/common/modal/Modal.styles.ts
+++ b/packages/web/src/components/common/modal/Modal.styles.ts
@@ -24,6 +24,7 @@ export const ModalWrapper = styled.div<ModalStyleProps>`
   }};
   padding: 24px;
   ${mixins.positionCenter()};
+  position: fixed;
   z-index: ${Z_INDEX.modal};
   background-color: ${({ theme }) => theme.color.background06};
   border: 1px solid ${({ theme }) => theme.color.border02};
diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx
index b4c82a3e7..10969c413 100644
--- a/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx
+++ b/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx
@@ -1,4 +1,3 @@
-import { DUMMY_POOL_TICKS } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 import PoolGraph, { type PoolGraphProps } from "./PoolGraph";
 import { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
@@ -10,12 +9,9 @@ export default {
 
 export const Default: StoryObj<PoolGraphProps> = {
   args: {
-    ticks: DUMMY_POOL_TICKS,
-    currentTick: DUMMY_POOL_TICKS[20],
+    ticks: [],
     width: 400,
     height: 200,
-    minTick: DUMMY_POOL_TICKS[10],
-    maxTick: DUMMY_POOL_TICKS[30],
     onChangeMinTick: action("onChangeMinTick"),
     onChangeMaxTick: action("onChangeMaxTick"),
   },
diff --git a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx
index 5f10a9fa9..f1193c354 100644
--- a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx
+++ b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SelectFeeTier from "./SelectFeeTier";
 import { action } from "@storybook/addon-actions";
-import { DUMMY_FEE_TIERS } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 
 export default {
   title: "common/AddLiquidity/SelectFeeTier",
@@ -15,7 +14,6 @@ const Template: ComponentStory<typeof SelectFeeTier> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  feeTiers: DUMMY_FEE_TIERS,
-  feeRate: "0.01",
+  feeTiers: [],
   selectFeeTier: action("selectFeeTier"),
 };
diff --git a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx
index 3a04f184b..f68beca5f 100644
--- a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx
+++ b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx
@@ -1,65 +1,77 @@
 import React, { useCallback, useMemo } from "react";
 import { SelectFeeTierItemWrapper, SelectFeeTierWrapper } from "./SelectFeeTier.styles";
-import { AddLiquidityFeeTier } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
-import { FEE_RATE_OPTION } from "@constants/option.constant";
+import { SwapFeeTierInfoMap, SwapFeeTierType } from "@constants/option.constant";
+import { PoolModel } from "@models/pool/pool-model";
+import BigNumber from "bignumber.js";
 
 interface SelectFeeTierProps {
-  feeTiers: AddLiquidityFeeTier[];
-  feeRate: string | undefined;
-  selectFeeTier: (feeRate: FEE_RATE_OPTION) => void;
+  feeTiers: SwapFeeTierType[];
+  feeTier: SwapFeeTierType | null;
+  pools: PoolModel[],
+  selectFeeTier: (feeTier: SwapFeeTierType) => void;
 }
 
 const SelectFeeTier: React.FC<SelectFeeTierProps> = ({
   feeTiers,
-  feeRate,
+  feeTier,
+  pools,
   selectFeeTier,
 }) => {
 
-  const onClickFeeTierItem = useCallback((feeRate: string) => {
-    const feeRateOption = Object.values(FEE_RATE_OPTION).find(option => option === feeRate);
-    if (feeRateOption) {
-      selectFeeTier(feeRateOption);
-    }
+  const onClickFeeTierItem = useCallback((feeTier: SwapFeeTierType) => {
+    selectFeeTier(feeTier);
   }, [selectFeeTier]);
 
   return (
     <SelectFeeTierWrapper>
-      {feeTiers.map((feeTier, index) => (
+      {feeTiers.map((item, index) => (
         <SelectFeeTierItem
-          selected={feeTier.feeRate === feeRate}
           key={index}
-          feeRate={feeTier.feeRate}
-          description={feeTier.description}
-          range={feeTier.range}
-          onClick={() => onClickFeeTierItem(feeTier.feeRate)}
+          selected={feeTier === item}
+          feeTier={item}
+          pools={pools}
+          onClick={() => onClickFeeTierItem(item)}
         />
       ))}
     </SelectFeeTierWrapper>
   );
 };
 
-interface SelectFeeTierItemProps extends AddLiquidityFeeTier {
+interface SelectFeeTierItemProps {
   selected: boolean;
+  feeTier: SwapFeeTierType;
+  pools: PoolModel[];
   onClick: () => void;
 }
 
 const SelectFeeTierItem: React.FC<SelectFeeTierItemProps> = ({
   selected,
-  feeRate,
-  description,
-  range,
+  feeTier,
+  pools,
   onClick,
 }) => {
   const feeRateStr = useMemo(() => {
-    return `${feeRate}%`;
-  }, [feeRate]);
+    return SwapFeeTierInfoMap[feeTier].rateStr;
+  }, [feeTier]);
 
   const rangeStr = useMemo(() => {
-    if (range === "0") {
+    const fee = SwapFeeTierInfoMap[feeTier].fee;
+    const pool = pools.find(pool => pool.fee === fee);
+    if (!pool || pool.bins.length < 2) {
       return "Not created";
     }
-    return `${range}% select`;
-  }, [range]);
+    const sortedBins = pool.bins.sort((p1, p2) => p1.currentTick - p2.currentTick);
+    const fullTickRange = 1774545;
+    const currentTickGap = sortedBins[0].currentTick - sortedBins[sortedBins.length - 1].currentTick;
+    return BigNumber(currentTickGap)
+      .dividedBy(fullTickRange)
+      .multipliedBy(100)
+      .toFixed();
+  }, [feeTier, pools]);
+
+  const description = useMemo(() => {
+    return SwapFeeTierInfoMap[feeTier].description;
+  }, [feeTier]);
 
   return (
     <SelectFeeTierItemWrapper className={selected ? "selected" : ""} onClick={onClick}>
diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx b/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx
index 8743ca9f0..661a03cd3 100644
--- a/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx
+++ b/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx
@@ -15,11 +15,15 @@ const Template: ComponentStory<typeof SelectPairButton> = args => (
 export const Selected = Template.bind({});
 Selected.args = {
   token: {
-    path: Math.floor(Math.random() * 50 + 1).toString(),
-    name: "HEX",
-    symbol: "HEX",
-    logoURI:
-      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+    chainId: "test3",
+    address: "0x111111111117dC0aa78b770fA6A738034120C302",
+    path: "gno.land/r/demo/1inch",
+    name: "1inch",
+    symbol: "1INCH",
+    decimals: 6,
+    logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+    priceId: "1inch",
+    createdAt: "1999-01-01T00:00:01Z"
   },
 };
 
diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx b/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx
index 6c4f06662..daad47884 100644
--- a/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx
+++ b/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
 import IconStrokeArrowDown from "@components/common/icons/IconStrokeArrowDown";
 import { wrapper } from "./SelectPairButton.styles";
-import { TokenInfo } from "@models/token/token-info";
 import { useSelectTokenModal } from "@hooks/token/use-select-token-modal";
+import { TokenModel } from "@models/token/token-model";
 
 interface SelectPairButtonProps {
-  token?: TokenInfo;
-  changeToken?: (token: TokenInfo) => void;
+  token: TokenModel | null;
+  changeToken?: (token: TokenModel) => void;
   disabled?: boolean;
 }
 
diff --git a/packages/web/src/components/common/select-pair/SelectPair.stories.tsx b/packages/web/src/components/common/select-pair/SelectPair.stories.tsx
index 5ec79c943..731d697f3 100644
--- a/packages/web/src/components/common/select-pair/SelectPair.stories.tsx
+++ b/packages/web/src/components/common/select-pair/SelectPair.stories.tsx
@@ -13,17 +13,28 @@ const Template: ComponentStory<typeof SelectPair> = args => (
 );
 
 const tokenA = {
-  path: "0",
-  name: "HEX",
-  symbol: "HEX",
-  logoURI: "",
+  chainId: "test3",
+  address: "0x111111111117dC0aa78b770fA6A738034120C302",
+  path: "gno.land/r/demo/1inch",
+  name: "1inch",
+  symbol: "1INCH",
+  decimals: 6,
+  logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+  priceId: "1inch",
+  createdAt: "1999-01-01T00:00:01Z"
 };
 
 const tokenB = {
-  path: "1",
-  name: "USDCoin",
-  symbol: "USDC",
-  logoURI: "",
+  name: "Wrapped Ether",
+  address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
+  path: "gno.land/r/demo/weth",
+  symbol: "WETH",
+  decimals: 6,
+  chainId: "test3",
+  priceId: "weth",
+  createdAt: "1999-01-01T00:00:02Z",
+  isWrappedGasToken: true,
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/2396.png"
 };
 
 export const Default = Template.bind({});
diff --git a/packages/web/src/components/common/select-pair/SelectPair.tsx b/packages/web/src/components/common/select-pair/SelectPair.tsx
index 544cda1f0..e1f940429 100644
--- a/packages/web/src/components/common/select-pair/SelectPair.tsx
+++ b/packages/web/src/components/common/select-pair/SelectPair.tsx
@@ -1,28 +1,28 @@
 import React from "react";
 import SelectPairButton from "@components/common/select-pair-button/SelectPairButton";
 import { SelectPairWrapper } from "./SelectPair.styles";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 interface SelectPairProps {
-  tokenA: TokenInfo | undefined;
-  tokenB: TokenInfo | undefined;
-  changeToken0: (token: TokenInfo) => void;
-  changeToken1: (token: TokenInfo) => void;
+  tokenA: TokenModel | null;
+  tokenB: TokenModel | null;
+  changeTokenA: (token: TokenModel) => void;
+  changeTokenB: (token: TokenModel) => void;
   disabled?: boolean;
 }
 
 const SelectPair: React.FC<SelectPairProps> = ({
   tokenA,
   tokenB,
-  changeToken0,
-  changeToken1,
+  changeTokenA,
+  changeTokenB,
   disabled,
 }) => {
 
   return (
     <SelectPairWrapper>
-      <SelectPairButton disabled={disabled} token={tokenA} changeToken={changeToken0} />
-      <SelectPairButton disabled={disabled} token={tokenB} changeToken={changeToken1} />
+      <SelectPairButton disabled={disabled} token={tokenA} changeToken={changeTokenA} />
+      <SelectPairButton disabled={disabled} token={tokenB} changeToken={changeTokenB} />
     </SelectPairWrapper>
   );
 };
diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx
index 6a2ec1f53..9ae6d48ad 100644
--- a/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx
+++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
 import SelectPriceRange from "./SelectPriceRange";
 import { action } from "@storybook/addon-actions";
-import { DUMMY_PRICE_RANGE_MAP } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 
 export default {
   title: "common/AddLiquidity/SelectPriceRange",
@@ -16,7 +14,7 @@ const Template: ComponentStory<typeof SelectPriceRange> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  priceRangeMap: DUMMY_PRICE_RANGE_MAP,
+  priceRanges: [],
   priceRange: undefined,
-  selectPriceRange: action("selectPriceRange"),
+  changePriceRange: action("changePriceRange"),
 };
diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx
index 194006299..08d4f94c2 100644
--- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx
+++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx
@@ -1,4 +1,4 @@
-import { PriceRangeTooltip, PriceRangeType } from "@constants/option.constant";
+import { PriceRangeTooltip } from "@constants/option.constant";
 import React, { useCallback, useMemo } from "react";
 import IconInfo from "@components/common/icons/IconInfo";
 import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight";
@@ -7,30 +7,27 @@ import { SelectPriceRangeItemWrapper, SelectPriceRangeWrapper } from "./SelectPr
 import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
 
 interface SelectPriceRangeProps {
-  priceRangeMap: { [key in PriceRangeType]: AddLiquidityPriceRage | undefined };
-  priceRange: PriceRangeType | undefined;
-  selectPriceRange: (priceRange: PriceRangeType) => void;
+  priceRanges: AddLiquidityPriceRage[];
+  priceRange: AddLiquidityPriceRage | null;
+  changePriceRange: (priceRange: AddLiquidityPriceRage) => void;
 }
 
-const PRICE_RANGE_ORDERS: PriceRangeType[] = ["Active", "Passive", "Custom"];
-
 const SelectPriceRange: React.FC<SelectPriceRangeProps> = ({
-  priceRangeMap,
+  priceRanges,
   priceRange,
-  selectPriceRange,
+  changePriceRange,
 }) => {
 
   return (
     <SelectPriceRangeWrapper>
       <div className="type-selector-wrapper">
-        {PRICE_RANGE_ORDERS.map((priceRangeType, index: number) => (
+        {priceRanges.map((item, index) => (
           <SelectPriceRangeItem
             key={index}
-            selected={priceRangeType === priceRange}
-            tooltip={PriceRangeTooltip[priceRangeType]}
-            priceRage={priceRangeType}
-            selectPriceRange={selectPriceRange}
-            apr={priceRangeMap[priceRangeType]?.apr}
+            selected={item.type === priceRange?.type}
+            tooltip={PriceRangeTooltip[item.type]}
+            priceRange={item}
+            changePriceRange={changePriceRange}
           />
         ))}
       </div>
@@ -40,37 +37,36 @@ const SelectPriceRange: React.FC<SelectPriceRangeProps> = ({
 
 interface SelectPriceRangeItemProps {
   selected: boolean;
-  priceRage: PriceRangeType;
+  priceRange: AddLiquidityPriceRage;
   tooltip: string | undefined;
-  apr: string | undefined;
-  selectPriceRange: (priceRange: PriceRangeType) => void;
+  changePriceRange: (priceRange: AddLiquidityPriceRage) => void;
 }
 
 export const SelectPriceRangeItem: React.FC<SelectPriceRangeItemProps> = ({
   selected,
-  priceRage,
+  priceRange,
   tooltip,
-  apr,
-  selectPriceRange,
+  changePriceRange,
 }) => {
 
   const aprStr = useMemo(() => {
+    const apr = priceRange.apr;
     if (apr) {
       return `${apr}%`;
     }
-    if (priceRage === "Custom") {
+    if (priceRange.type === "Custom") {
       return null;
     }
     return "-";
-  }, [apr, priceRage]);
+  }, [priceRange]);
 
   const onClickItem = useCallback(() => {
-    selectPriceRange(priceRage);
-  }, [priceRage, selectPriceRange]);
+    changePriceRange(priceRange);
+  }, [priceRange, changePriceRange]);
 
   return (
     <SelectPriceRangeItemWrapper className={selected ? "selected" : ""} onClick={onClickItem}>
-      <strong className="item-title">{priceRage}</strong>
+      <strong className="item-title">{priceRange.type}</strong>
       {tooltip && (
         <div className="tooltip-wrap">
           <Tooltip
diff --git a/packages/web/src/components/common/select-token/SelectToken.spec.tsx b/packages/web/src/components/common/select-token/SelectToken.spec.tsx
index 454d15bf2..c19544fda 100644
--- a/packages/web/src/components/common/select-token/SelectToken.spec.tsx
+++ b/packages/web/src/components/common/select-token/SelectToken.spec.tsx
@@ -9,7 +9,7 @@ describe("SelectToken Component", () => {
       keyword: "",
       defaultTokens: [],
       tokens: [],
-      tokenPrices: [],
+      tokenPrices: {},
       changeKeyword: () => { return; },
       changeToken: () => { return; },
       close: () => { return; },
diff --git a/packages/web/src/components/common/token-amount-input/TokenAmountInput.spec.tsx b/packages/web/src/components/common/token-amount-input/TokenAmountInput.spec.tsx
index af0b1e9dc..d02b67481 100644
--- a/packages/web/src/components/common/token-amount-input/TokenAmountInput.spec.tsx
+++ b/packages/web/src/components/common/token-amount-input/TokenAmountInput.spec.tsx
@@ -4,10 +4,15 @@ import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapTheme
 import TokenAmountInput, { TokenAmountInputProps } from "./TokenAmountInput";
 
 const token = {
-  path: "1",
-  name: "Gnoland",
-  symbol: "GNO.LAND",
-  logoURI: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 
 describe("TokenAmountInput Component", () => {
@@ -18,7 +23,6 @@ describe("TokenAmountInput Component", () => {
       balance: "12,211",
       usdValue: "12.3",
       changable: true,
-      changeBalance: () => { return; },
       changeAmount: () => { return; },
       changeToken: () => { return; },
     };
diff --git a/packages/web/src/components/common/token-amount-input/TokenAmountInput.stories.tsx b/packages/web/src/components/common/token-amount-input/TokenAmountInput.stories.tsx
index e16b0e090..e230e47e8 100644
--- a/packages/web/src/components/common/token-amount-input/TokenAmountInput.stories.tsx
+++ b/packages/web/src/components/common/token-amount-input/TokenAmountInput.stories.tsx
@@ -8,10 +8,15 @@ export default {
 } as Meta<typeof TokenAmountInput>;
 
 const token = {
-  path: "1",
-  name: "Gnoland",
-  symbol: "GNO.LAND",
-  logoURI: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 
 export const Default: StoryObj<TokenAmountInputProps> = {
@@ -21,7 +26,6 @@ export const Default: StoryObj<TokenAmountInputProps> = {
     balance: "12,211",
     usdValue: "12.3",
     changable: true,
-    changeBalance: action("changeBalance"),
     changeAmount: action("changeAmount"),
     changeToken: action("changeToken"),
   },
diff --git a/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx b/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx
index 58d0e19bd..26a03ac37 100644
--- a/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx
+++ b/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx
@@ -3,11 +3,11 @@ import { TokenAmountInputWrapper } from "./TokenAmountInput.styles";
 import SelectPairButton from "../select-pair-button/SelectPairButton";
 import BigNumber from "bignumber.js";
 import { TokenAmountInputModel } from "@hooks/token/use-token-amount-input";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 export interface TokenAmountInputProps extends TokenAmountInputModel {
   changable?: boolean;
-  changeToken: (token: TokenInfo) => void;
+  changeToken: (token: TokenModel) => void;
 }
 
 const TokenAmountInput: React.FC<TokenAmountInputProps> = ({
diff --git a/packages/web/src/components/common/token-amount/TokenAmount.spec.tsx b/packages/web/src/components/common/token-amount/TokenAmount.spec.tsx
index 13ebeb6b0..3bd07b0ac 100644
--- a/packages/web/src/components/common/token-amount/TokenAmount.spec.tsx
+++ b/packages/web/src/components/common/token-amount/TokenAmount.spec.tsx
@@ -4,10 +4,15 @@ import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapTheme
 import TokenAmount, { TokenAmountProps } from "./TokenAmount";
 
 const token = {
-  path: "1",
-  name: "Gnoland",
-  symbol: "GNO.LAND",
-  logoURI: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 
 describe("TokenAmount Component", () => {
diff --git a/packages/web/src/components/common/token-amount/TokenAmount.stories.tsx b/packages/web/src/components/common/token-amount/TokenAmount.stories.tsx
index 9224b6870..88c16fc8e 100644
--- a/packages/web/src/components/common/token-amount/TokenAmount.stories.tsx
+++ b/packages/web/src/components/common/token-amount/TokenAmount.stories.tsx
@@ -7,10 +7,15 @@ export default {
 } as Meta<typeof TokenAmount>;
 
 const token = {
-  path: "1",
-  name: "Gnoland",
-  symbol: "GNO.LAND",
-  logoURI: "",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 
 export const Default: StoryObj<TokenAmountProps> = {
diff --git a/packages/web/src/components/common/token-amount/TokenAmount.tsx b/packages/web/src/components/common/token-amount/TokenAmount.tsx
index 51b0d2fbd..5e85a8402 100644
--- a/packages/web/src/components/common/token-amount/TokenAmount.tsx
+++ b/packages/web/src/components/common/token-amount/TokenAmount.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { TokenAmountWrapper } from "./TokenAmount.styles";
 import SelectPairButton from "../select-pair-button/SelectPairButton";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 export interface TokenAmountProps {
-  token: TokenInfo;
+  token: TokenModel;
   usdPrice: string;
   amount: string;
 }
diff --git a/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.stories.tsx b/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.stories.tsx
index b4f847d7f..3691f170c 100644
--- a/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.stories.tsx
+++ b/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.stories.tsx
@@ -4,10 +4,15 @@ import { Meta, StoryObj } from "@storybook/react";
 
 const token = {
   info: {
-    path: "1",
-    name: "Gnoland",
-    symbol: "GNO.LAND",
-    logoURI: "",
+    chainId: "test3",
+    address: "0x111111111117dC0aa78b770fA6A738034120C302",
+    path: "gno.land/r/demo/1inch",
+    name: "1inch",
+    symbol: "1INCH",
+    decimals: 6,
+    logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+    priceId: "1inch",
+    createdAt: "1999-01-01T00:00:01Z"
   },
   amount: "12,211",
   usdPrice: "$12.3",
diff --git a/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.tsx b/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.tsx
index 9b4b425d9..768bc6091 100644
--- a/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.tsx
+++ b/packages/web/src/components/earn-add/earn-add-confirm-amount-info/EarnAddConfirmAmountInfo.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { EarnAddConfirmAmountInfoWrapper, EarnAddConfirmFeeInfoSection } from "./EarnAddConfirmAmountInfo.styles";
-import { TokenInfo } from "@models/token/token-info";
 import TokenAmount from "@components/common/token-amount/TokenAmount";
 import IconAdd from "@components/common/icons/IconAdd";
+import { TokenModel } from "@models/token/token-model";
 
 export interface EarnAddConfirmAmountInfoProps {
   tokenA: {
-    info: TokenInfo;
+    info: TokenModel;
     amount: string;
     usdPrice: string;
   };
   tokenB: {
-    info: TokenInfo;
+    info: TokenModel;
     amount: string;
     usdPrice: string;
   };
diff --git a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.stories.tsx b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.stories.tsx
index 38d3317e7..459a62463 100644
--- a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.stories.tsx
+++ b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.stories.tsx
@@ -9,10 +9,15 @@ export default {
 
 const tokenA = {
   info: {
-    path: "1",
-    name: "Gnoland",
-    symbol: "GNOT",
-    logoURI: "",
+    chainId: "test3",
+    address: "0x111111111117dC0aa78b770fA6A738034120C302",
+    path: "gno.land/r/demo/1inch",
+    name: "1inch",
+    symbol: "1INCH",
+    decimals: 6,
+    logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+    priceId: "1inch",
+    createdAt: "1999-01-01T00:00:01Z"
   },
   amount: "12,211",
   usdPrice: "$12.3",
@@ -20,10 +25,15 @@ const tokenA = {
 
 const tokenB = {
   info: {
-    path: "2",
-    name: "Ether",
-    symbol: "ETH",
-    logoURI: "",
+    chainId: "test3",
+    address: "0x111111111117dC0aa78b770fA6A738034120C302",
+    path: "gno.land/r/demo/1inch",
+    name: "1inch",
+    symbol: "1INCH",
+    decimals: 6,
+    logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+    priceId: "1inch",
+    createdAt: "1999-01-01T00:00:01Z"
   },
   amount: "12,211",
   usdPrice: "$12.3",
diff --git a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.styles.ts b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.styles.ts
index 1dccc99db..94a30e99b 100644
--- a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.styles.ts
+++ b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.styles.ts
@@ -4,14 +4,9 @@ import styled from "@emotion/styled";
 export const EarnAddConfirmWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 460px;
   height: auto;
-  padding: 24px;
   gap: 16px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.color.border02};
-  background-color: ${({ theme }) => theme.color.background06};
-  box-shadow: 10px 14px 60px 0px rgba(0, 0, 0, 0.40);
 
   .confirm-header {
     display: flex;
diff --git a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.tsx b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.tsx
index 2151292db..bad3ed9b9 100644
--- a/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.tsx
+++ b/packages/web/src/components/earn-add/earn-add-confirm/EarnAddConfirm.tsx
@@ -2,20 +2,20 @@ import React from "react";
 import { EarnAddConfirmWrapper } from "./EarnAddConfirm.styles";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import IconClose from "@components/common/icons/IconCancel";
-import { TokenInfo } from "@models/token/token-info";
 import EarnAddConfirmAmountInfo from "../earn-add-confirm-amount-info/EarnAddConfirmAmountInfo";
 import EarnAddConfirmPriceRangeInfo from "../earn-add-confirm-price-range-info/EarnAddConfirmPriceRangeInfo";
 import EarnAddConfirmFeeInfo from "../earn-add-confirm-fee-info/EarnAddConfirmFeeInfo";
+import { TokenModel } from "@models/token/token-model";
 
 export interface EarnAddConfirmProps {
   amountInfo: {
     tokenA: {
-      info: TokenInfo;
+      info: TokenModel;
       amount: string;
       usdPrice: string;
     };
     tokenB: {
-      info: TokenInfo;
+      info: TokenModel;
       amount: string;
       usdPrice: string;
     };
@@ -31,7 +31,7 @@ export interface EarnAddConfirmProps {
     estimatedAPR: string;
   };
   feeInfo: {
-    token: TokenInfo;
+    token: TokenModel;
     fee: string;
   };
   confirm: () => void;
diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.stories.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.stories.tsx
index b6c95f792..94aa4d369 100644
--- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.stories.tsx
+++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.stories.tsx
@@ -3,7 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import EarnAddLiquidity from "./EarnAddLiquidity";
 import { action } from "@storybook/addon-actions";
-import { DUMMY_FEE_TIERS, DUMMY_POOL_TICKS, DUMMY_PRICE_RANGE_MAP } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 
 export default {
   title: "earn-add/EarnAddLiquidity",
@@ -14,16 +13,26 @@ const Template: ComponentStory<typeof EarnAddLiquidity> = args => (
   <EarnAddLiquidity {...args} />
 );
 const tokenA = {
-  path: "1",
-  logoURI: "",
-  name: "Bitcoin",
-  symbol: "BTC",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 const tokenB = {
-  path: "2",
-  logoURI: "",
-  name: "Ethereum",
-  symbol: "ETH",
+  chainId: "dev",
+  createdAt: "2023-10-10T08:48:46+09:00",
+  name: "Gnoswap",
+  address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+  path: "gno.land/r/gnos",
+  decimals: 4,
+  symbol: "GNOS",
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+  priceId: "gno.land/r/gnos"
 };
 
 export const Default = Template.bind({});
@@ -31,12 +40,9 @@ Default.args = {
   mode: "POOL",
   tokenA: tokenA,
   tokenB: tokenB,
-  feeTiers: DUMMY_FEE_TIERS,
-  feeRate: "0.01",
+  feeTiers: [],
   selectFeeTier: action("selectFeeTier"),
-  priceRangeMap: DUMMY_PRICE_RANGE_MAP,
-  priceRange: "Custom",
-  selectPriceRange: action("selectPriceRange"),
-  ticks: DUMMY_POOL_TICKS,
-  currentTick: DUMMY_POOL_TICKS[20],
+  priceRanges: [],
+  changePriceRange: action("selectPriceRange"),
+  ticks: [],
 };
diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx
index 05870b31d..e7b5609aa 100644
--- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx
+++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx
@@ -1,96 +1,90 @@
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import SelectFeeTier from "@components/common/select-fee-tier/SelectFeeTier";
-import SelectPriceRange from "@components/common/select-price-range/SelectPriceRange";
 import React, { useCallback, useMemo, useState } from "react";
 import { EarnAddLiquidityWrapper } from "./EarnAddLiquidity.styles";
-import { AddLiquidityType, FEE_RATE_OPTION, PriceRangeType } from "@constants/option.constant";
-import { AddLiquidityFeeTier, AddLiquidityPriceRage, PoolTick, PriceRangeSummary } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
+import { AddLiquidityType, SwapFeeTierType, SwapFeeTierInfoMap, AddLiquiditySubmitType } from "@constants/option.constant";
+import { AddLiquidityPriceRage, PoolTick, PriceRangeSummary } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
 import LiquidityEnterAmounts from "@components/common/liquidity-enter-amounts/LiquidityEnterAmounts";
-import { TokenInfo } from "@models/token/token-info";
 import SelectPair from "@components/common/select-pair/SelectPair";
 import { TokenAmountInputModel } from "@hooks/token/use-token-amount-input";
 import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import IconSettings from "@components/common/icons/IconSettings";
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
-import SelectPriceRangeCustom from "@components/common/select-price-range-custom/SelectPriceRangeCustom";
+import { TokenModel } from "@models/token/token-model";
+import { PoolModel } from "@models/pool/pool-model";
+import SelectPriceRange from "@components/common/select-price-range/SelectPriceRange";
 import SelectPriceRangeSummary from "@components/common/select-price-range-summary/SelectPriceRangeSummary";
 
 interface EarnAddLiquidityProps {
   mode: AddLiquidityType;
-  tokenA: TokenInfo | undefined;
-  tokenB: TokenInfo | undefined;
-  changeToken0: (token: TokenInfo) => void;
-  changeToken1: (token: TokenInfo) => void;
-  token0Input: TokenAmountInputModel;
-  token1Input: TokenAmountInputModel;
-  feeTiers: AddLiquidityFeeTier[];
-  feeRate: FEE_RATE_OPTION | undefined;
-  selectFeeTier: (feeRate: FEE_RATE_OPTION) => void;
-  priceRangeMap: { [key in PriceRangeType]: AddLiquidityPriceRage | undefined };
-  priceRange: PriceRangeType | undefined;
+  tokenA: TokenModel | null;
+  tokenB: TokenModel | null;
+  changeTokenA: (token: TokenModel) => void;
+  changeTokenB: (token: TokenModel) => void;
+  tokenAInput: TokenAmountInputModel;
+  tokenBInput: TokenAmountInputModel;
+  feeTiers: SwapFeeTierType[];
+  feeTier: SwapFeeTierType | null;
+  pools: PoolModel[];
+  selectFeeTier: (feeRate: SwapFeeTierType) => void;
+  priceRanges: AddLiquidityPriceRage[];
+  priceRange: AddLiquidityPriceRage | null;
+  changePriceRange: (priceRange: AddLiquidityPriceRage) => void;
   priceRangeSummary: PriceRangeSummary;
-  selectPriceRange: (priceRange: PriceRangeType) => void;
   ticks: PoolTick[];
-  currentTick?: PoolTick;
+  currentTick: PoolTick | null;
+  submitType: AddLiquiditySubmitType;
+  submit: () => void;
 }
 
 const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
   tokenA,
   tokenB,
-  changeToken0,
-  changeToken1,
-  token0Input,
-  token1Input,
+  changeTokenA,
+  changeTokenB,
+  tokenAInput,
+  tokenBInput,
   feeTiers,
-  feeRate,
+  feeTier,
+  pools,
   selectFeeTier,
-  priceRangeMap,
+  priceRanges,
   priceRange,
   priceRangeSummary,
-  selectPriceRange,
-  ticks,
-  currentTick,
+  changePriceRange,
+  submitType,
+  submit,
 }) => {
   const [openedSelectPair, setOpenedSelectPair] = useState(true);
   const [openedFeeTier, setOpenedFeeTier] = useState(true);
   const [openedPriceRange, setOpenedPriceRange] = useState(true);
 
   const existTokenPair = useMemo(() => {
-    return tokenA !== undefined && tokenB !== undefined;
+    return tokenA !== null && tokenB !== null;
   }, [tokenA, tokenB]);
 
-  const token0Logo = useMemo(() => {
+  const tokenALogo = useMemo(() => {
     return tokenA?.logoURI || "";
   }, [tokenA]);
 
-  const token1Logo = useMemo(() => {
+  const tokenBLogo = useMemo(() => {
     return tokenB?.logoURI || "";
   }, [tokenB]);
 
   const selectedFeeRate = useMemo(() => {
-    if (!feeRate) {
+    if (!feeTier) {
       return null;
     }
-    return `${feeRate}%`;
-  }, [feeRate]);
+    return SwapFeeTierInfoMap[feeTier].rateStr;
+  }, [feeTier]);
 
   const selectedPriceRange = useMemo(() => {
     if (!priceRange) {
       return null;
     }
-    return `${priceRange}`;
+    return `${priceRange.type}`;
   }, [priceRange]);
 
-  const selectableCustomPriceRange = useMemo(() => {
-    if (priceRange !== "Custom") {
-      return false;
-    }
-    if (!tokenA || !tokenB) {
-      return false;
-    }
-    return true;
-  }, [priceRange, tokenA, tokenB]);
-
   const toggleSelectPair = useCallback(() => {
     setOpenedSelectPair(!openedSelectPair);
   }, [openedSelectPair]);
@@ -103,6 +97,37 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
     setOpenedPriceRange(!openedPriceRange);
   }, [openedPriceRange]);
 
+  const activatedSubmit = useMemo(() => {
+    switch (submitType) {
+      case "CREATE_POOL":
+      case "ADD_LIQUIDITY":
+      case "CONNECT_WALLET":
+        return true;
+      default:
+        return false;
+    }
+  }, [submitType]);
+
+  const submitButtonStr = useMemo(() => {
+    switch (submitType) {
+      case "CREATE_POOL":
+        return "Create Pool";
+      case "ADD_LIQUIDITY":
+        return "Add Liquidity";
+      case "CONNECT_WALLET":
+        return "Connect Wallet";
+      case "INVALID_PAIR":
+        return "Invalid Pair";
+      case "INSUFFICIENT_BALANCE":
+        return "Insufficient Balance";
+      case "INVALID_RANGE":
+        return "Invalid Range";
+      case "ENTER_AMOUNT":
+      default:
+        return "Enter Amount";
+    }
+  }, [submitType]);
+
   return (
     <EarnAddLiquidityWrapper>
       <h3>Add Liquidity</h3>
@@ -112,8 +137,8 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
             <h5>1. Select Pair</h5>
             {existTokenPair && (
               <DoubleLogo
-                left={token0Logo}
-                right={token1Logo}
+                left={tokenALogo}
+                right={tokenBLogo}
                 size={24}
               />
             )}
@@ -122,8 +147,8 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
             <SelectPair
               tokenA={tokenA}
               tokenB={tokenB}
-              changeToken0={changeToken0}
-              changeToken1={changeToken1}
+              changeTokenA={changeTokenA}
+              changeTokenB={changeTokenB}
             />
           )}
         </article>
@@ -142,7 +167,8 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
           {openedFeeTier && (
             <SelectFeeTier
               feeTiers={feeTiers}
-              feeRate={feeRate}
+              feeTier={feeTier}
+              pools={pools}
               selectFeeTier={selectFeeTier}
             />
           )}
@@ -161,18 +187,9 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
 
           {openedPriceRange && (
             <SelectPriceRange
-              priceRangeMap={priceRangeMap}
+              priceRanges={priceRanges}
               priceRange={priceRange}
-              selectPriceRange={selectPriceRange}
-            />
-          )}
-
-          {selectableCustomPriceRange && (
-            <SelectPriceRangeCustom
-              currentTick={currentTick}
-              tokenA={tokenA}
-              tokenB={tokenB}
-              ticks={ticks}
+              changePriceRange={changePriceRange}
             />
           )}
 
@@ -187,18 +204,18 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
             </button>
           </div>
           <LiquidityEnterAmounts
-            token0Input={token0Input}
-            token1Input={token1Input}
-            changeToken0={changeToken0}
-            changeToken1={changeToken1}
+            tokenAInput={tokenAInput}
+            tokenBInput={tokenBInput}
+            changeTokenA={changeTokenA}
+            changeTokenB={changeTokenB}
           />
         </article>
       </div>
       <Button
-        text="Connect Wallet"
-        onClick={() => { }}
+        text={submitButtonStr}
+        onClick={submit}
         style={{
-          hierarchy: ButtonHierarchy.Primary,
+          hierarchy: activatedSubmit ? ButtonHierarchy.Primary : ButtonHierarchy.Gray,
           fullWidth: true,
           height: 57,
           fontType: "body7",
diff --git a/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx b/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx
index 5ace746b0..86190a723 100644
--- a/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx
+++ b/packages/web/src/components/home/home-swap/HomeSwap.stories.tsx
@@ -17,11 +17,15 @@ export const Default = Template.bind({});
 Default.args = {
   from: {
     token: {
-      path: "USDCoin",
-      name: "USDCoin",
-      symbol: "USDC",
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      chainId: "dev",
+      createdAt: "2023-10-10T08:48:46+09:00",
+      name: "Gnoswap",
+      address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+      path: "gno.land/r/gnos",
+      decimals: 4,
+      symbol: "GNOS",
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+      priceId: "gno.land/r/gnos"
     },
     amount: "121",
     price: "$0.00",
@@ -29,11 +33,15 @@ Default.args = {
   },
   to: {
     token: {
-      path: "HEX",
-      name: "HEX",
-      symbol: "HEX",
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      chainId: "dev",
+      createdAt: "2023-10-10T08:48:46+09:00",
+      name: "Gnoswap",
+      address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+      path: "gno.land/r/gnos",
+      decimals: 4,
+      symbol: "GNOS",
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+      priceId: "gno.land/r/gnos"
     },
     amount: "5000",
     price: "$0.00",
diff --git a/packages/web/src/components/token/token-swap/TokenSwap.spec.tsx b/packages/web/src/components/token/token-swap/TokenSwap.spec.tsx
deleted file mode 100644
index c407a4d4b..000000000
--- a/packages/web/src/components/token/token-swap/TokenSwap.spec.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { render } from "@testing-library/react";
-import { Provider as JotaiProvider } from "jotai";
-import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
-import TokenSwap, { TokenSwapProps } from "./TokenSwap";
-
-describe("TokenSwap Component", () => {
-  it("TokenSwap render", () => {
-    const args: TokenSwapProps = {
-      from: {
-        token: {
-          path: "USDCoin",
-          name: "USDCoin",
-          symbol: "USDC",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
-        },
-        amount: "121",
-        price: "$0.00",
-        balance: "0",
-      },
-      to: {
-        token: {
-          path: "HEX",
-          name: "HEX",
-          symbol: "HEX",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
-        },
-        amount: "5000",
-        price: "$0.00",
-        balance: "0",
-      },
-      connected: true,
-      connectWallet: () => { return; },
-      swapNow: () => { return; },
-    };
-
-    render(
-      <JotaiProvider>
-        <GnoswapThemeProvider>
-          <TokenSwap {...args} />
-        </GnoswapThemeProvider>
-      </JotaiProvider>,
-    );
-  });
-});
\ No newline at end of file
diff --git a/packages/web/src/components/token/token-swap/TokenSwap.stories.tsx b/packages/web/src/components/token/token-swap/TokenSwap.stories.tsx
index b8a3aa6f9..007c51d8c 100644
--- a/packages/web/src/components/token/token-swap/TokenSwap.stories.tsx
+++ b/packages/web/src/components/token/token-swap/TokenSwap.stories.tsx
@@ -17,11 +17,15 @@ export const Default = Template.bind({});
 Default.args = {
   from: {
     token: {
-      path: "USDCoin",
-      name: "USDCoin",
-      symbol: "USDC",
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      chainId: "dev",
+      createdAt: "2023-10-10T08:48:46+09:00",
+      name: "Gnoswap",
+      address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+      path: "gno.land/r/gnos",
+      decimals: 4,
+      symbol: "GNOS",
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+      priceId: "gno.land/r/gnos"
     },
     amount: "121",
     price: "$0.00",
@@ -29,11 +33,15 @@ Default.args = {
   },
   to: {
     token: {
-      path: "HEX",
-      name: "HEX",
-      symbol: "HEX",
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      chainId: "dev",
+      createdAt: "2023-10-10T08:48:46+09:00",
+      name: "Gnoswap",
+      address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+      path: "gno.land/r/gnos",
+      decimals: 4,
+      symbol: "GNOS",
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+      priceId: "gno.land/r/gnos"
     },
     amount: "5000",
     price: "$0.00",
diff --git a/packages/web/src/components/token/token-swap/TokenSwap.tsx b/packages/web/src/components/token/token-swap/TokenSwap.tsx
index a919845f5..c3d4540e5 100644
--- a/packages/web/src/components/token/token-swap/TokenSwap.tsx
+++ b/packages/web/src/components/token/token-swap/TokenSwap.tsx
@@ -4,16 +4,16 @@ import IconSettings from "@components/common/icons/IconSettings";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import SelectPairButton from "@components/common/select-pair-button/SelectPairButton";
 import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 export interface TokenSwapProps {
   from: {
-    token: TokenInfo;
+    token: TokenModel;
     amount: string;
     price: string;
     balance: string;
   };
   to: {
-    token: TokenInfo;
+    token: TokenModel;
     amount: string;
     price: string;
     balance: string;
diff --git a/packages/web/src/constants/option.constant.ts b/packages/web/src/constants/option.constant.ts
index 0ee43e036..7d78f89fc 100644
--- a/packages/web/src/constants/option.constant.ts
+++ b/packages/web/src/constants/option.constant.ts
@@ -1,12 +1,50 @@
 import { ValuesType } from "utility-types";
 
+export type SwapFeeTierType = "FEE_100" | "FEE_500" | "FEE_3000" | "FEE_10000";
+
+export interface SwapFeeTierInfo {
+  fee: number;
+  rateStr: string;
+  description: string;
+}
+
+export const SwapFeeRateMap: Record<SwapFeeTierType, number> = {
+  FEE_100: 100,
+  FEE_500: 500,
+  FEE_3000: 3000,
+  FEE_10000: 10000,
+} as const;
+
+export const SwapFeeTierInfoMap: Record<SwapFeeTierType, SwapFeeTierInfo> = {
+  FEE_100: {
+    fee: 100,
+    rateStr: "0.01%",
+    description: "Best for very stable pairs",
+  },
+  FEE_500: {
+    fee: 500,
+    rateStr: "0.05%",
+    description: "Best for stable pairs",
+  },
+  FEE_3000: {
+    fee: 3000,
+    rateStr: "0.3%",
+    description: "Best for most pairs",
+  },
+  FEE_10000: {
+    fee: 10000,
+    rateStr: "1%",
+    description: "Best for exotic pairs",
+  },
+} as const;
+
 export const FEE_RATE_OPTION = {
   FEE_01: "0.01",
   FEE_05: "0.05",
   FEE_3: "0.3",
   FEE_1: "1",
 } as const;
-export type FEE_RATE_OPTION = ValuesType<typeof FEE_RATE_OPTION>;
+export type FeeRateOption = ValuesType<typeof FEE_RATE_OPTION>;
 
 export const STAKED_OPTION = {
   NONE: "NONE",
@@ -79,3 +117,12 @@ export const PriceRangeTooltip: {
 };
 
 export const DEFAULT_SLIPPAGE = 0.5;
+
+export type AddLiquiditySubmitType =
+  | "CREATE_POOL"
+  | "ADD_LIQUIDITY"
+  | "CONNECT_WALLET"
+  | "INVALID_PAIR"
+  | "ENTER_AMOUNT"
+  | "INSUFFICIENT_BALANCE"
+  | "INVALID_RANGE";
diff --git a/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx b/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
index ba03cafca..fb283f224 100644
--- a/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
+++ b/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import BestPools from "@components/token/best-pools/BestPools";
-import { FEE_RATE_OPTION } from "@constants/option.constant";
+import { SwapFeeTierType } from "@constants/option.constant";
 import { type TokenPairInfo } from "@models/token/token-pair-info";
 
 export interface BestPool {
   tokenPair: TokenPairInfo;
-  feeRate: FEE_RATE_OPTION;
+  feeRate: SwapFeeTierType;
   tvl: string;
   apr: string;
 }
@@ -27,7 +27,7 @@ export const bestPoolsInit: BestPool = {
         "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
     },
   },
-  feeRate: FEE_RATE_OPTION.FEE_05,
+  feeRate: "FEE_100",
   tvl: "$12,908.25M",
   apr: "120.52%",
 };
diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx
index 3ec5e4152..572dcea77 100644
--- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx
+++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx
@@ -1,21 +1,21 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import EarnAddLiquidity from "@components/earn-add/earn-add-liquidity/EarnAddLiquidity";
-import { FEE_RATE_OPTION, PriceRangeType } from "@constants/option.constant";
-import { DUMMY_FEE_TIERS, DUMMY_POOL_TICKS, DUMMY_PRICE_RANGE_MAP } from "./earn-add-liquidity-dummy";
-import { TokenInfo } from "@models/token/token-info";
+import { AddLiquiditySubmitType, PriceRangeType, SwapFeeTierType } from "@constants/option.constant";
 import { useTokenAmountInput } from "@hooks/token/use-token-amount-input";
-
-export interface AddLiquidityFeeTier {
-  feeRate: string;
-  description: string;
-  range: string;
-}
+import { TokenModel } from "@models/token/token-model";
+import { PoolModel } from "@models/pool/pool-model";
+import { useWallet } from "@hooks/wallet/use-wallet";
+import BigNumber from "bignumber.js";
+import { useSlippage } from "@hooks/common/use-slippage";
+import { useTokenData } from "@hooks/token/use-token-data";
+import { useEarnAddLiquidityConfirmModal } from "@hooks/token/use-earn-add-liquidity-confirm-modal";
 
 export interface AddLiquidityPriceRage {
+  type: PriceRangeType;
   range: {
-    minTick: string;
+    minTick: number;
     minPrice: string;
-    maxTick: string;
+    maxTick: number;
     maxPrice: string;
   }
   apr?: string;
@@ -33,83 +33,136 @@ export interface PriceRangeSummary {
   estimatedApr: string;
 }
 
-const feeTiers = DUMMY_FEE_TIERS;
-
-const priceRangeMap = DUMMY_PRICE_RANGE_MAP;
-
-const ticks = DUMMY_POOL_TICKS;
+export const SWAP_FEE_TIERS: SwapFeeTierType[] = [
+  "FEE_100",
+  "FEE_500",
+  "FEE_3000",
+  "FEE_10000",
+];
 
-const token0Data = {
-  path: "1",
-  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/1.png",
-  name: "Bitcoin",
-  symbol: "BTC",
-};
-
-const token1Data = {
-  path: "2",
-  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/2.png",
-  name: "Ethereum",
-  symbol: "ETH",
+const TEMP_CUSTOM_PRICE_RANGE: AddLiquidityPriceRage = {
+  type: "Custom",
+  range: {
+    minTick: 6600,
+    maxTick: 10200,
+    minPrice: "1.2840093675402746",
+    maxPrice: "2.1169206358924533",
+  },
+  apr: "0",
 };
 
 const EarnAddLiquidityContainer: React.FC = () => {
-  const [tokenA, setToken0] = useState<TokenInfo>(token0Data);
-  const [tokenB, setToken1] = useState<TokenInfo>(token1Data);
-  const token0AmountInput = useTokenAmountInput(tokenA);
-  const token1AmountInput = useTokenAmountInput(tokenB);
-  const [feeRate, setFeeRate] = useState<FEE_RATE_OPTION>();
-  const [priceRange, setPriceRange] = useState<PriceRangeType>();
+  const [tokenA, setTokenA] = useState<TokenModel | null>(null);
+  const [tokenB, setTokenB] = useState<TokenModel | null>(null);
+  const [startPrice] = useState<string>("130621891405341611593710811006");
+  const tokenAAmountInput = useTokenAmountInput(tokenA);
+  const tokenBAmountInput = useTokenAmountInput(tokenB);
+  const [swapFeeTier, setSwapFeeTier] = useState<SwapFeeTierType | null>(null);
+  const [priceRanges] = useState<AddLiquidityPriceRage[]>([TEMP_CUSTOM_PRICE_RANGE]);
+  const [priceRange, setPriceRange] = useState<AddLiquidityPriceRage | null>(null);
+  const [pools] = useState<PoolModel[]>([]);
+  const { connected: connectedWallet, account, connectAdenaClient } = useWallet();
+  const { slippage } = useSlippage();
+  const { updateTokenPrices } = useTokenData();
+  const { openModal: openConfirmModal } = useEarnAddLiquidityConfirmModal({
+    tokenA,
+    tokenB,
+    tokenAAmountInput,
+    tokenBAmountInput,
+    currentPrice: startPrice,
+    priceRange,
+    slippage,
+    swapFeeTier,
+  });
 
   const priceRangeSummary: PriceRangeSummary = useMemo(() => {
-    if (!priceRange) {
-      return {
-        depositRatio: "-",
-        feeBoost: "-",
-        estimatedApr: "-",
-      };
-    }
     return {
-      depositRatio: "40.2% ETH / 59.8% GNOS",
-      feeBoost: "x10.23",
-      estimatedApr: "19.22%",
+      depositRatio: "-",
+      feeBoost: "-",
+      estimatedApr: "-",
     };
-  }, [priceRange]);
+  }, []);
 
-  const selectFeeTier = useCallback((feeRate: FEE_RATE_OPTION) => {
-    setFeeRate(feeRate);
+  const submitType: AddLiquiditySubmitType = useMemo(() => {
+    if (!connectedWallet) {
+      return "CONNECT_WALLET";
+    }
+    if (!swapFeeTier) {
+      return "ENTER_AMOUNT";
+    }
+    if (!priceRange) {
+      return "INVALID_RANGE";
+    }
+    if (!account?.balances || account.balances.length === 0) {
+      return "INSUFFICIENT_BALANCE";
+    }
+    if (BigNumber(account.balances[0].amount).isLessThanOrEqualTo(1)) {
+      return "INSUFFICIENT_BALANCE";
+    }
+    if (BigNumber(tokenAAmountInput.amount).isLessThanOrEqualTo(0)) {
+      return "ENTER_AMOUNT";
+    }
+    if (BigNumber(tokenBAmountInput.amount).isLessThanOrEqualTo(0)) {
+      return "ENTER_AMOUNT";
+    }
+    return "CREATE_POOL";
+  }, [account?.balances, connectedWallet, priceRange, swapFeeTier, tokenAAmountInput.amount, tokenBAmountInput.amount]);
+
+  useEffect(() => {
+    updateTokenPrices();
   }, []);
 
-  const selectPriceRange = useCallback((priceRange: PriceRangeType) => {
+  const selectSwapFeeTier = useCallback((swapFeeTier: SwapFeeTierType) => {
+    setSwapFeeTier(swapFeeTier);
+  }, []);
+
+  const changePriceRange = useCallback((priceRange: AddLiquidityPriceRage) => {
     setPriceRange(priceRange);
   }, []);
 
-  const changeToken0 = useCallback((token: TokenInfo) => {
-    setToken0(token);
+  const changeTokenA = useCallback((token: TokenModel) => {
+    setTokenA(token);
   }, []);
 
-  const changeToken1 = useCallback((token: TokenInfo) => {
-    setToken1(token);
+  const changeTokenB = useCallback((token: TokenModel) => {
+    setTokenB(token);
   }, []);
 
+  const submit = useCallback(() => {
+    if (submitType === "CONNECT_WALLET") {
+      connectAdenaClient();
+      return;
+    }
+    if (submitType !== "CREATE_POOL") {
+      return;
+    }
+    if (!tokenA || !tokenB || !priceRange || !swapFeeTier) {
+      return;
+    }
+    openConfirmModal();
+  }, [submitType, tokenA, tokenB, priceRange, swapFeeTier, openConfirmModal, connectAdenaClient]);
+
   return (
     <EarnAddLiquidity
       mode={"POOL"}
       tokenA={tokenA}
       tokenB={tokenB}
-      token0Input={token0AmountInput}
-      token1Input={token1AmountInput}
-      changeToken0={changeToken0}
-      changeToken1={changeToken1}
-      feeTiers={feeTiers}
-      feeRate={feeRate}
-      selectFeeTier={selectFeeTier}
-      priceRangeMap={priceRangeMap}
+      tokenAInput={tokenAAmountInput}
+      tokenBInput={tokenBAmountInput}
+      changeTokenA={changeTokenA}
+      changeTokenB={changeTokenB}
+      feeTiers={SWAP_FEE_TIERS}
+      feeTier={swapFeeTier}
+      selectFeeTier={selectSwapFeeTier}
+      priceRanges={priceRanges}
       priceRange={priceRange}
       priceRangeSummary={priceRangeSummary}
-      selectPriceRange={selectPriceRange}
-      ticks={ticks}
-      currentTick={ticks[20]}
+      changePriceRange={changePriceRange}
+      ticks={[]}
+      pools={pools}
+      currentTick={null}
+      submitType={submitType}
+      submit={submit}
     />
   );
 };
diff --git a/packages/web/src/containers/earn-add-liquidity-container/earn-add-liquidity-dummy.ts b/packages/web/src/containers/earn-add-liquidity-container/earn-add-liquidity-dummy.ts
deleted file mode 100644
index 51cfba15a..000000000
--- a/packages/web/src/containers/earn-add-liquidity-container/earn-add-liquidity-dummy.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { FEE_RATE_OPTION, PriceRangeType } from "@constants/option.constant";
-import {
-  AddLiquidityFeeTier,
-  AddLiquidityPriceRage,
-} from "./EarnAddLiquidityContainer";
-
-export const DUMMY_FEE_TIERS: AddLiquidityFeeTier[] = [
-  {
-    feeRate: FEE_RATE_OPTION.FEE_01,
-    description: "Best for very stable pairs",
-    range: "12",
-  },
-  {
-    feeRate: FEE_RATE_OPTION.FEE_05,
-    description: "Best for stable pairs",
-    range: "67",
-  },
-  {
-    feeRate: FEE_RATE_OPTION.FEE_3,
-    description: "Best for most pairs",
-    range: "21",
-  },
-  {
-    feeRate: FEE_RATE_OPTION.FEE_1,
-    description: "Best for exotic pairs",
-    range: "0",
-  },
-];
-
-export const DUMMY_PRICE_RANGE_MAP: {
-  [key in PriceRangeType]: AddLiquidityPriceRage | undefined;
-} = {
-  Active: {
-    range: {
-      minPrice: "1300.5",
-      maxPrice: "1589.5",
-      minTick: "1.35",
-      maxTick: "1.65",
-    },
-    apr: "105",
-  },
-  Passive: {
-    range: {
-      minPrice: "722.5",
-      maxPrice: "2890",
-      minTick: "0.75",
-      maxTick: "3.0",
-    },
-    apr: "80",
-  },
-  Custom: {
-    range: {
-      minPrice: "722.5",
-      maxPrice: "2890",
-      minTick: "0.75",
-      maxTick: "3.0",
-    },
-    apr: "80",
-  },
-};
-
-export const DUMMY_POOL_TICKS = [
-  {
-    value: "1.073961138254532",
-    price: "0.9802084688126746",
-    tick: 0.9802084688126746,
-  },
-  {
-    value: "3.073059326138406",
-    price: "0.9811886772814872",
-    tick: 0.9811886772814872,
-  },
-  {
-    value: "-18.134954261462838",
-    price: "0.9821698659587685",
-    tick: 0.9821698659587685,
-  },
-  {
-    value: "3.66521159311813",
-    price: "0.9831520358247272",
-    tick: 0.9831520358247272,
-  },
-  {
-    value: "39.175366555249056",
-    price: "0.9841351878605519",
-    tick: 0.9841351878605519,
-  },
-  {
-    value: "3.2228815099962276",
-    price: "0.9851193230484123",
-    tick: 0.9851193230484123,
-  },
-  {
-    value: "48.468806410711174",
-    price: "0.9861044423714606",
-    tick: 0.9861044423714606,
-  },
-  {
-    value: "54.92851483124098",
-    price: "0.9870905468138319",
-    tick: 0.9870905468138319,
-  },
-  {
-    value: "34.93060212988513",
-    price: "0.9880776373606457",
-    tick: 0.9880776373606457,
-  },
-  {
-    value: "58.898158538319116",
-    price: "0.9890657149980062",
-    tick: 0.9890657149980062,
-  },
-  {
-    value: "42.511148168134525",
-    price: "0.9900547807130041",
-    tick: 0.9900547807130041,
-  },
-  {
-    value: "59.09467848301594",
-    price: "0.991044835493717",
-    tick: 0.991044835493717,
-  },
-  {
-    value: "63.57224846391675",
-    price: "0.9920358803292106",
-    tick: 0.9920358803292106,
-  },
-  {
-    value: "60.51934609120303",
-    price: "0.9930279162095397",
-    tick: 0.9930279162095397,
-  },
-  {
-    value: "78.35287274759652",
-    price: "0.9940209441257492",
-    tick: 0.9940209441257492,
-  },
-  {
-    value: "82.07006674582651",
-    price: "0.9950149650698747",
-    tick: 0.9950149650698747,
-  },
-  {
-    value: "86.64043005515893",
-    price: "0.9960099800349446",
-    tick: 0.9960099800349446,
-  },
-  {
-    value: "89.17600329920441",
-    price: "0.9970059900149794",
-    tick: 0.9970059900149794,
-  },
-  {
-    value: "100",
-    price: "0.9980029960049942",
-    tick: 0.9980029960049942,
-  },
-  {
-    value: "100",
-    price: "0.9990009990009991",
-    tick: 0.9990009990009991,
-  },
-  {
-    value: "100",
-    price: "1",
-    tick: 1,
-  },
-  {
-    value: "100",
-    price: "1.001",
-    tick: 1.001,
-  },
-  {
-    value: "100",
-    price: "1.0020009999999997",
-    tick: 1.0020009999999997,
-  },
-  {
-    value: "87.45649170423994",
-    price: "1.0030030009999997",
-    tick: 1.0030030009999997,
-  },
-  {
-    value: "83.44334373900584",
-    price: "1.0040060040009995",
-    tick: 1.0040060040009995,
-  },
-  {
-    value: "80.77769393647627",
-    price: "1.0050100100050003",
-    tick: 1.0050100100050003,
-  },
-  {
-    value: "67.41998453824951",
-    price: "1.0060150200150053",
-    tick: 1.0060150200150053,
-  },
-  {
-    value: "75.21903648844791",
-    price: "1.0070210350350202",
-    tick: 1.0070210350350202,
-  },
-  {
-    value: "78.26482882716132",
-    price: "1.0080280560700552",
-    tick: 1.0080280560700552,
-  },
-  {
-    value: "55.7200253355104",
-    price: "1.009036084126125",
-    tick: 1.009036084126125,
-  },
-  {
-    value: "56.96694253686708",
-    price: "1.0100451202102512",
-    tick: 1.0100451202102512,
-  },
-  {
-    value: "42.085152964383454",
-    price: "1.0110551653304611",
-    tick: 1.0110551653304611,
-  },
-  {
-    value: "29.59451072646806",
-    price: "1.0120662204957915",
-    tick: 1.0120662204957915,
-  },
-  {
-    value: "21.211739395363708",
-    price: "1.0130782867162873",
-    tick: 1.0130782867162873,
-  },
-  {
-    value: "51.47281147160517",
-    price: "1.0140913650030035",
-    tick: 1.0140913650030035,
-  },
-  {
-    value: "14.497330891553844",
-    price: "1.0151054563680064",
-    tick: 1.0151054563680064,
-  },
-  {
-    value: "10.731671509578433",
-    price: "1.0161205618243743",
-    tick: 1.0161205618243743,
-  },
-  {
-    value: "17.80906412507565",
-    price: "1.0171366823861985",
-    tick: 1.0171366823861985,
-  },
-  {
-    value: "38.586301175029746",
-    price: "1.0181538190685846",
-    tick: 1.0181538190685846,
-  },
-  {
-    value: "9.50528530112382",
-    price: "1.0191719728876532",
-    tick: 1.0191719728876532,
-  },
-];
diff --git a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
index e6528b40d..d8f6e602e 100644
--- a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
+++ b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
@@ -25,11 +25,15 @@ const HomeSwapContainer: React.FC = () => {
     <HomeSwap
       from={{
         token: {
-          path: "USDCoin",
-          name: "USDC",
-          symbol: "USDC",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+          chainId: "dev",
+          createdAt: "2023-10-10T08:48:46+09:00",
+          name: "Gnoswap",
+          address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+          path: "gno.land/r/gnos",
+          decimals: 4,
+          symbol: "GNOS",
+          logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+          priceId: "gno.land/r/gnos"
         },
         amount: "121",
         price: "$0.00",
@@ -37,11 +41,15 @@ const HomeSwapContainer: React.FC = () => {
       }}
       to={{
         token: {
-          path: "HEX",
-          name: "HEX",
-          symbol: "HEX",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+          chainId: "dev",
+          createdAt: "2023-10-10T08:48:46+09:00",
+          name: "Gnoswap",
+          address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+          path: "gno.land/r/gnos",
+          decimals: 4,
+          symbol: "GNOS",
+          logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+          priceId: "gno.land/r/gnos"
         },
         amount: "5000",
         price: "$0.00",
diff --git a/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx b/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
index 0e01a8634..57bb00165 100644
--- a/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
+++ b/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import SelectToken from "@components/common/select-token/SelectToken";
 import { useClearModal } from "@hooks/common/use-clear-modal";
-import { TokenInfo } from "@models/token/token-info";
 import { useTokenData } from "@hooks/token/use-token-data";
 import { TokenModel } from "@models/token/token-model";
 
 interface SelectTokenContainerProps {
-  changeToken?: (token: TokenInfo) => void;
+  changeToken?: (token: TokenModel) => void;
 }
 
 const SelectTokenContainer: React.FC<SelectTokenContainerProps> = ({
diff --git a/packages/web/src/containers/token-swap-container/TokenSwapContainer.tsx b/packages/web/src/containers/token-swap-container/TokenSwapContainer.tsx
index 76e9a4720..c683abd63 100644
--- a/packages/web/src/containers/token-swap-container/TokenSwapContainer.tsx
+++ b/packages/web/src/containers/token-swap-container/TokenSwapContainer.tsx
@@ -17,11 +17,15 @@ const TokenSwapContainer: React.FC = () => {
     <TokenSwap
       from={{
         token: {
-          path: "USDCoin",
-          name: "USDC",
-          symbol: "USDC",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+          chainId: "dev",
+          createdAt: "2023-10-10T08:48:46+09:00",
+          name: "Gnoswap",
+          address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+          path: "gno.land/r/gnos",
+          decimals: 4,
+          symbol: "GNOS",
+          logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+          priceId: "gno.land/r/gnos"
         },
         amount: "121",
         price: "$0.00",
@@ -29,11 +33,15 @@ const TokenSwapContainer: React.FC = () => {
       }}
       to={{
         token: {
-          path: "HEX",
-          name: "HEX",
-          symbol: "HEX",
-          logoURI:
-            "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+          chainId: "dev",
+          createdAt: "2023-10-10T08:48:46+09:00",
+          name: "Gnoswap",
+          address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+          path: "gno.land/r/gnos",
+          decimals: 4,
+          symbol: "GNOS",
+          logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+          priceId: "gno.land/r/gnos"
         },
         amount: "5000",
         price: "$0.00",
diff --git a/packages/web/src/hooks/pool/use-pool.tsx b/packages/web/src/hooks/pool/use-pool.tsx
new file mode 100644
index 000000000..671e8e52e
--- /dev/null
+++ b/packages/web/src/hooks/pool/use-pool.tsx
@@ -0,0 +1,55 @@
+import { SwapFeeTierType } from "@constants/option.constant";
+import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
+import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
+import { useWallet } from "@hooks/wallet/use-wallet";
+import { TokenModel } from "@models/token/token-model";
+import { useCallback } from "react";
+
+export const usePool = () => {
+  const { account } = useWallet();
+  const { poolRepository } = useGnoswapContext();
+
+  const createPool = useCallback(async ({
+    tokenA,
+    tokenB,
+    tokenAAmount,
+    tokenBAmount,
+    swapFeeTier,
+    startPrice,
+    priceRange,
+    slippage,
+  }: {
+    tokenA: TokenModel;
+    tokenB: TokenModel;
+    tokenAAmount: string;
+    tokenBAmount: string;
+    swapFeeTier: SwapFeeTierType;
+    startPrice: string;
+    priceRange: AddLiquidityPriceRage;
+    slippage: number;
+  }) => {
+    if (!account) {
+      return null;
+    }
+    const hash = await poolRepository.createPool({
+      tokenA,
+      tokenB,
+      tokenAAmount,
+      tokenBAmount,
+      feeTier: swapFeeTier,
+      startPrice,
+      minTick: priceRange.range.minTick,
+      maxTick: priceRange.range.maxTick,
+      slippage,
+      caller: account.address
+    }).catch(e => {
+      console.error(e);
+      return null;
+    });
+    return hash;
+  }, [account, poolRepository]);
+
+  return {
+    createPool
+  };
+};
\ No newline at end of file
diff --git a/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx
new file mode 100644
index 000000000..ebf191104
--- /dev/null
+++ b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx
@@ -0,0 +1,138 @@
+import EarnAddConfirm from "@components/earn-add/earn-add-confirm/EarnAddConfirm";
+import { SwapFeeTierInfoMap, SwapFeeTierType } from "@constants/option.constant";
+import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
+import useNavigate from "@hooks/common/use-navigate";
+import { usePool } from "@hooks/pool/use-pool";
+import { TokenModel } from "@models/token/token-model";
+import { CommonState } from "@states/index";
+import { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { TokenAmountInputModel } from "./use-token-amount-input";
+
+export interface EarnAddLiquidityConfirmModalProps {
+  tokenA: TokenModel | null;
+  tokenB: TokenModel | null;
+  tokenAAmountInput: TokenAmountInputModel;
+  tokenBAmountInput: TokenAmountInputModel;
+  currentPrice: string;
+  priceRange: AddLiquidityPriceRage | null;
+  slippage: number;
+  swapFeeTier: SwapFeeTierType | null;
+}
+export interface SelectTokenModalModel {
+  openModal: () => void;
+}
+
+export const useEarnAddLiquidityConfirmModal = ({
+  tokenA,
+  tokenB,
+  tokenAAmountInput,
+  tokenBAmountInput,
+  priceRange,
+  currentPrice,
+  slippage,
+  swapFeeTier,
+}: EarnAddLiquidityConfirmModalProps): SelectTokenModalModel => {
+  const [, setOpenedModal] = useAtom(CommonState.openedModal);
+  const [, setModalContent] = useAtom(CommonState.modalContent);
+  const { createPool } = usePool();
+  const navigator = useNavigate();
+
+  const amountInfo = useMemo(() => {
+    if (!tokenA || !tokenB || !swapFeeTier) {
+      return null;
+    }
+    return {
+      tokenA: {
+        info: tokenA,
+        amount: tokenAAmountInput.amount,
+        usdPrice: tokenAAmountInput.usdValue,
+      },
+      tokenB: {
+        info: tokenB,
+        amount: tokenBAmountInput.amount,
+        usdPrice: tokenBAmountInput.usdValue,
+      },
+      feeRate: SwapFeeTierInfoMap[swapFeeTier].rateStr
+    };
+  }, [swapFeeTier, tokenA, tokenAAmountInput, tokenBAmountInput, tokenB]);
+
+
+  const priceRangeInfo = useMemo(() => {
+    if (!priceRange) {
+      return null;
+    }
+    return {
+      currentPrice: currentPrice,
+      minPrice: `${priceRange.range.minTick}`,
+      minPriceLable: priceRange.range.minPrice,
+      maxPrice: `${priceRange.range.maxTick}`,
+      maxPriceLable: priceRange.range.maxPrice,
+      feeBoost: "-",
+      estimatedAPR: "N/A",
+    };
+  }, [currentPrice, priceRange]);
+
+  const feeInfo = useMemo(() => {
+    return {
+      token: {
+        path: "native",
+        address: "",
+        priceId: "GNOLAND",
+        chainId: "dev",
+        name: "Gno.land",
+        symbol: "GNOT",
+        decimals: 6,
+        logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/gno-native/images/gnot.svg",
+        createdAt: ""
+      },
+      fee: "0.000001"
+    };
+  }, []);
+
+  const close = useCallback(() => {
+    setOpenedModal(false);
+    setModalContent(null);
+  }, [setModalContent, setOpenedModal]);
+
+  const moveMain = useCallback(() => {
+    close();
+    navigator.push("/");
+  }, [close, navigator]);
+
+  const confirm = useCallback(() => {
+    if (!tokenA || !tokenB || !priceRange || !swapFeeTier) {
+      return;
+    }
+    createPool({
+      tokenA,
+      tokenB,
+      tokenAAmount: tokenAAmountInput.amount,
+      tokenBAmount: tokenBAmountInput.amount,
+      priceRange,
+      slippage,
+      startPrice: currentPrice,
+      swapFeeTier,
+    }).then(result => result && moveMain());
+  }, [createPool, currentPrice, moveMain, priceRange, slippage, swapFeeTier, tokenA, tokenAAmountInput.amount, tokenB, tokenBAmountInput.amount]);
+
+  const openModal = useCallback(() => {
+    if (!amountInfo || !priceRangeInfo) {
+      return;
+    }
+    setOpenedModal(true);
+    setModalContent(
+      <EarnAddConfirm
+        amountInfo={amountInfo}
+        priceRangeInfo={priceRangeInfo}
+        feeInfo={feeInfo}
+        confirm={confirm}
+        close={close}
+      />
+    );
+  }, [amountInfo, close, confirm, feeInfo, priceRangeInfo, setModalContent, setOpenedModal]);
+
+  return {
+    openModal
+  };
+};
\ No newline at end of file
diff --git a/packages/web/src/hooks/token/use-select-token-modal.tsx b/packages/web/src/hooks/token/use-select-token-modal.tsx
index 94b1e4306..696bdb944 100644
--- a/packages/web/src/hooks/token/use-select-token-modal.tsx
+++ b/packages/web/src/hooks/token/use-select-token-modal.tsx
@@ -1,11 +1,11 @@
 import SelectTokenContainer from "@containers/select-token-container/SelectTokenContainer";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 import { CommonState } from "@states/index";
 import { useAtom } from "jotai";
 import { useCallback } from "react";
 
 export interface SelectTokenModalProps {
-  changeToken?: (token: TokenInfo) => void;
+  changeToken?: (token: TokenModel) => void;
 }
 export interface SelectTokenModalModel {
   openModal: () => void;
diff --git a/packages/web/src/hooks/token/use-token-amount-input.tsx b/packages/web/src/hooks/token/use-token-amount-input.tsx
index 52e3abb32..23fe2226b 100644
--- a/packages/web/src/hooks/token/use-token-amount-input.tsx
+++ b/packages/web/src/hooks/token/use-token-amount-input.tsx
@@ -1,20 +1,30 @@
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 import BigNumber from "bignumber.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTokenData } from "./use-token-data";
 
 export interface TokenAmountInputModel {
-  token: TokenInfo | undefined;
+  token: TokenModel | null;
   amount: string;
   balance: string;
   usdValue: string;
   changeAmount: (amount: string) => void;
-  changeBalance: (balance: number) => void;
 }
 
-export const useTokenAmountInput = (token: TokenInfo | undefined): TokenAmountInputModel => {
+export const useTokenAmountInput = (token: TokenModel | null): TokenAmountInputModel => {
   const [amount, setAmount] = useState<string>("0");
   const [balance, setBalance] = useState<string>("0");
   const [usd, setUSD] = useState<number>();
+  const { balances, tokenPrices } = useTokenData();
+
+  useEffect(() => {
+    if (token && balances[token.path]) {
+      const balance = balances[token.path];
+      setBalance(BigNumber(balance ?? 0).toFormat());
+    } else {
+      setBalance("0");
+    }
+  }, [balances, token]);
 
   const usdValue = useMemo(() => {
     if (!usd) {
@@ -24,21 +34,24 @@ export const useTokenAmountInput = (token: TokenInfo | undefined): TokenAmountIn
   }, [usd]);
 
   const changeAmount = useCallback((value: string) => {
-    const amount = value;
-    setAmount(amount);
-    setUSD(BigNumber(amount).toNumber());
-  }, []);
+    if (!token) {
+      return;
+    }
 
-  const changeBalance = useCallback((balance: number) => {
-    setBalance(BigNumber(balance).toFormat());
-  }, []);
+    const amount = BigNumber(value);
+    setAmount(amount.toString());
+
+    if (tokenPrices[token.priceId]) {
+      const usd = BigNumber(tokenPrices[token.priceId].usd).multipliedBy(amount).toNumber();
+      setUSD(usd);
+    }
+  }, [token, tokenPrices]);
 
   return {
     token,
     amount,
     balance,
     usdValue,
-    changeBalance,
     changeAmount,
   };
 };
\ No newline at end of file
diff --git a/packages/web/src/hooks/token/use-token-data.tsx b/packages/web/src/hooks/token/use-token-data.tsx
index 9c0c2d465..5a9455b4e 100644
--- a/packages/web/src/hooks/token/use-token-data.tsx
+++ b/packages/web/src/hooks/token/use-token-data.tsx
@@ -2,11 +2,12 @@ import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
 import { useWallet } from "@hooks/wallet/use-wallet";
 import { CardListTokenInfo } from "@models/common/card-list-item-info";
 import { TokenModel } from "@models/token/token-model";
+import { TokenPriceModel } from "@models/token/token-price-model";
 import { TokenState } from "@states/index";
 import { evaluateExpressionToNumber } from "@utils/rpc-utils";
 import BigNumber from "bignumber.js";
 import { useAtom } from "jotai";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 export const useTokenData = () => {
   const { account } = useWallet();
@@ -15,10 +16,16 @@ export const useTokenData = () => {
   const [tokenPrices, setTokenPrices] = useAtom(TokenState.tokenPrices);
   const [balances, setBalances] = useAtom(TokenState.balances);
 
+  useEffect(() => {
+    if (rpcProvider && account) {
+      updateBalances();
+    }
+  }, [rpcProvider, account]);
+
   const trendingTokens: CardListTokenInfo[] = useMemo(() => {
     const sortedTokens = tokens.sort((t1, t2) => {
       if (tokenPrices[t1.priceId] && tokenPrices[t2.priceId]) {
-        return tokenPrices[t2.priceId].volume - tokenPrices[t1.priceId].volume;
+        return BigNumber(tokenPrices[t2.priceId].volume).toNumber() - BigNumber(tokenPrices[t1.priceId].volume).toNumber();
       }
       if (tokenPrices[t2.priceId]) {
         return 1;
@@ -31,8 +38,8 @@ export const useTokenData = () => {
     return sortedTokens.map(token => (
       tokenPrices[token.priceId] ? {
         token,
-        upDown: tokenPrices[token.priceId].changedBefore1D > 0 ? "up" : "down",
-        content: `${BigNumber(tokenPrices[token.priceId].changedBefore1D).toFixed()}%`
+        upDown: BigNumber(tokenPrices[token.priceId].change1d).isPositive() ? "up" : "down",
+        content: `${BigNumber(tokenPrices[token.priceId].change1d).toFixed()}%`
       } : {
         token,
         upDown: "none",
@@ -65,7 +72,11 @@ export const useTokenData = () => {
 
   async function updateTokenPrices() {
     const response = await tokenRepository.getTokenPrices();
-    setTokenPrices(response.prices);
+    const priceMap = response.prices.reduce<Record<string, TokenPriceModel>>((prev, current) => {
+      prev[current.path] = current;
+      return prev;
+    }, {});
+    setTokenPrices(priceMap);
   }
 
   async function updateBalances() {
@@ -85,7 +96,7 @@ export const useTokenData = () => {
     const balances: Record<string, number | null> = {};
     fetchResults.forEach((result, index) => {
       if (index < tokens.length) {
-        balances[tokens[index].priceId] = result;
+        balances[tokens[index].path] = result;
       }
     });
     setBalances(balances);
diff --git a/packages/web/src/hooks/wallet/use-wallet.ts b/packages/web/src/hooks/wallet/use-wallet.ts
index c6e5b987c..d69a4977e 100644
--- a/packages/web/src/hooks/wallet/use-wallet.ts
+++ b/packages/web/src/hooks/wallet/use-wallet.ts
@@ -1,14 +1,16 @@
 import { WalletClient } from "@common/clients/wallet-client";
 import { AdenaClient } from "@common/clients/wallet-client/adena";
 import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
-import { WalletState } from "@states/index";
+import { CommonState, WalletState } from "@states/index";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
+import NetworkData from "@resources/chains.json";
 
 export const useWallet = () => {
   const { accountRepository } = useGnoswapContext();
   const [walletClient, setWalletClient] = useAtom(WalletState.client);
   const [walletAccount, setWalletAccount] = useAtom(WalletState.account);
+  const [, setNetwork] = useAtom(CommonState.network);
 
   const connected = useMemo(() => {
     return walletAccount !== null && walletAccount.address.length > 0;
@@ -28,6 +30,17 @@ export const useWallet = () => {
     }
   }, [walletClient]);
 
+  useEffect(() => {
+    if (walletAccount) {
+      const network = NetworkData.find(
+        network => network.chainId === walletAccount.chainId,
+      );
+      if (network) {
+        setNetwork(network);
+      }
+    }
+  }, [setNetwork, walletAccount]);
+
   function initSession() {
     const connectedBySession = accountRepository.isConnectedWalletBySession();
     if (connectedBySession) {
diff --git a/packages/web/src/models/swap/swap-confirm-model.ts b/packages/web/src/models/swap/info/swap-confirm-model.ts
similarity index 100%
rename from packages/web/src/models/swap/swap-confirm-model.ts
rename to packages/web/src/models/swap/info/swap-confirm-model.ts
diff --git a/packages/web/src/models/swap/swap-fee-tier-info.ts b/packages/web/src/models/swap/swap-fee-tier-info.ts
new file mode 100644
index 000000000..6a75f30cb
--- /dev/null
+++ b/packages/web/src/models/swap/swap-fee-tier-info.ts
@@ -0,0 +1,6 @@
+import { SwapFeeTierType } from "@constants/option.constant";
+
+export interface SwapFeeTierInfo {
+  swapFeeTier: SwapFeeTierType;
+  selectedRange: number;
+}
diff --git a/packages/web/src/models/swap/swap-token-model.ts b/packages/web/src/models/swap/swap-token-model.ts
index b080200fe..b84127f3b 100644
--- a/packages/web/src/models/swap/swap-token-model.ts
+++ b/packages/web/src/models/swap/swap-token-model.ts
@@ -1,7 +1,7 @@
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 export interface SwapTokenModel {
-  token: TokenInfo;
+  token: TokenModel;
   amount: string;
   price: string;
   balance: string;
diff --git a/packages/web/src/models/token/token-price-model.ts b/packages/web/src/models/token/token-price-model.ts
index 6f75c5c3b..d2b35a90e 100644
--- a/packages/web/src/models/token/token-price-model.ts
+++ b/packages/web/src/models/token/token-price-model.ts
@@ -1,9 +1,11 @@
 export interface TokenPriceModel {
-  usd: number;
-  changedBefore1D: number;
-  changedBefore7D: number;
-  changedBefore30D: number;
-  marketCap: number;
-  liquidity: number;
-  volume: number;
+  path: string;
+  usd: string;
+  change1h: string;
+  change1d: string;
+  change7d: string;
+  change30d: string;
+  marketCap: string;
+  liquidity: string;
+  volume: string;
 }
diff --git a/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx b/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
index d5d948f5e..993b2ce65 100644
--- a/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
+++ b/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
@@ -56,8 +56,8 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
   }, []);
 
   const poolRepository = useMemo(() => {
-    return new PoolRepositoryImpl(networkClient);
-  }, [networkClient]);
+    return new PoolRepositoryImpl(networkClient, walletClient);
+  }, [networkClient, walletClient]);
 
   const stakingRepository = useMemo(() => {
     return new StakingRepositoryMock();
@@ -65,7 +65,7 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
 
   const swapRepository = useMemo(() => {
     return new SwapRepositoryMock(walletClient);
-  }, []);
+  }, [walletClient]);
 
   const tokenRepository = useMemo(() => {
     return new TokenRepositoryImpl(networkClient, localStorageClient);
diff --git a/packages/web/src/repositories/pool/pool-repository-impl.ts b/packages/web/src/repositories/pool/pool-repository-impl.ts
index 935f296db..d6afba6ef 100644
--- a/packages/web/src/repositories/pool/pool-repository-impl.ts
+++ b/packages/web/src/repositories/pool/pool-repository-impl.ts
@@ -1,11 +1,25 @@
 import { NetworkClient } from "@common/clients/network-client";
 import { PoolDetailResponse, PoolListResponse, PoolRepository } from ".";
+import { WalletClient } from "@common/clients/wallet-client";
+import { CreatePoolRequest } from "./request/create-pool-request";
+import { TokenModel } from "@models/token/token-model";
+import {
+  SwapFeeTierInfoMap,
+  SwapFeeTierType,
+} from "@constants/option.constant";
+import { SendTransactionSuccessResponse } from "@common/clients/wallet-client/protocols";
+
+const POOL_PATH = process.env.NEXT_PUBLIC_PACKAGE_POOL_PATH || "";
+const POSITION_PATH = process.env.NEXT_PUBLIC_PACKAGE_POSITION_PATH || "";
+const POOL_ADDRESS = process.env.NEXT_PUBLIC_PACKAGE_POOL_ADDRESS || "";
 
 export class PoolRepositoryImpl implements PoolRepository {
   private networkClient: NetworkClient;
+  private walletClient: WalletClient;
 
-  constructor(networkClient: NetworkClient) {
+  constructor(networkClient: NetworkClient, walletClient: WalletClient) {
     this.networkClient = networkClient;
+    this.walletClient = walletClient;
   }
 
   getPools = async (): Promise<PoolListResponse> => {
@@ -26,4 +40,134 @@ export class PoolRepositoryImpl implements PoolRepository {
     });
     return response.data;
   };
+
+  createPool = async (request: CreatePoolRequest): Promise<string | null> => {
+    const {
+      tokenA,
+      tokenB,
+      feeTier,
+      tokenAAmount,
+      tokenBAmount,
+      minTick,
+      maxTick,
+      startPrice,
+      slippage,
+      caller,
+    } = request;
+    const gasFee = 1;
+    const gasWanted = 2000000;
+    const result = await this.walletClient.sendTransaction({
+      messages: [
+        PoolRepositoryImpl.makeCreatePoolMessage(
+          tokenA,
+          tokenB,
+          feeTier,
+          startPrice,
+          caller,
+        ),
+        PoolRepositoryImpl.makeApproveTokenMessage(
+          tokenA,
+          tokenAAmount,
+          caller,
+        ),
+        PoolRepositoryImpl.makeApproveTokenMessage(
+          tokenB,
+          tokenBAmount,
+          caller,
+        ),
+        PoolRepositoryImpl.makeAddLiquidityMessage(
+          tokenA,
+          tokenB,
+          feeTier,
+          minTick,
+          maxTick,
+          tokenAAmount,
+          tokenBAmount,
+          slippage,
+          caller,
+        ),
+      ],
+      gasFee,
+      gasWanted,
+    });
+    const response = result.data as SendTransactionSuccessResponse;
+    if (!response.hash) {
+      throw new Error(`${result}`);
+    }
+    return response.hash;
+  };
+
+  private static makeCreatePoolMessage(
+    tokenA: TokenModel,
+    tokenB: TokenModel,
+    feeTier: SwapFeeTierType,
+    startPrice: string,
+    caller: string,
+  ) {
+    // Todo: Change to Path
+    // const tokenAPath = tokenA.path;
+    // const tokenBPath = tokenB.path;
+    const tokenAPath = tokenA.symbol.toLowerCase();
+    const tokenBPath = tokenB.symbol.toLowerCase();
+    const fee = `${SwapFeeTierInfoMap[feeTier].fee}`;
+    return {
+      caller,
+      send: "",
+      pkg_path: POOL_PATH,
+      func: "CreatePool",
+      args: [tokenAPath, tokenBPath, fee, startPrice],
+    };
+  }
+
+  private static makeApproveTokenMessage(
+    token: TokenModel,
+    amount: string,
+    caller: string,
+  ) {
+    return {
+      caller,
+      send: "",
+      pkg_path: token.path,
+      func: "Approve",
+      args: [POOL_ADDRESS, "9999999"],
+    };
+  }
+
+  private static makeAddLiquidityMessage(
+    tokenA: TokenModel,
+    tokenB: TokenModel,
+    feeTier: SwapFeeTierType,
+    minTick: number,
+    maxTick: number,
+    tokenAAmount: string,
+    tokenBAmount: string,
+    slippage: number,
+    caller: string,
+  ) {
+    // Todo: Change to Path
+    // const tokenAPath = tokenA.path;
+    // const tokenBPath = tokenB.path;
+    const tokenAPath = tokenA.symbol.toLowerCase();
+    const tokenBPath = tokenB.symbol.toLowerCase();
+    const fee = `${SwapFeeTierInfoMap[feeTier].fee}`;
+    const deadline = "7282571140";
+    return {
+      caller,
+      send: "",
+      pkg_path: POSITION_PATH,
+      func: "Mint",
+      args: [
+        tokenAPath,
+        tokenBPath,
+        fee,
+        `${minTick}`,
+        `${maxTick}`,
+        tokenAAmount,
+        tokenBAmount,
+        "0",
+        "0",
+        deadline,
+      ],
+    };
+  }
 }
diff --git a/packages/web/src/repositories/pool/pool-repository-mock.ts b/packages/web/src/repositories/pool/pool-repository-mock.ts
index 6d459fc50..202a061b0 100644
--- a/packages/web/src/repositories/pool/pool-repository-mock.ts
+++ b/packages/web/src/repositories/pool/pool-repository-mock.ts
@@ -11,4 +11,8 @@ export class PoolRepositoryMock implements PoolRepository {
   getPoolDetailByPoolId = async (): Promise<PoolDetailResponse> => {
     return PoolDetailData as PoolDetailResponse;
   };
+
+  createPool = async (): Promise<string> => {
+    return "hash";
+  };
 }
diff --git a/packages/web/src/repositories/pool/pool-repository.ts b/packages/web/src/repositories/pool/pool-repository.ts
index 606ffbe87..9eec8b297 100644
--- a/packages/web/src/repositories/pool/pool-repository.ts
+++ b/packages/web/src/repositories/pool/pool-repository.ts
@@ -1,7 +1,10 @@
+import { CreatePoolRequest } from "./request/create-pool-request";
 import { PoolDetailResponse, PoolListResponse } from "./response";
 
 export interface PoolRepository {
   getPools: () => Promise<PoolListResponse>;
 
   getPoolDetailByPoolId: (poolId: string) => Promise<PoolDetailResponse>;
+
+  createPool: (request: CreatePoolRequest) => Promise<string | null>;
 }
diff --git a/packages/web/src/repositories/pool/request/create-pool-request.ts b/packages/web/src/repositories/pool/request/create-pool-request.ts
new file mode 100644
index 000000000..99e8a33cd
--- /dev/null
+++ b/packages/web/src/repositories/pool/request/create-pool-request.ts
@@ -0,0 +1,15 @@
+import { SwapFeeTierType } from "@constants/option.constant";
+import { TokenModel } from "@models/token/token-model";
+
+export interface CreatePoolRequest {
+  tokenA: TokenModel;
+  tokenB: TokenModel;
+  feeTier: SwapFeeTierType;
+  tokenAAmount: string;
+  tokenBAmount: string;
+  startPrice: string;
+  minTick: number;
+  maxTick: number;
+  slippage: number;
+  caller: string;
+}
diff --git a/packages/web/src/repositories/token/mock/token-prices.json b/packages/web/src/repositories/token/mock/token-prices.json
index eb35bb4c6..8e12b7bfe 100644
--- a/packages/web/src/repositories/token/mock/token-prices.json
+++ b/packages/web/src/repositories/token/mock/token-prices.json
@@ -1,73 +1,41 @@
 {
-  "message": "Successful",
-  "count": 7,
   "meta": {
-    "timestamp": 1695363312078,
-    "ageRaw": 56
+    "height": "94",
+    "timestamp": "2023-10-10T17:51:46+09:00"
   },
-  "prices": {
-    "1inch": {
-      "usd": 0.03077532,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
+  "prices": [
+    {
+      "path": "gno.land/r/bar",
+      "usd": "1.000000",
+      "change1h": "0.000000",
+      "change1d": "0.000000",
+      "change7d": "0.000000",
+      "change30d": "0.000000",
+      "marketCap": "110200000000.000000",
+      "liquidity": "195871.000000",
+      "volume": "195886.000000"
     },
-    "usd-coin": {
-      "usd": 0.999292,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
+    {
+      "path": "gno.land/r/foo",
+      "usd": "0.074070",
+      "change1h": "0.000000",
+      "change1d": "0.000000",
+      "change7d": "0.000000",
+      "change30d": "0.000000",
+      "marketCap": "8162479867.948110",
+      "liquidity": "195871.000000",
+      "volume": "195871.000000"
     },
-    "weth": {
-      "usd": 1592.57,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
-    },
-    "uniswap": {
-      "usd": 4.23,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
-    },
-    "ethereum": {
-      "usd": 1618.72,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
-    },
-    "wrapped-bitcoin": {
-      "usd": 26598,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
-    },
-    "wrapped-steth": {
-      "usd": 1814.66,
-      "changedBefore1D": 19.92,
-      "changedBefore7D": -12.09,
-      "changedBefore30D": 19.12,
-      "marketCap": 31142124125500000000,
-      "liquidity": 1421241255,
-      "volume": 311421241
+    {
+      "path": "gno.land/r/bar",
+      "usd": "1.000000",
+      "change1h": "0.000000",
+      "change1d": "0.000000",
+      "change7d": "0.000000",
+      "change30d": "0.000000",
+      "marketCap": "110200000000.000000",
+      "liquidity": "195871.000000",
+      "volume": "195886.000000"
     }
-  }
+  ]
 }
diff --git a/packages/web/src/repositories/token/response/token-price-list-response.ts b/packages/web/src/repositories/token/response/token-price-list-response.ts
index 9049efa9f..25f7b0407 100644
--- a/packages/web/src/repositories/token/response/token-price-list-response.ts
+++ b/packages/web/src/repositories/token/response/token-price-list-response.ts
@@ -1,7 +1,5 @@
 import { TokenPriceModel } from "@models/token/token-price-model";
 
 export interface TokenPriceListResponse {
-  prices: {
-    [tokenPriceId in string]: TokenPriceModel;
-  };
+  prices: TokenPriceModel[];
 }
diff --git a/packages/web/src/repositories/token/token-repository-impl.ts b/packages/web/src/repositories/token/token-repository-impl.ts
index 33032391b..0867418c7 100644
--- a/packages/web/src/repositories/token/token-repository-impl.ts
+++ b/packages/web/src/repositories/token/token-repository-impl.ts
@@ -31,7 +31,7 @@ export class TokenRepositoryImpl implements TokenRepository {
 
   public getTokenPrices = async (): Promise<TokenPriceListResponse> => {
     const response = await this.networkClient.get<TokenPriceListResponse>({
-      url: "/tokenPrice",
+      url: "/tokenPrices",
     });
     return response.data;
   };
diff --git a/packages/web/src/utils/rpc-utils.ts b/packages/web/src/utils/rpc-utils.ts
index 5f639ad8e..f04044afb 100644
--- a/packages/web/src/utils/rpc-utils.ts
+++ b/packages/web/src/utils/rpc-utils.ts
@@ -2,14 +2,14 @@ import BigNumber from "bignumber.js";
 
 export function evaluateExpressionToNumber(evaluateExpression: string) {
   try {
-    const regexp = /(.*?)/;
-    const result = Array.from(
-      evaluateExpression.matchAll(regexp),
-      match => `${match[0]}`,
-    );
-    if (result.length > 0) {
-      return BigNumber(result[0]).toNumber();
+    const regexp = /\((.*)\)/;
+    const result = evaluateExpression.match(regexp);
+    if (result === null || result.length < 1) {
+      return 0;
     }
+
+    const parsedValue = result[1].split(" ")[0];
+    return BigNumber(parsedValue).toNumber();
   } catch {
     console.log("Parse Error: " + evaluateExpression);
   }