diff --git a/packages/web/src/constants/option.constant.ts b/packages/web/src/constants/option.constant.ts
index 31aaa7662..0ee43e036 100644
--- a/packages/web/src/constants/option.constant.ts
+++ b/packages/web/src/constants/option.constant.ts
@@ -77,3 +77,5 @@ export const PriceRangeTooltip: {
     "A passive price range of [-50% ~ +100%] for moderate risks & returns.",
   Custom: undefined,
 };
+
+export const DEFAULT_SLIPPAGE = 0.5;
diff --git a/packages/web/src/hooks/common/use-slippage.ts b/packages/web/src/hooks/common/use-slippage.ts
new file mode 100644
index 000000000..0e9f865f2
--- /dev/null
+++ b/packages/web/src/hooks/common/use-slippage.ts
@@ -0,0 +1,22 @@
+import { useAtom } from "jotai";
+import { CommonState } from "@states/index";
+import { useCallback } from "react";
+import { DEFAULT_SLIPPAGE } from "@constants/option.constant";
+
+export const useSlippage = () => {
+  const [slippage, setSlippage] = useAtom(CommonState.slippage);
+
+  const changeSlippage = useCallback(
+    (slippage: number) => {
+      const changedSlippage = Math.min(100, Math.max(0, slippage));
+      setSlippage(changedSlippage);
+    },
+    [setSlippage],
+  );
+
+  const resetSlippage = useCallback(() => {
+    setSlippage(DEFAULT_SLIPPAGE);
+  }, [setSlippage]);
+
+  return { slippage, changeSlippage, resetSlippage };
+};
diff --git a/packages/web/src/states/common.ts b/packages/web/src/states/common.ts
index c70a18af1..de41fa30e 100644
--- a/packages/web/src/states/common.ts
+++ b/packages/web/src/states/common.ts
@@ -2,6 +2,8 @@ import { NetworkModel } from "@models/common/network-model";
 import { DEVICE_TYPE } from "@styles/media";
 import { atom } from "jotai";
 import NetworkData from "@resources/chains.json";
+import { atomWithStorage } from "jotai/utils";
+import { DEFAULT_SLIPPAGE } from "@constants/option.constant";
 
 interface HeaderToggleProps {
   walletConnect: boolean;
@@ -20,3 +22,5 @@ export const modalContent = atom<React.ReactNode | null>(null);
 export const breakpoint = atom<DEVICE_TYPE>(DEVICE_TYPE.WEB);
 
 export const network = atom<NetworkModel>(NetworkData[0]);
+
+export const slippage = atomWithStorage<number>("slippage", DEFAULT_SLIPPAGE);
diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts
index 4e048966d..9099bc7c1 100644
--- a/packages/web/src/utils/number-utils.ts
+++ b/packages/web/src/utils/number-utils.ts
@@ -114,3 +114,12 @@ export const toUnitFormat = (
   // TODO : Else Return Type
   return (usd ? "$" : "") + bigNumber.decimalPlaces(2).toString();
 };
+
+export function toDecimalNumber(
+  value: BigNumber | string | number,
+  decimals?: number,
+) {
+  const powers = 10 ** (decimals || 0);
+  const num = BigNumber(value).toNumber();
+  return Math.round(num * powers) / powers;
+}