diff --git a/package-lock.json b/package-lock.json
index 2c2e51688..6ce885c4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7088,6 +7088,10 @@
       "resolved": "packages/thena",
       "link": true
     },
+    "node_modules/@orbs-network/twap-ui-tradingpost": {
+      "resolved": "packages/tradingpost",
+      "link": true
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
@@ -36647,6 +36651,56 @@
         "react": "*",
         "react-dom": "*"
       }
+    },
+    "packages/tradingpost": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@defi.org/web3-candies": "^4.20",
+        "@mui/material": "5.x",
+        "@mui/system": "5.x",
+        "@orbs-network/twap": "^1.18.x",
+        "@orbs-network/twap-ui": "^0.10.14",
+        "lodash": "4.x",
+        "web3": "1.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "packages/tradingpost/node_modules/@orbs-network/twap-ui": {
+      "version": "0.10.23",
+      "resolved": "https://registry.npmjs.org/@orbs-network/twap-ui/-/twap-ui-0.10.23.tgz",
+      "integrity": "sha512-gx/kpl71eTdA0tTzqBFyFSzcvUGV3IeuPJjiFFw+fuesTzdnPvs3Pg4cGMN+wlI4siLi+eSm/vw0n8IapYDPug==",
+      "dependencies": {
+        "@defi.org/web3-candies": "^4.20",
+        "@emotion/react": "11.x",
+        "@emotion/styled": "11.x",
+        "@mui/material": "5.x",
+        "@mui/system": "5.x",
+        "@orbs-network/twap": "^1.18.x",
+        "@react-icons/all-files": "^4.1.0",
+        "@tanstack/react-query": "4.x",
+        "@types/async-retry": "^1.4.5",
+        "@types/lodash": "4.x",
+        "async-retry": "^1.3.3",
+        "bignumber.js": "9.x",
+        "emotion-theming": "11.x",
+        "isomorphic-fetch": "3.x",
+        "lodash": "4.x",
+        "moment": "2.x",
+        "qrcode.react": "^3.1.0",
+        "react-error-boundary": "^4.0.10",
+        "react-number-format": "5.x",
+        "react-text-overflow": "^1.0.2",
+        "web3": "1.x",
+        "zustand": "4.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
     }
   }
 }
diff --git a/packages/dapp-example/src/TradingPost.tsx b/packages/dapp-example/src/TradingPost.tsx
new file mode 100644
index 000000000..9b75151e5
--- /dev/null
+++ b/packages/dapp-example/src/TradingPost.tsx
@@ -0,0 +1,305 @@
+import { StyledModalContent, StyledTradingPost, StyledPancakeBackdrop, StyledTradingPostLayout, StyledPancakeOrders, StyledPancakeTwap } from "./styles";
+import { TWAP, Orders, parseToken } from "@orbs-network/twap-ui-tradingpost";
+import { useConnectWallet, useGetTokens, useIsMobile, usePriceUSD, useTheme, useTrade } from "./hooks";
+import { Configs } from "@orbs-network/twap";
+import { useWeb3React } from "@web3-react/core";
+import { Dapp, TokensList, UISelector } from "./Components";
+import { Popup } from "./Components";
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import _ from "lodash";
+import { erc20s, isNativeAddress, zeroAddress } from "@defi.org/web3-candies";
+import { SelectorOption, TokenListItem } from "./types";
+import { Box } from "@mui/system";
+import { Button, styled, Tooltip, Typography } from "@mui/material";
+import { Components, hooks, Styles } from "@orbs-network/twap-ui";
+import BN from "bignumber.js";
+const config = Configs.PancakeSwap;
+
+const tradingPostConfig = {
+  ...config,
+  name: "TradingPost",
+};
+
+let native = {
+  ...tradingPostConfig.nativeToken,
+  logoURI: tradingPostConfig.nativeToken.logoUrl,
+};
+
+const parseListToken = (tokenList: any) => {
+  const result = tokenList.tokens.map(({ symbol, address, decimals, logoURI, name }: any) => ({
+    decimals,
+    symbol,
+    name,
+    address,
+    logoURI: logoURI.replace("_1", ""),
+  }));
+
+  return [native, ...result];
+};
+export const useDappTokens = () => {
+  return useGetTokens({
+    chainId: config.chainId,
+    parse: parseListToken,
+    modifyList: (tokens: any) => ({ ..._.mapKeys(tokens, (t) => t.address) }),
+    baseAssets: erc20s.bsc,
+    url: `https://tokens.pancakeswap.finance/pancakeswap-extended.json`,
+  });
+};
+
+interface TokenSelectModalProps {
+  onCurrencySelect: (value: any) => void;
+  selectedCurrency?: any;
+  otherSelectedCurrency?: any;
+}
+
+const parseList = (rawList?: any): TokenListItem[] => {
+  return _.map(rawList, (rawToken) => {
+    return {
+      token: {
+        address: rawToken.address,
+        decimals: rawToken.decimals,
+        symbol: rawToken.symbol,
+        logoUrl: rawToken.logoURI,
+      },
+      rawToken,
+    };
+  });
+};
+
+const ConnectButton = () => {
+  const connect = useConnectWallet();
+  return (
+    <div onClick={connect}>
+      <Components.SubmitButton isMain={true} />
+    </div>
+  );
+};
+
+interface ContextProps {
+  openModal: (value: boolean) => void;
+  close: () => void;
+  showModal?: boolean;
+  isFrom?: boolean;
+  setIsFrom?: (value: boolean) => void;
+}
+const Context = createContext({} as ContextProps);
+
+const ContextWrapper = ({ children }: { children: ReactNode }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [isFrom, setIsFrom] = useState(true);
+
+  const openModal = (value: boolean) => {
+    setIsFrom(value);
+    setShowModal(true);
+  };
+
+  return <Context.Provider value={{ isFrom, setIsFrom, showModal, openModal, close: () => setShowModal(false) }}>{children}</Context.Provider>;
+};
+
+const TokenSelectModal = ({ onCurrencySelect }: TokenSelectModalProps) => {
+  const { data: dappTokens } = useDappTokens();
+
+  const tokensListSize = _.size(dappTokens);
+  const parsedList = useMemo(() => parseList(dappTokens), [tokensListSize]);
+
+  return (
+    <StyledModalContent>
+      <TokensList tokens={parsedList} onClick={onCurrencySelect} />
+    </StyledModalContent>
+  );
+};
+
+const useDecimals = (fromToken?: string, toToken?: string) => {
+  const { data: dappTokens } = useDappTokens();
+  const fromTokenDecimals = dappTokens?.[fromToken || ""]?.decimals;
+  const toTokenDecimals = dappTokens?.[toToken || ""]?.decimals;
+
+  return { fromTokenDecimals, toTokenDecimals };
+};
+
+const handleAddress = (address?: string) => {
+  return !address ? "" : "BNB" ? zeroAddress : address;
+};
+
+const useTokenModal = (item1: any, item2: any, item3: any, isFrom?: boolean) => {
+  const context = useContext(Context);
+  return () => context.openModal(!!isFrom);
+};
+
+const useTooltip = (content: ReactNode, options?: any, children?: ReactNode) => {
+  const targetRef = useRef<any>(null);
+
+  const tooltip = (
+    <Tooltip title={content}>
+      <span>{children}</span>
+    </Tooltip>
+  );
+
+  return {
+    targetRef,
+    tooltip,
+  };
+};
+
+const DappButton = ({ isLoading, disabled, children, onClick }: any) => {
+  return (
+    <StyledButton variant="contained" fullWidth disabled={isLoading || disabled} onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
+};
+
+const StyledButton = styled(Button)({
+  width: "100%",
+});
+
+const ApproveModalContent = ({ title, isBonus, isMM }: { title: string; isBonus: boolean; isMM: boolean }) => {
+  return <p>Approving</p>;
+};
+
+const SwapTransactionErrorContent = ({ message }: { message: string }) => {
+  return <p>{message}</p>;
+};
+const SwapPendingModalContent = ({ title }: { title: string }) => {
+  return <p>{title}</p>;
+};
+
+const TWAPComponent = ({ limit }: { limit?: boolean }) => {
+  const { isDarkTheme } = useTheme();
+  const { account, library, chainId } = useWeb3React();
+  const { data: dappTokens } = useDappTokens();
+  const isMobile = useIsMobile();
+
+  const _useTrade = (fromToken?: string, toToken?: string, amount?: string) => {
+    const { fromTokenDecimals, toTokenDecimals } = useDecimals(handleAddress(fromToken), handleAddress(toToken));
+    return useTrade(fromToken, toToken, amount, fromTokenDecimals, toTokenDecimals);
+  };
+
+  const connector = useMemo(() => {
+    return {
+      getProvider: () => library,
+    };
+  }, [library]);
+
+  return (
+    <StyledPancakeTwap isDarkTheme={isDarkTheme ? 1 : 0}>
+      <TWAP
+        account={account}
+        srcToken="CAKE"
+        dstToken={config.wToken.address}
+        dappTokens={dappTokens}
+        isDarkTheme={isDarkTheme}
+        limit={limit}
+        ConnectButton={ConnectButton}
+        usePriceUSD={usePriceUSD}
+        connectedChainId={chainId}
+        useTrade={_useTrade}
+        useTokenModal={useTokenModal}
+        onDstTokenSelected={(it: any) => console.log(it)}
+        nativeToken={native}
+        connector={connector}
+        isMobile={isMobile}
+        useTooltip={useTooltip}
+        Button={DappButton}
+        ApproveModalContent={ApproveModalContent}
+        SwapTransactionErrorContent={SwapTransactionErrorContent}
+        SwapPendingModalContent={SwapPendingModalContent}
+        SwapTransactionReceiptModalContent={SwapPendingModalContent}
+        TradePrice={TradePrice}
+        TradePriceToggle={TradePriceToggle}
+      />
+    </StyledPancakeTwap>
+  );
+};
+
+const logo = "https://avatars.githubusercontent.com/u/170947423?s=200&v=4";
+const DappComponent = () => {
+  const { isDarkTheme } = useTheme();
+  const [selected, setSelected] = useState(SelectorOption.TWAP);
+  const isMobile = useIsMobile();
+
+  return (
+    <ContextWrapper>
+      <Tokens />
+      <StyledTradingPost isDarkTheme={isDarkTheme ? 1 : 0}>
+        {isMobile && (
+          <StyledPancakeOrders isDarkTheme={isDarkTheme ? 1 : 0}>
+            <Orders />
+          </StyledPancakeOrders>
+        )}
+        <StyledTradingPostLayout name={config.name}>
+          <UISelector selected={selected} select={setSelected} limit={true} />
+          <Wrapper>
+            <TWAPComponent limit={selected === SelectorOption.LIMIT} />
+          </Wrapper>
+        </StyledTradingPostLayout>
+        {!isMobile && (
+          <StyledPancakeOrders isDarkTheme={isDarkTheme ? 1 : 0}>
+            <Orders />
+          </StyledPancakeOrders>
+        )}
+      </StyledTradingPost>
+    </ContextWrapper>
+  );
+};
+
+const Tokens = () => {
+  const context = useContext(Context);
+
+  const selectToken = hooks.useSelectTokenCallback(parseToken);
+
+  const onSelect = useCallback(
+    (token: any) => {
+      selectToken({ isSrc: !!context.isFrom, token });
+      context.close();
+    },
+    [selectToken, context.isFrom, context.close]
+  );
+
+  return (
+    <Popup isOpen={!!context.showModal} onClose={context.close}>
+      <TokenSelectModal onCurrencySelect={onSelect} />;
+    </Popup>
+  );
+};
+const Wrapper = ({ children, className = "" }: { children: ReactNode; className?: string }) => {
+  const { isDarkTheme } = useTheme();
+
+  return (
+    <StyledWrapper className={className}>
+      <StyledPancakeBackdrop isDarkTheme={isDarkTheme ? 1 : 0} />
+      <div style={{ position: "relative", width: "100%" }}>{children}</div>
+    </StyledWrapper>
+  );
+};
+
+const StyledWrapper = styled(Box)({
+  position: "relative",
+  width: "100%",
+});
+
+const dapp: Dapp = {
+  Component: DappComponent,
+  logo,
+  config: tradingPostConfig,
+};
+
+export default dapp;
+
+const TradePriceToggle = ({ onClick }: { onClick: () => void }) => {
+  return <button onClick={onClick}>T</button>;
+};
+
+const TradePrice = (props: { leftSymbol?: string; rightSymbol?: string; price?: string }) => {
+  return (
+    <Typography>
+      1 {props.leftSymbol} = {props.price} {props.rightSymbol}
+    </Typography>
+  );
+};
+
+export const amountUi = (decimals?: number, amount?: BN) => {
+  if (!decimals || !amount) return "";
+  const percision = BN(10).pow(decimals || 0);
+  return amount.times(percision).idiv(percision).div(percision).toString();
+};
diff --git a/packages/dapp-example/src/config.ts b/packages/dapp-example/src/config.ts
index fa649fecb..f380b1ec7 100644
--- a/packages/dapp-example/src/config.ts
+++ b/packages/dapp-example/src/config.ts
@@ -12,6 +12,24 @@ import lynex from "./Lynex";
 import arbidex from "./Arbidex";
 import syncswap from "./SyncSwap";
 import kinetix from "./kinetix";
+import tradingpost from "./TradingPost";
 
-export const defaultDapp = quickswap;
-export const dapps = [quickswap, spookyswap, spiritswap, pangolin, pangolinDaas, chronos, thena, baseswap, arbidex, lynex, stellaswap, pancake, sushiswap, syncswap, kinetix];
+export const defaultDapp = tradingpost;
+export const dapps = [
+  quickswap,
+  spookyswap,
+  spiritswap,
+  pangolin,
+  pangolinDaas,
+  chronos,
+  thena,
+  baseswap,
+  arbidex,
+  lynex,
+  stellaswap,
+  pancake,
+  tradingpost,
+  sushiswap,
+  syncswap,
+  kinetix,
+];
diff --git a/packages/dapp-example/src/styles.ts b/packages/dapp-example/src/styles.ts
index ced6cb900..bcc40820b 100644
--- a/packages/dapp-example/src/styles.ts
+++ b/packages/dapp-example/src/styles.ts
@@ -134,6 +134,25 @@ export const StyledPancake = styled(StyledDapp)<{ isDarkTheme: number }>(({ isDa
   },
 }));
 
+export const StyledTradingPost = styled(StyledDapp)<{ isDarkTheme: number }>(({ isDarkTheme }) => ({
+  background: isDarkTheme ? "#131311" : "#F7E4D4",
+  ".ui-selector-btn": {
+    background: "#1fc7d4",
+    color: isDarkTheme ? "white" : "black",
+  },
+  ".ui-selector-btn-selected": {
+    background: "#7a6eaa",
+    color: "white",
+  },
+  ".menu-button": {
+    svg: {
+      "* ": {
+        color: isDarkTheme ? "#FBFBFB" : "#000315",
+      },
+    },
+  },
+}));
+
 export const StyledStella = styled(StyledDapp)<{ isDarkMode: number }>(({ isDarkMode }) => ({
   background: isDarkMode ? "#251842" : "#F4F5F6",
   ".ui-selector-btn": {
@@ -421,7 +440,7 @@ export const StyledThenaLayout = styled(DappLayout)({
 });
 
 export const StyledPancakeTwap = styled(Box)<{ isDarkTheme: number }>(({ isDarkTheme }) => ({
-  background: isDarkTheme ? "#27262C" : "#FFFFFF",
+  background: isDarkTheme ? "#27262C" : "#F7E4D4",
   padding: 16,
   borderRadius: 24,
   position: "relative",
@@ -458,6 +477,15 @@ export const StyledPancakeLayout = styled(DappLayout)({
   maxWidth: 326,
 });
 
+export const StyledTradingPostLayout = styled(DappLayout)({
+  width: "calc(100% - 30px)",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  position: "relative",
+  maxWidth: 540,
+});
+
 export const StyledSushiLayout = styled(DappLayout)({
   maxWidth: 490,
   width: "calc(100% - 30px)",
diff --git a/packages/lib/src/components/Labels.tsx b/packages/lib/src/components/Labels.tsx
index 1449d166f..345d997e5 100644
--- a/packages/lib/src/components/Labels.tsx
+++ b/packages/lib/src/components/Labels.tsx
@@ -118,3 +118,18 @@ export const OrdersLabel = ({ className = "" }: { className?: string }) => {
     </StyledRowFlex>
   );
 };
+
+export const PartDurationLabel = () => {
+  const translations = useTwapContext().translations;
+  return <Styles.StyledH1>{translations.partDuration}</Styles.StyledH1>;
+}
+
+export const TotalDuarationLabel = () => {
+  const translations = useTwapContext().translations;
+  return <Styles.StyledH1>{translations.totalDuration}</Styles.StyledH1>;
+}
+
+export const TradingPostLimitPriceLabel = () => {
+  const translations = useTwapContext().translations;
+  return <Styles.StyledH1>{translations.limitPrice}</Styles.StyledH1>;
+}
diff --git a/packages/lib/src/components/OrdersComponents.tsx b/packages/lib/src/components/OrdersComponents.tsx
index a3b6f5905..0ef69f80a 100644
--- a/packages/lib/src/components/OrdersComponents.tsx
+++ b/packages/lib/src/components/OrdersComponents.tsx
@@ -6,6 +6,7 @@ import { useOrdersHistoryQuery, useOrdersTabs } from "../hooks";
 import { useOrdersStore } from "../store";
 import { StyledOrdersLists, StyledOrdersTab, StyledOrdersTabs } from "../styles";
 import OrdersList from "../orders/OrdersList";
+import { Dex } from "../consts";
 
 function a11yProps(index: number) {
   return {
@@ -39,7 +40,26 @@ export const OrdersSelectTabs = ({ className = "" }: { className?: string }) =>
   );
 };
 
-export const SelectedOrders = ({ className = "" }: { className?: string }) => {
+/**
+ * The `SelectedOrders` component renders a list of `OrdersList` components based on the selected tab
+ * and the specified decentralized exchange (DEX).
+ *
+ * This component dynamically selects and renders the appropriate `OrdersList` based on the selected
+ * tab and the `dex` prop. If the `dex` is `TradingPost`, a specific `OrdersList` with customized
+ * props is rendered.
+ *
+ * @param {string} [className=""] - Optional additional class names for styling the component.
+ * @param {Dex} [dex] - The decentralized exchange (DEX) being used. This prop controls the behavior
+ *                      of the component. The available options for `dex` are:
+ *                      - `Dex.Uniswap` ("uniswap")
+ *                      - `Dex.Sushiswap` ("sushiswap")
+ *                      - `Dex.Quickswap` ("quickswap")
+ *                      - `Dex.TradingPost` ("tradingpost")
+ *
+ * @returns {JSX.Element} A list of `OrdersList` components rendered based on the selected tab value
+ *                        and the specified `dex`.
+ */
+export const SelectedOrders = ({ className = "", dex }: { className?: string, dex?: string }) => {
   const { orders, isLoading } = useOrdersHistoryQuery();
   const { tab } = useOrdersStore();
   const tabs = useOrdersTabs();
@@ -54,7 +74,9 @@ export const SelectedOrders = ({ className = "" }: { className?: string }) => {
         if (tabValue === "All") {
           return <OrdersList key={key} isLoading={isLoading} orders={_.flatMap(orders)} />;
         }
-
+        if (dex === Dex.TradingPost) {
+          return <OrdersList key={key} isLoading={isLoading} status={key as any as Status} orders={orders[key as any as Status] as ParsedOrder[]} dex={Dex.TradingPost}/>;
+        }
         return <OrdersList key={key} isLoading={isLoading} status={key as any as Status} orders={orders[key as any as Status] as ParsedOrder[]} />;
       })}
     </StyledOrdersLists>
diff --git a/packages/lib/src/consts.ts b/packages/lib/src/consts.ts
index 5887134aa..4d4aeeec9 100644
--- a/packages/lib/src/consts.ts
+++ b/packages/lib/src/consts.ts
@@ -17,3 +17,10 @@ export const QUERY_PARAMS = {
 };
 
 export const SUGGEST_CHUNK_VALUE = 100;
+
+export enum Dex {
+  Uniswap = "uniswap",
+  Sushiswap = "sushiswap",
+  Quickswap = "quickswap",
+  TradingPost = "tradingpost",
+}
diff --git a/packages/lib/src/hooks.ts b/packages/lib/src/hooks.ts
index a45501712..bf6d1e93f 100644
--- a/packages/lib/src/hooks.ts
+++ b/packages/lib/src/hooks.ts
@@ -1367,8 +1367,8 @@ export const useLimitPriceV2 = () => {
       original: BN(original || "0").isZero() ? "" : original,
     };
   }, [marketPrice, enableQueryParams, limitPriceStore.inverted, limitPriceStore.limitPrice, limitPriceStore.isCustom, limitPriceStore.priceFromQueryParams]);
-  console.log({limitPrice});
-  
+  console.log({ limitPrice });
+
   const onInvert = useCallback(() => {
     limitPriceStore.toggleInverted();
   }, [limitPriceStore.toggleInverted, limitPrice]);
diff --git a/packages/lib/src/i18n/en.json b/packages/lib/src/i18n/en.json
index 2d2952494..41df6ea4c 100644
--- a/packages/lib/src/i18n/en.json
+++ b/packages/lib/src/i18n/en.json
@@ -47,6 +47,8 @@
   "tradeSizeMustBeEqual": "Trade size must be equal to at least 10 USD",
   "tradeSize": "Trade size",
   "tradeInterval": "Trade interval",
+  "partDuration": "Part Duration",
+  "totalDuration": "Total Duration",
   "maxDuration": "Max duration",
   "totalTrades": "Total trades",
   "deadline": "Deadline",
@@ -68,11 +70,13 @@
   "Expired": "Expired",
   "Canceled": "Canceled",
   "noOrdersFound": "You currently don't have",
+  "noOrdersFound_Swap": "Currently, there are no",
   "noOrdersFound_Open": "open",
   "noOrdersFound_Completed": "completed",
   "noOrdersFound_Expired": "expired",
   "noOrdersFound_Canceled": "canceled",
   "noOrdersFound1": "orders",
+  "noOrdersFound2": "create a new one !",
   "confirmTx": "Confirm Transaction",
   "expiration": "Expiration",
   "orderType": "Order type",
diff --git a/packages/lib/src/orders/OrdersList.tsx b/packages/lib/src/orders/OrdersList.tsx
index 85ddb416c..640d6d88a 100644
--- a/packages/lib/src/orders/OrdersList.tsx
+++ b/packages/lib/src/orders/OrdersList.tsx
@@ -1,4 +1,4 @@
-import { Box, styled } from "@mui/material";
+import { Box, styled, Typography, Button } from "@mui/material";
 import { useState } from "react";
 import Order, { OrderLoader } from "./Order/Order";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -9,8 +9,11 @@ import { usePagination } from "../hooks";
 import { StyledColumnFlex } from "../styles";
 import { Pagination } from "../components/base";
 import { useTwapStore } from "../store";
+import Bear from "./assets/components/Bear";
+import ArrowOutward from "./assets/components/ArrowOutward";
+import { Dex } from "../consts";
 
-function OrdersList({ orders, status, isLoading }: { orders?: ParsedOrder[]; status?: string; isLoading: boolean }) {
+function OrdersList({ orders, status, isLoading, dex }: { orders?: ParsedOrder[]; status?: string; isLoading: boolean, dex?: Dex }) {
   const { uiPreferences } = useTwapContext();
 
   const showPagination = uiPreferences.orders?.paginationChunks && _.size(orders) > uiPreferences.orders?.paginationChunks;
@@ -25,7 +28,13 @@ function OrdersList({ orders, status, isLoading }: { orders?: ParsedOrder[]; sta
   if (showPagination) {
     return <PaginationList orders={orders} status={status} />;
   }
-  return <List orders={orders} status={status} />;
+
+  switch (dex) {
+    case Dex.TradingPost:
+      return <List orders={orders} status={status}  useCustomComponent={true} CustomComponent={TradingPostListComponent}/>;
+    default:
+      return <List orders={orders} status={status} />;
+  }
 }
 
 const PaginationList = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) => {
@@ -41,7 +50,7 @@ const PaginationList = ({ orders, status }: { orders?: ParsedOrder[]; status?: s
   );
 };
 
-const List = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) => {
+const List = ({ orders, status, useCustomComponent, CustomComponent }: { orders?: ParsedOrder[]; status?: string; useCustomComponent?: boolean; CustomComponent?: (props: { status?: string }) => React.ReactElement; }) => {
   const [selected, setSelected] = useState<number | undefined>(undefined);
   const { translations } = useTwapContext();
   const waitingForOrdersUpdate = useTwapStore((s) => s.waitingForOrdersUpdate);
@@ -53,6 +62,12 @@ const List = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) =
   if (!_.size(orders)) {
     return waitingForOrdersUpdate ? (
       <OrderLoader status={status} />
+    ) : useCustomComponent ? (
+       <StyledContainer className="twap-orders-list">
+        <StyledEmptyList className="twap-orders-empty-list">
+        {CustomComponent && <CustomComponent status={status} />}
+        </StyledEmptyList>
+      </StyledContainer>
     ) : (
       <StyledContainer className="twap-orders-list">
         <StyledEmptyList className="twap-orders-empty-list">
@@ -72,6 +87,21 @@ const List = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) =
   );
 };
 
+const TradingPostListComponent = ({status}: {status?: string}) => {
+  const { translations } = useTwapContext();
+  return (
+    <>
+    <Bear />
+    <StyledEmtpyListTitle>No Open Orders</StyledEmtpyListTitle>
+    {!status ? "You currently don't have orders" : `${translations.noOrdersFound_Swap} ${(translations as any)["noOrdersFound_" + status]} ${translations.noOrdersFound1}`}
+    <StyledEmptyListButton>
+      Learn More
+      <ArrowOutward />
+    </StyledEmptyListButton>
+    </>
+  );
+}
+
 export default OrdersList;
 
 const StyledEmptyList = styled(Box)({
@@ -96,3 +126,23 @@ const StyledLoader = styled(StyledContainer)({
     color: "white",
   },
 });
+
+const StyledEmtpyListTitle = styled(Typography)({
+  fontSize: 18,
+  fontWeight: 700,
+  fontFamily: "Slackey",
+});
+
+const StyledEmptyListButton = styled(Button)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 5,
+  marginTop: 20,
+  width: 200,
+  height: 40,
+  borderRadius: 16,
+  backgroundColor: "transparent",
+  color: theme.palette.mode === "dark" ? "#FBF4EF" : "#453936",
+  border: `1px solid ${theme.palette.mode === "dark" ? "#353531" : "#D5BAA5"}`,
+  fontFamily: "Slackey",
+}));
diff --git a/packages/lib/src/orders/assets/components/ArrowOutward.tsx b/packages/lib/src/orders/assets/components/ArrowOutward.tsx
new file mode 100644
index 000000000..ba93bb2d4
--- /dev/null
+++ b/packages/lib/src/orders/assets/components/ArrowOutward.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+const SvgArrowOutward = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#453936"
+      fillRule="evenodd"
+      d="M13 5a1 1 0 1 0 0 2h2.586l-6.293 6.293a1 1 0 1 0 1.414 1.414L17 8.414V11a1 1 0 1 0 2 0V5h-6m-3 2a5 5 0 0 0-5 5v2a5 5 0 0 0 5 5h2a5 5 0 0 0 5-5 1 1 0 1 0-2 0 3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3 1 1 0 1 0 0-2"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgArrowOutward;
diff --git a/packages/lib/src/orders/assets/components/Bear.tsx b/packages/lib/src/orders/assets/components/Bear.tsx
new file mode 100644
index 000000000..f9ce484e4
--- /dev/null
+++ b/packages/lib/src/orders/assets/components/Bear.tsx
@@ -0,0 +1,179 @@
+import type { SVGProps } from "react";
+const SvgBear = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={92} height={168} fill="none" {...props}>
+    <path
+      fill="#E7E1E1"
+      d="M43.797 167.467c23.602 0 42.736-3.347 42.736-7.477 0-4.129-19.134-7.477-42.736-7.477s-42.735 3.348-42.735 7.477 19.133 7.477 42.735 7.477"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#3B3B3B"
+      d="M71.44 56.12S55.71 24.11 52.98 22.287c-2.728-1.824-13.456-.638-19.731.82-6.273 1.458-8.365 1.55-11.002 8.115-2.636 6.566-4.314 19.053-6.132 33.462-1.819 14.409-6.962 36.028-7.326 48.613s1.94 25.101 4.638 30.094c2.364 4.377 3.546 5.837 1.728 8.937-1.819 3.1-5.456 5.199-4.274 7.752s7.002 3.922 13.55 1.551c6.546-2.371 7.364-6.384 7.91-8.481.545-2.098 1.909-5.837 2.91-5.837 1 0 4.454 1.276 9.092 1.186s7.365-.639 7.365-.639-1.547 7.205 1.091 9.301c2.636 2.097 8.638 2.372 16.095 1.459 7.455-.913 8.456-2.371 6.547-4.195-1.91-1.824-7.82-1.733-8.092-4.561s-.272-3.191 1.637-5.199c1.91-2.005 11.276-14.318 13.004-26.812s1-27.997-2.546-38.94-8.001-22.799-8.001-22.799z"
+    />
+    <path
+      fill="#E7E1E1"
+      d="M15.155 152.329c-.09.151-.183.295-.28.442 1.876-1.702 4.201-3.208 4.886-5.585.847-2.941-1.143-5.842-2.333-8.661-1.905-4.512-2.364-9.358-2.364-15.924 0-13.899 1.419-23.211 4.91-36.66.686-2.645 3.875-8.322 3.894-11.053.022-3.206-.951-6.323-1.576-9.468-.8-4.019-1.03-8.134-.83-12.223.358-7.214 2.034-14.3 4.156-21.178.56-1.818 2.401-5.202 2.821-7.703-2.829.942-4.382 2.397-6.195 6.908-2.637 6.566-4.314 19.052-6.133 33.461s-6.961 36.028-7.326 48.613 1.94 25.101 4.638 30.094c2.364 4.377 3.546 5.837 1.728 8.937zM75.44 154.426a3 3 0 0 0-.292-.239c-1.815.408-3.633.799-5.459 1.143-3.191.603-6.658 1.141-9.868.365-2.538-.612-4.34-2.163-4.989-4.707-.655-.998-1.028-2.143-.967-3.419.009-.195.024-.399.031-.605-.274-.574-.668-1.065-1.27-1.39-.408-.217-.86-.343-1.33-.419q-1.647.017-3.296.037-.248.021-.488.037c-1.536.098-3.07.059-4.605.019l-5.031.055c-1.42.113-2.87.356-4.128 1.011-1.404.731-2.112 1.973-2.763 3.357-1.277 2.707-2.108 5.724-4.074 8.048-1.708 2.019-4.072 2.926-6.649 3.138-3.156.258-7.805-.483-9.083-3.448-.522.876-.729 1.741-.3 2.667 1.182 2.553 7.002 3.922 13.55 1.551 6.546-2.371 7.364-6.384 7.91-8.481.545-2.097 1.909-5.837 2.91-5.837 1 0 4.454 1.276 9.092 1.185s7.365-.638 7.365-.638-1.547 7.205 1.091 9.301c2.636 2.097 8.638 2.371 16.095 1.458 7.455-.912 8.456-2.371 6.547-4.194z"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#767676"
+      d="M45.342 28.215c-1.286-2.865-2.007-5.123-2.405-6.63a77 77 0 0 0-6.371.854c.773 2.484 2.096 7.653 1.274 11.865-1.228 6.292-5.25 12.995-1.977 18.741s11.251 5.677 16.572 2.668c5.318-3.01 5.455-9.438 2.046-14.362-4.189-6.047-6.684-7.661-9.139-13.133z"
+    />
+    <path
+      fill="#E7CDC2"
+      d="M21.65 82.813c.037 1.153.124 2.293.294 3.413a16.4 16.4 0 0 1 .115-3.608 4 4 0 0 0-.41.195"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#DFD8D7"
+      d="M5.78 108.105c1.623 2.243 3.849 7.806 6.137 9.34 4.827 3.24 7.868 5.433 13.827 4.735 2.841-.332 5.783-1.527 6.957-4.354 1.91-4.6-1.494-9.632-4.014-13.142-3.075-4.286-6.329-10.149-5.106-15.669.498-2.249.592-3.818 1.33-5.998.331-.98.672-1.958.984-2.943.097-.306.435-2.27.665-2.38-1.103.525-7.128 6.607-7.966 7.533-4.159 4.595-8.677 9.34-14.38 11.512-1.167 3.611-.738 3.178-1.608 6.271.652 1.546 2.174 3.711 3.175 5.095z"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#2B2827"
+      d="M46.071 39.523s-8.419 1.512-8.275 3.1c.182 2.006 6.457 5.654 9.002 4.834s5.274-5.199 5.637-6.839c.364-1.642-4.364-1.458-6.366-1.095zM35.103 37.604c-.265-1.007-.97-1.983-1.97-2.027-.402-.017-.789.204-1.046.512-.257.31-.4.7-.494 1.09-.181.763-.185 1.594.15 2.303.292.618.857 1.104 1.536 1.23 1 .186 1.69-.88 1.886-1.75.09-.395.063-.88-.062-1.358M55.016 34.276c-.265-1.008-.97-1.984-1.97-2.028-.402-.017-.789.204-1.046.512-.257.31-.4.7-.494 1.09-.181.764-.185 1.595.15 2.303.292.618.857 1.104 1.535 1.23 1.001.186 1.691-.879 1.887-1.749.09-.395.063-.881-.062-1.358"
+    />
+    <path
+      fill="#fff"
+      d="M33.353 37.963c-.202-.266-.422-.418-.764-.368a.77.77 0 0 0-.638.962.78.78 0 0 0 .943.538c.435-.12.766-.728.459-1.13zM52.451 34.372c-1.008 0-1.008 1.57 0 1.57s1.008-1.57 0-1.57"
+    />
+    <path
+      fill="#3A3736"
+      d="M43.557 41.4c-.217.109-.444.242-.54.467-.158.369.118.78.434 1.027 1.112.869 2.698.73 4.057.357 1.197-.329 3.848-1.553 1.582-2.637-1.572-.751-4.085.058-5.531.787z"
+    />
+    <path
+      fill="#FFE2C7"
+      d="M48.755 52.386c-.474-.172-1.715-.496-2.205-.61-2.454-.577-5.317-.16-7.595.647l.682-.644a10.33 10.33 0 0 1 10.155-2.363c1.293.483 1.47 1.649 1.127 2.333-.305.606-1.257.972-2.166.64z"
+    />
+    <path
+      fill="#767676"
+      d="M64.276 138.713c7.19-10.301 7.019-27.984 5.82-41.204s-5.992-26.353-18.658-27.814c-13.712-1.579-21.057 16.825-22.94 36.742-1.73 18.302 3.116 35.581 6.038 41.06a.56.56 0 0 1 .297-.112c.941 0 4.193 1.203 8.56 1.116 4.365-.086 6.933-.602 6.933-.602s.401-.345.385-.258c4.643-1.365 9.884-3.653 13.565-8.928"
+    />
+    <path
+      fill="#3B3B3B"
+      d="M28.178 105.925c-3.146-4.304-6.206-9.03-6.537-14.357-.224-3.609.841-7.184 2.306-10.486 1.277-2.878 6.292-4.346 5.611-7.42-2.366-10.683-13.082-10.589-13.082-10.589-4.936 6.108-9.927 12.303-13.163 19.465C.078 89.7-.89 93.68 1.733 101.09c1.358 3.839 3.706 7.247 6.275 10.401 1.182 1.451 2.43 2.87 3.924 3.995.992.746 2.081 1.354 3.178 1.933 2.855 1.505 5.939 2.867 9.161 2.75 3.223-.117 6.586-2.128 7.276-5.288.703-3.219-1.424-6.297-3.369-8.954z"
+    />
+    <path
+      fill="#E7E1E1"
+      d="M24.74 116.419c-4.95-.482-9.59-4.073-12.841-7.633-3.4-3.724-5.815-8.334-6.777-13.301-1.126-5.819.017-11.76 2.09-17.239 1.16-3.064 2.607-6.182 4.58-8.81 1.592-2.125 3.35-4.105 4.713-6.363h-.03C11.54 69.181 6.55 75.376 3.313 82.538.078 89.7-.89 93.68 1.733 101.09c1.358 3.839 3.706 7.247 6.275 10.401 1.182 1.451 2.43 2.87 3.924 3.995.992.746 2.081 1.354 3.178 1.933 2.855 1.505 5.939 2.867 9.161 2.75 3.223-.117 6.586-2.128 7.276-5.288.015-.067.02-.135.033-.202-1.894 1.347-4.299 1.99-6.839 1.742z"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#DFD8D7"
+      d="M87.774 103.186c-1.324 2.386-2.865 8.127-4.91 9.874-4.312 3.689-7.013 6.164-12.853 6.056-2.786-.052-5.762-.95-7.21-3.644-2.352-4.38.388-9.709 2.437-13.442 2.503-4.557 5.004-10.696 3.214-16.058-.73-2.186-.994-3.733-1.947-5.826-.429-.94-.865-1.878-1.276-2.826-.128-.293-.67-2.213-.905-2.298 1.125.413 7.622 5.862 8.534 6.7 4.529 4.157 9.422 8.424 15.177 10.024 1.526 3.471 1.064 3.084 2.246 6.07-.459 1.598-1.693 3.899-2.51 5.37z"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#3B3B3B"
+      d="M65.867 103.212c2.57-4.58 5.01-9.574 4.744-14.895-.182-3.605-1.606-7.05-3.388-10.188-1.552-2.73-6.563-3.7-6.243-6.818 1.112-10.84 11.49-11.795 11.49-11.795 5.448 5.583 10.957 11.246 14.875 18.04s5.293 10.652 3.572 18.266c-.891 3.945-2.786 7.559-4.924 10.941-.984 1.557-2.033 3.088-3.356 4.351-.877.839-1.863 1.547-2.862 2.23-2.595 1.774-5.428 3.429-8.56 3.627-3.13.199-6.606-1.469-7.62-4.538-1.034-3.128.687-6.391 2.272-9.221"
+    />
+    <path
+      fill="#E7E1E1"
+      d="M70.35 113.294c4.734-.963 8.828-4.981 11.58-8.835 2.879-4.03 4.706-8.845 5.09-13.87.449-5.89-1.31-11.677-3.92-16.913-1.46-2.93-3.203-5.883-5.4-8.3-1.775-1.954-3.693-3.747-5.26-5.856l.03-.004c5.448 5.583 10.957 11.246 14.875 18.04s5.293 10.652 3.572 18.266c-.891 3.945-2.786 7.559-4.924 10.941-.984 1.557-2.033 3.088-3.356 4.351-.877.839-1.863 1.547-2.862 2.23-2.595 1.774-5.428 3.429-8.56 3.627-3.13.199-6.606-1.469-7.62-4.538-.022-.065-.035-.131-.055-.198 1.981 1.152 4.379 1.555 6.808 1.061z"
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="gray"
+      d="m70.287 11.058-.126.087.044-.033c-1.026-1.492-2.629-2.53-4.353-3.034-1.733-.512-3.581-.532-5.352-.228-1.772.325-3.47.96-5.067 1.772-1.56.794-3.02 1.764-4.4 2.833-.12-.278-.234-.56-.358-.839-.926-1.998-1.925-3.968-3.124-5.824a46 46 0 0 0-1.92-2.69 13 13 0 0 0-1.086-1.252c-.394-.377-.857-.765-1.438-.83l-.009.063.013-.128c-.52-.065-1.003.167-1.4.418-.406.258-.77.556-1.13.857l-2.1 1.837c-.71.597-1.418 1.195-2.187 1.68-.77.49-1.595.886-2.462 1.136-1.732.551-3.604.422-5.375-.048-.891-.228-1.768-.525-2.654-.812q-.666-.211-1.343-.4c-.239-.057-.426-.13-.707-.165-.268-.033-.56.104-.733.266l.08.1-.043-.048c-.423.397-.612.94-.78 1.46-.161.527-.268 1.067-.36 1.609a33 33 0 0 0-.332 3.269c-.126 2.185-.13 4.375-.093 6.56.02.722.054 1.444.084 2.164-3.717-1.396-7.942-1.566-11.71-.186-1.891.714-3.66 1.805-5.042 3.293-1.376 1.47-2.358 3.413-2.36 5.463h.063-.159c-.043 1.84.749 3.636 1.933 5.007.427.495.895.96 1.4 1.38.516.448 1.075.849 1.675 1.184.512.36 1.04.7 1.594.991a11.5 11.5 0 0 0 4.501 1.306c1.572.12 3.149-.085 4.671-.449 1.525-.363 3.006-.877 4.466-1.427 2.917-1.11 5.776-2.354 8.706-3.398 2.925-1.054 5.916-1.926 8.965-2.507 3.052-.598 6.132-1.043 9.22-1.453 3.084-.425 6.19-.781 9.233-1.525 1.517-.379 3.017-.868 4.423-1.577a13.7 13.7 0 0 0 3.785-2.781c1.038-1.086 1.878-2.323 2.579-3.635a9.8 9.8 0 0 0 1.354-2.277c.274-.625.475-1.28.59-1.959.315-1.81-.105-3.744-1.178-5.23z"
+      opacity={0.7}
+      style={{
+        mixBlendMode: "multiply",
+      }}
+    />
+    <path
+      fill="#383328"
+      d="M36.84 4.603C39.9 2.11 41.106.426 42.388.613c.212 6.268-5.095 11.647-8.295 12.196-3.197.544-9.06-.04-11.75-7.46v-.006a.81.81 0 0 1 .796-.195c4.077 1.104 8.33 3.832 13.7-.545M36.74 24.799c-3.904.92-8.305 4.078-12.783 6.983-1.715.015-2.324-.508-2.324-.508s-.21-2.241-.416-5.42c3.717.524 9.6-.04 15.423-1.454zM36.64 24.4c6.178-1.492 12.298-3.94 15.696-7.05h.008a122 122 0 0 1 2.14 6.174s-.812.58-2.266 1.143c-5.748-.01-11.457-.61-14.9.009-.19.032-.383.078-.577.122l-.1-.398z"
+    />
+    <path
+      fill="#453F32"
+      d="M50.21 12.102a116 116 0 0 1 2.132 5.247h-.007c-3.397 3.114-9.516 5.56-15.697 7.053-5.824 1.413-11.706 1.976-15.423 1.454-.107-1.612-.209-3.47-.285-5.391-.244-6.485-.144-13.743 1.412-15.114 2.688 7.42 8.552 8.002 11.749 7.46 3.2-.55 8.508-5.928 8.295-12.195.965.135 1.975 1.328 3.859 4.046 1.411 2.038 2.77 4.733 3.964 7.442z"
+    />
+    <path
+      fill="#453F32"
+      d="M4.783 34.902c-8.789-7.73 3.19-19.296 16.149-14.439.075 1.922.175 3.781.285 5.392.205 3.18.416 5.42.416 5.42s.608.523 2.323.508c-6.55 4.258-13.268 7.976-18.85 3.391-.106-.087-.215-.18-.32-.267v-.005zM50.21 12.102C62.16 2.86 71.44 8.56 70.554 15.448c0 .005-.005.007-.004.012A29 29 0 0 1 69.12 19.1l-.006.007q-.137.202-.287.405c-3.281 4.386-9.97 5.165-16.614 5.154 1.454-.56 2.266-1.143 2.266-1.143s-.825-2.677-2.14-6.176a116 116 0 0 0-2.133-5.247z"
+    />
+    <path
+      fill="#594E38"
+      d="M39.677 30.786c-16.736 3.176-24.733 13.394-34.891 4.12l.32.268c5.583 4.584 12.3.866 18.85-3.392 4.48-2.905 8.88-6.063 12.784-6.984.192-.046.386-.09.577-.122 3.44-.621 9.152-.02 14.9-.01 6.644.012 13.332-.77 16.614-5.154q.149-.203.287-.404c-5.066 10.563-14.121 8.772-29.44 11.68z"
+    />
+    <path
+      fill="#574F3F"
+      d="M69.334 10.71c-1.393-1.186-2.94-1.836-4.53-2.136-.802-.128-1.604-.22-2.417-.184a13 13 0 0 0-2.434.247c-.816.12-1.62.337-2.425.579-.814.218-1.602.538-2.413.83-1.605.628-3.193 1.381-4.878 2.11l-.078-.102c1.412-1.1 2.908-2.096 4.507-2.91 1.596-.812 3.295-1.448 5.067-1.773 1.77-.302 3.618-.284 5.352.229 1.724.502 3.326 1.541 4.353 3.033zM19.47 21.993c-1.75-.237-3.422-.354-5.063-.252-.818.07-1.626.145-2.415.325-.79.155-1.566.365-2.31.658-.755.262-1.476.609-2.16 1.01-.7.383-1.33.868-1.932 1.385-1.177 1.064-2.142 2.398-2.555 4.112h-.11c0-1.768.848-3.442 2.034-4.707 1.191-1.282 2.714-2.223 4.344-2.837 3.287-1.204 6.978-1.04 10.208.202l-.037.104z"
+    />
+    <path
+      fill="#594E38"
+      d="M42.338.542c.58.064 1.043.452 1.437.829.396.39.748.818 1.086 1.252a46 46 0 0 1 1.92 2.69c1.197 1.856 2.198 3.826 3.125 5.824 1.798 4.025 3.306 8.17 4.627 12.37l-.123.037c-1.09-1.957-2.036-3.942-2.954-5.931l-2.712-5.943a80 80 0 0 0-1.365-2.937c-.446-.982-.955-1.924-1.443-2.872a141 141 0 0 0-1.608-2.822 15 15 0 0 0-.856-1.355c-.315-.415-.637-.836-1.147-1.015l.018-.127z"
+    />
+    <path
+      fill="#574F3F"
+      d="M22.253 5.243c.17-.162.464-.299.732-.266.282.036.468.108.707.166.451.124.9.261 1.343.399.886.287 1.763.584 2.655.812 1.77.472 3.644.601 5.374.049a9.6 9.6 0 0 0 2.462-1.136c.772-.484 1.476-1.082 2.187-1.68l2.1-1.836c.36-.299.725-.6 1.13-.857.398-.25.88-.483 1.4-.418l-.026.256a1.4 1.4 0 0 0-.514.4 3.5 3.5 0 0 0-.372.506c-.23.369-.475.746-.708 1.158a21 21 0 0 1-1.675 2.35c-.31.373-.642.75-.986 1.099-.37.384-.786.733-1.224 1.069a9.9 9.9 0 0 1-3.041 1.554c-.567.164-1.151.279-1.738.342a10 10 0 0 1-1.748-.006 10.3 10.3 0 0 1-3.147-.853 15.3 15.3 0 0 1-2.57-1.485c-.388-.296-.776-.56-1.155-.862l-.283-.225-.15-.113-.074-.084c-.102-.12-.252-.19-.518-.133l-.16-.202z"
+    />
+    <path
+      fill="#594E38"
+      d="M21.558 31.283c-.407-4.353-.703-8.716-.831-13.09-.037-2.187-.034-4.375.092-6.56.065-1.093.16-2.186.333-3.27.09-.541.198-1.08.36-1.608.168-.52.356-1.063.78-1.46l.085.096c-.155.214-.24.464-.303.717-.069.25-.113.51-.145.771a15 15 0 0 0-.109 1.589c-.04 1.065-.01 2.14.004 3.217l.183 6.477.052 3.254c-.013 1.087.024 2.175-.013 3.266-.028 2.182-.107 4.37-.36 6.586l-.128.011z"
+    />
+    <path
+      fill="#383328"
+      d="M4.556 34.57c1.247.941 2.566 1.76 3.95 2.337 1.385.571 2.828.89 4.273.872 1.441.01 2.88-.264 4.294-.696a41 41 0 0 0 4.23-1.58c2.803-1.238 5.67-2.526 8.629-3.687 2.97-1.13 6.058-2.054 9.216-2.689 3.12-.57 6.245-1.007 9.348-1.358 3.102-.328 6.175-.644 9.107-1.2 2.917-.59 5.685-1.592 7.838-3.594 2.198-1.956 3.72-4.711 5.014-7.55l.183.06c-.953 2.965-2.278 5.907-4.466 8.197a13.7 13.7 0 0 1-3.785 2.781c-1.404.709-2.904 1.198-4.423 1.577-3.043.744-6.15 1.102-9.233 1.525-3.088.412-6.168.857-9.22 1.453-3.051.58-6.04 1.453-8.965 2.506-2.93 1.045-5.789 2.288-8.706 3.4-1.46.55-2.942 1.063-4.466 1.426-1.522.364-3.098.568-4.67.45a11.5 11.5 0 0 1-4.502-1.307c-1.393-.731-2.643-1.705-3.777-2.78l.13-.14z"
+    />
+    <path
+      fill="#594E38"
+      d="M22.332 5.345c1.116 2.334 2.679 4.453 4.814 5.683 2.103 1.234 4.697 1.577 7.035 1.108 1.07-.256 2.14-.961 3.07-1.744.95-.787 1.775-1.731 2.51-2.739 1.446-2.033 2.438-4.438 2.62-7.037.364 2.594-.395 5.321-1.786 7.588a14.2 14.2 0 0 1-2.547 3.104c-1.018.89-2.139 1.698-3.586 2.08a11.1 11.1 0 0 1-4.088.026c-1.337-.258-2.645-.759-3.761-1.544-2.273-1.547-3.665-4.02-4.279-6.527z"
+    />
+    <path
+      fill="#786E57"
+      d="M1.785 28.847c-.031 1.794.744 3.523 1.91 4.86 1.167 1.335 2.632 2.452 4.32 3.018 1.686.58 3.527.56 5.258.183 1.741-.374 3.397-1.066 4.988-1.864 3.18-1.616 6.116-3.663 9.11-5.6 1.5-.97 3.009-1.926 4.583-2.773 1.573-.84 3.215-1.598 4.97-1.982 1.762-.356 3.562-.35 5.342-.334 1.783.028 3.565.113 5.346.182 3.56.133 7.135.234 10.678-.167 1.767-.204 3.528-.538 5.204-1.136 1.672-.59 3.267-1.477 4.517-2.747 1.236-1.27 2.163-2.884 2.478-4.639.321-1.751-.065-3.625-1.094-5.082l.054-.037c1.075 1.444 1.524 3.345 1.237 5.154-.28 1.817-1.184 3.49-2.434 4.84-1.273 1.342-2.912 2.278-4.616 2.908-1.71.637-3.498 1.002-5.289 1.236-3.587.473-7.19.362-10.755.254-1.784-.057-3.563-.133-5.334-.152-1.763-.01-3.544.004-5.198.349-1.66.354-3.265 1.078-4.814 1.896-1.552.826-3.058 1.765-4.554 2.724-3 1.907-5.946 3.976-9.204 5.555-1.624.786-3.324 1.47-5.122 1.83-1.787.36-3.707.36-5.454-.275-1.744-.637-3.211-1.82-4.366-3.21-1.154-1.392-1.898-3.182-1.818-4.99h.065z"
+    />
+    <path stroke="#352B28" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M51.21 51.252s-5.721-3.547-12.068.836" />
+    <path fill="#C79154" d="m62.802 64.973 2.473 4.295h4.947l-2.473 4.297 2.473 4.296h-4.947l-2.473 4.295-2.474-4.295h-4.945l2.474-4.296-2.474-4.297h4.945z" />
+    <path fill="#E8BB88" d="M60.471 77.615h-4.666l2.333-4.05-2.333-4.052h4.666l2.33-4.052 2.334 4.052H69.8l-2.332 4.052 2.332 4.05h-4.665l-2.333 4.053z" />
+    <path
+      fill="#635F57"
+      d="m62.802 81.668 2.333-4.053h-2.333zM62.802 65.46l-2.331 4.053h2.33zM69.8 77.616l-2.333-4.05-1.165 2.023zM55.805 69.513l2.333 4.052 1.166-2.026zM69.8 69.513h-4.665l1.167 2.026zM55.805 77.615h4.666l-1.167-2.026z"
+      style={{
+        mixBlendMode: "screen",
+      }}
+    />
+    <path
+      fill="#C79154"
+      d="M71.044 77.86a.823.823 0 1 1-1.647.002.823.823 0 0 1 1.646-.002M71.044 69.268a.823.823 0 1 1-1.646.002.823.823 0 0 1 1.645-.002M63.625 64.973a.824.824 0 1 1-1.647 0 .824.824 0 0 1 1.647 0M56.205 69.268a.823.823 0 1 1-1.646.002.823.823 0 0 1 1.646-.002M56.205 77.86a.823.823 0 1 1-1.646.002.823.823 0 0 1 1.646-.002M63.625 82.156a.822.822 0 1 1-1.645 0 .822.822 0 1 1 1.645 0"
+    />
+    <path
+      fill="#523A2E"
+      d="M62.802 64.272a.7.7 0 0 0-.7.7h.7zM55.384 68.569a.7.7 0 0 0-.7.7h.7zM55.384 77.161a.7.7 0 0 0-.7.7h.7zM62.802 81.456a.7.7 0 0 0-.7.7h.7z"
+      style={{
+        mixBlendMode: "screen",
+      }}
+    />
+    <path fill="#C79154" d="M62.802 78.525a4.95 4.95 0 0 0 4.945-4.96c0-2.739-2.214-4.959-4.945-4.959a4.95 4.95 0 0 0-4.945 4.96 4.95 4.95 0 0 0 4.945 4.959" />
+    <path fill="#E8BB88" d="M62.855 78.135a4.565 4.565 0 0 0 4.519-4.611 4.565 4.565 0 0 0-4.598-4.532 4.566 4.566 0 0 0-4.519 4.612 4.565 4.565 0 0 0 4.598 4.531" />
+    <path fill="#473228" d="M62.802 77.57a4 4 0 0 0 3.992-4.005 4 4 0 0 0-3.992-4.004 4 4 0 0 0-3.993 4.004 4 4 0 0 0 3.993 4.004" />
+    <path
+      fill="#E8BB88"
+      d="M60.5 73.934q0 .11-.03.199a.5.5 0 0 1-.082.152.38.38 0 0 1-.3.134.653.653 0 0 1-.207-.033.6.6 0 0 1-.183-.088l.06-.264.082.036a.6.6 0 0 0 .237.054.16.16 0 0 0 .122-.049q.044-.048.043-.135a.2.2 0 0 0-.015-.08.3.3 0 0 0-.043-.065.4.4 0 0 0-.065-.054 1 1 0 0 0-.085-.046 1 1 0 0 1-.14-.085.475.475 0 0 1-.174-.243.6.6 0 0 1-.024-.173q0-.11.03-.198a.5.5 0 0 1 .08-.154.382.382 0 0 1 .3-.133q.053-.001.104.01a.6.6 0 0 1 .1.03.5.5 0 0 1 .155.083l-.048.264-.08-.04q-.038-.017-.071-.029a1 1 0 0 0-.073-.02.3.3 0 0 0-.074-.008q-.085 0-.125.052a.2.2 0 0 0-.041.132.23.23 0 0 0 .1.19.5.5 0 0 0 .083.047q.096.045.165.095a.45.45 0 0 1 .174.247q.02.075.02.169zM60.637 72.736h.252v.698h.466v-.698h.252v1.657h-.252V73.7h-.466v.692h-.252zM61.809 74.393v-1.657h.74v.267h-.489v.421h.433v.267h-.433v.433h.488v.267h-.74zM62.68 72.736h.414q.108 0 .193.037a.39.39 0 0 1 .225.265.69.69 0 0 1-.077.566 1 1 0 0 1-.069.084l.24.707h-.266l-.21-.626h-.197v.626h-.253v-1.659m.253.265v.5h.283q.014-.021.024-.043.013-.025.023-.054a.609.609 0 0 0 .02-.156q0-.13-.048-.19-.048-.057-.148-.057zM63.695 74.393v-.208h.145v-1.243h-.145v-.208h.542v.208h-.146v1.243h.146v.208zM64.653 73.693v.7H64.4v-1.657h.705v.267h-.452v.421h.396v.267h-.396zM65.456 73.693v.7h-.251v-1.657h.704v.267h-.45v.421h.395v.267h-.396z"
+    />
+    <path fill="#916851" d="M65.843 72.131a3.36 3.36 0 0 0-3.041-1.94 3.36 3.36 0 0 0-3.041 1.94zM59.763 74.998a3.36 3.36 0 0 0 3.04 1.938 3.36 3.36 0 0 0 3.042-1.938z" />
+    <path
+      fill="#523A2E"
+      d="M70.222 68.569a.7.7 0 0 0-.7.7h.7zM70.222 77.161a.7.7 0 0 0-.7.7h.7z"
+      style={{
+        mixBlendMode: "screen",
+      }}
+    />
+  </svg>
+);
+export default SvgBear;
diff --git a/packages/lib/src/orders/assets/components/index.ts b/packages/lib/src/orders/assets/components/index.ts
new file mode 100644
index 000000000..7545cc7ff
--- /dev/null
+++ b/packages/lib/src/orders/assets/components/index.ts
@@ -0,0 +1,2 @@
+export { default as Bear } from "./Bear";
+export { default as ArrowOutward } from "./ArrowOutward";
diff --git a/packages/lib/src/store.ts b/packages/lib/src/store.ts
index 0708e7efc..e27591476 100644
--- a/packages/lib/src/store.ts
+++ b/packages/lib/src/store.ts
@@ -54,6 +54,8 @@ const getInitialState = (queryParamsEnabled?: boolean): State => {
     waitingForOrdersUpdate: false,
     srcUsd: undefined,
     dstUsd: undefined,
+
+    priceImpact: 0,
   };
 };
 const initialState = getInitialState();
@@ -115,6 +117,10 @@ export const useTwapStore = create(
       setQueryParam(QUERY_PARAMS.TRADE_INTERVAL, !fillDelay.amount ? undefined : fillDelay.amount?.toString());
       set({ customFillDelay: fillDelay });
     },
+    setPriceImpact: (priceImpact: number) => {},
+    getPriceImpact: () => {
+      return get().priceImpact;
+    },
     getFillDelayText: (translations: Translations) => fillDelayText((get() as any).getFillDelayUiMillis(), translations),
     getFillDelayUiMillis: () => get().customFillDelay.amount! * get().customFillDelay.resolution,
     getMinimumDelayMinutes: () => (get().lib?.estimatedDelayBetweenChunksMillis() || 0) / 1000 / 60,
diff --git a/packages/lib/src/styles.ts b/packages/lib/src/styles.ts
index a2413791f..0494fa930 100644
--- a/packages/lib/src/styles.ts
+++ b/packages/lib/src/styles.ts
@@ -21,6 +21,12 @@ export const StyledText = styled(Typography)({
   fontSize: "inherit",
 });
 
+export const StyledPriceImpactText = styled(Typography)({
+  fontFamily: "inherit",
+  fontSize: 16,
+  fontWeight: 600,
+});
+
 export const StyledColumnFlex = styled(Box)(({ gap = 10 }: { gap?: number }) => ({
   display: "flex",
   flexDirection: "column",
@@ -158,3 +164,9 @@ export const StyledSummaryRow = styled(StyledRowFlex)({
     },
   },
 });
+
+export const StyledH1 = styled(Typography)(({ theme }) => ({
+  fontSize: 16,
+  fontWeight: 400,
+  color: theme.palette.mode === "dark" ? "#767676" : "#866C65",
+}));
diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts
index 36217c018..53baef2b5 100644
--- a/packages/lib/src/types.ts
+++ b/packages/lib/src/types.ts
@@ -80,6 +80,8 @@ export interface Translations {
   confirmationLimitPriceTooltip: string;
   ordersTooltip: string;
   noOrdersFound1: string;
+  noOrdersFound2: string;
+  noOrdersFound_Swap: string;
   poweredBy: string;
   insertLimitPriceWarning: string;
   unwrap: string;
@@ -98,6 +100,8 @@ export interface Translations {
   viewOrders: string;
   view: string;
   estimate: string;
+  partDuration: string;
+  totalDuration: string;
 }
 
 export interface BaseComponentProps {
@@ -308,6 +312,8 @@ export interface State {
   dstUsd?: BN;
   srcUsdLoading?: boolean;
   dstUsdLoading?: boolean;
+
+  priceImpact: number;
 }
 
 export type SwitchVariant = "ios" | "default";
diff --git a/packages/tradingpost/LICENSE b/packages/tradingpost/LICENSE
new file mode 100644
index 000000000..63f9e3f03
--- /dev/null
+++ b/packages/tradingpost/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Orbs Network
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/tradingpost/package.json b/packages/tradingpost/package.json
new file mode 100644
index 000000000..e070b5269
--- /dev/null
+++ b/packages/tradingpost/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@orbs-network/twap-ui-tradingpost",
+  "version": "1.0.0",
+  "description": "TWAP UI for Trading Post",
+  "author": "TradingPost",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orbs-network/twap-ui.git"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "prettier": "prettier -w '{src,test}/**/*.{ts,tsx,js,jsx,json,sol}'",
+    "transform-svg": "ts-node transform-svg.ts",
+    "build": "npm run prettier && rm -rf dist && tsc && npm run copy-assets",
+    "start": "npm run prettier && nodemon --ext js,jsx,ts,tsx,json --watch ./src --exec tsc",
+    "test": "eslint src",
+    "copy-assets": "copyfiles -u 1 src/assets/*.svg dist/"
+  },
+  "dependencies": {
+    "@defi.org/web3-candies": "^4.20",
+    "@mui/material": "5.x",
+    "@mui/system": "5.x",
+    "@orbs-network/twap": "^1.18.x",
+    "@orbs-network/twap-ui": "^0.10.14",
+    "lodash": "4.x",
+    "web3": "1.x"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/node": "^22.0.2",
+    "copyfiles": "^2.4.1"
+  }
+}
diff --git a/packages/tradingpost/src/OrderSummary.tsx b/packages/tradingpost/src/OrderSummary.tsx
new file mode 100644
index 000000000..4ac5a6e29
--- /dev/null
+++ b/packages/tradingpost/src/OrderSummary.tsx
@@ -0,0 +1,157 @@
+import { styled } from "@mui/material";
+import { Styles as TwapStyles, Components, store, hooks } from "@orbs-network/twap-ui";
+import { StyledMarketPriceContainer, StyledOrderSummary } from "./styles";
+import { MdArrowDownward } from "@react-icons/all-files/md/MdArrowDownward";
+import { useAdapterContext } from "./context";
+import { useCallback, useState } from "react";
+
+export const OrderSummary = ({ onSubmit, disabled, isLimitPanel }: { onSubmit: () => void; disabled?: boolean; isLimitPanel?: boolean }) => {
+  const Button = useAdapterContext().Button;
+  return (
+    <StyledOrderSummary gap={14}>
+      <TwapStyles.StyledColumnFlex gap={14}>
+        <StyledTokens>
+          <TokenDisplay isSrc={true} />
+          <StyledArrow />
+          <TokenDisplay />
+        </StyledTokens>
+        <Components.Base.Card>
+          <StyledSummaryDetails>
+            {isLimitPanel ? (
+              <>
+                <SummaryPrice />
+                <Components.OrderSummaryDetailsDeadline />
+                <Components.OrderSummaryDetailsOrderType />
+                <Components.OrderSummaryDetailsChunkSize />
+                <Components.OrderSummaryDetailsMinDstAmount />
+              </>
+            ) : (
+              <>
+                <SummaryPrice />
+                <Components.OrderSummaryDetailsDeadline />
+                <Components.OrderSummaryDetailsOrderType />
+                <Components.OrderSummaryDetailsChunkSize />
+                <Components.OrderSummaryDetailsTotalChunks />
+                <Components.OrderSummaryDetailsTradeInterval />
+                <Components.OrderSummaryDetailsMinDstAmount />
+              </>
+            )}
+          </StyledSummaryDetails>
+        </Components.Base.Card>
+        <Components.Base.Card>
+          <TwapStyles.StyledColumnFlex gap={10}>
+            <Components.DisclaimerText />
+          </TwapStyles.StyledColumnFlex>
+        </Components.Base.Card>
+      </TwapStyles.StyledColumnFlex>
+      <Components.Base.Card>
+        <TwapStyles.StyledColumnFlex gap={12}>
+          <Components.AcceptDisclaimer />
+          <Components.OutputAddress ellipsis={13} />
+        </TwapStyles.StyledColumnFlex>
+      </Components.Base.Card>
+      <StyledButtonContainer>
+        <Button disabled={disabled} onClick={onSubmit}>
+          Confirm Order
+        </Button>
+      </StyledButtonContainer>
+    </StyledOrderSummary>
+  );
+};
+
+const SummaryPrice = () => {
+  const { TradePrice: DappTradePrice } = useAdapterContext();
+  const [inverted, setInvert] = useState(false);
+  const { isLimitOrder, srcToken, dstToken } = store.useTwapStore((store) => ({
+    isLimitOrder: store.isLimitOrder,
+    srcToken: store.srcToken,
+    dstToken: store.dstToken,
+  }));
+  const { isLoading, getToggled } = hooks.useLimitPriceV2();
+  const { marketPrice } = hooks.useMarketPriceV2(inverted);
+  const price = isLimitOrder ? getToggled(inverted, true) : marketPrice?.original;
+  const value = hooks.useFormatNumber({ value: price || "", decimalScale: 5 });
+
+  const onInvert = useCallback(() => {
+    setInvert((prev) => !prev);
+  }, [setInvert]);
+
+  const leftSymbol = inverted ? dstToken?.symbol : srcToken?.symbol;
+  const rightSymbol = inverted ? srcToken?.symbol : dstToken?.symbol;
+
+  return (
+    <StyledMarketPriceContainer>
+      <Components.Base.Label>Price</Components.Base.Label>
+      <DappTradePrice onClick={onInvert} loading={isLoading} leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={value} />
+    </StyledMarketPriceContainer>
+  );
+};
+
+const StyledButtonContainer = styled(TwapStyles.StyledRowFlex)({
+  width: "100%",
+  button: {
+    width: "100%",
+  },
+});
+
+const StyledSummaryDetails = styled(TwapStyles.StyledColumnFlex)({
+  gap: 9,
+  ".twap-token-logo": {
+    display: "none",
+  },
+  "@media(max-width: 700px)": {
+    gap: 6,
+  },
+});
+
+const TokenDisplay = ({ isSrc }: { isSrc?: boolean }) => {
+  const { token, srcAmount } = store.useTwapStore((store) => ({
+    token: isSrc ? store.srcToken : store.dstToken,
+    srcAmount: store.srcAmountUi,
+  }));
+  const dstAmount = hooks.useDstAmount().outAmount.ui;
+
+  const _amount = isSrc ? srcAmount : dstAmount;
+
+  const amount = hooks.useFormatNumber({ value: _amount, decimalScale: 3 });
+
+  return (
+    <StyledTokenDisplay>
+      <StyledTokenDisplayAmount>{amount}</StyledTokenDisplayAmount>
+      <StyledTokenDisplayRight>
+        <TwapStyles.StyledText>{token?.symbol}</TwapStyles.StyledText>
+        <Components.Base.TokenLogo logo={token?.logoUrl} />
+      </StyledTokenDisplayRight>
+    </StyledTokenDisplay>
+  );
+};
+
+const StyledTokens = styled(TwapStyles.StyledColumnFlex)({
+  gap: 12,
+  alignItems: "center",
+});
+
+const StyledArrow = styled(MdArrowDownward)({
+  width: 24,
+  height: 24,
+});
+
+const StyledTokenDisplayRight = styled(TwapStyles.StyledRowFlex)({
+  width: "auto",
+  p: {
+    fontSize: 14,
+  },
+  ".twap-token-logo": {
+    width: 24,
+    height: 24,
+  },
+});
+
+const StyledTokenDisplayAmount = styled(TwapStyles.StyledOneLineText)({
+  fontWeight: 600,
+  fontSize: 24,
+});
+const StyledTokenDisplay = styled(TwapStyles.StyledRowFlex)({
+  justifyContent: "space-between",
+  gap: 30,
+});
diff --git a/packages/tradingpost/src/TradingPostOrders.tsx b/packages/tradingpost/src/TradingPostOrders.tsx
new file mode 100644
index 000000000..c591781b3
--- /dev/null
+++ b/packages/tradingpost/src/TradingPostOrders.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { useMediaQuery } from "@mui/material";
+import { hooks, OrdersPortal, SelectedOrders, store } from "@orbs-network/twap-ui";
+import { StyledOrders, StyledOrdersHeader, StyledOrdersTab, StyledOrdersTabs, StyledBody } from "./styles";
+
+const useMobile = () => {
+  return useMediaQuery("(max-width:700px)");
+};
+
+export default function TradingPostOrders() {
+  return (
+    <OrdersPortal>
+      <StyledOrders>
+        <OrdersHeaderLayout />
+        <StyledBody>
+          <SelectedOrders dex="tradingpost"/>
+        </StyledBody>
+      </StyledOrders>
+    </OrdersPortal>
+  );
+}
+
+const OrdersHeaderLayout = () => {
+  const mobile = useMobile();
+
+  const { tab, setTab } = store.useOrdersStore();
+
+  const tabs = hooks.useOrdersTabs();
+  const selectedTab = React.useMemo(() => {
+    return Object.keys(tabs)[tab as any];
+  }, [tabs, tab]);
+
+  const onSelect = (index: number) => {
+    setTab(index);
+  };
+
+  return (
+    <>
+      <StyledOrdersHeader>
+        <StyledOrdersTabs>
+          {Object.keys(tabs)
+            .map((key, index) => {
+              return (
+                <StyledOrdersTab selected={key === selectedTab ? 1 : 0} key={key} onClick={() => onSelect(index)}>
+                  {key}
+                </StyledOrdersTab>
+              );
+            })}
+        </StyledOrdersTabs>
+      </StyledOrdersHeader>
+    </>
+  );
+};
diff --git a/packages/tradingpost/src/assets/components/Arrow.tsx b/packages/tradingpost/src/assets/components/Arrow.tsx
new file mode 100644
index 000000000..18045247f
--- /dev/null
+++ b/packages/tradingpost/src/assets/components/Arrow.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgArrow = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={14} height={18} fill="none" {...props}>
+    <path
+      fill="#453936"
+      d="M13.649 14.032a1 1 0 1 0-1.312-1.51l-1.38 1.2.39-5.573a1 1 0 1 0-1.996-.14l-.39 5.573-1.2-1.38a1 1 0 0 0-1.509 1.312l2.784 3.202.656.755.755-.656zm-6-9.924a1 1 0 0 1-1.312 1.51l-1.38-1.2.39 5.572a1 1 0 1 1-1.996.14l-.39-5.572-1.2 1.38A1 1 0 1 1 .253 4.626l2.784-3.202.656-.755.755.656z"
+    />
+  </svg>
+);
+export default SvgArrow;
diff --git a/packages/tradingpost/src/assets/components/ArrowOutward.tsx b/packages/tradingpost/src/assets/components/ArrowOutward.tsx
new file mode 100644
index 000000000..918f6adef
--- /dev/null
+++ b/packages/tradingpost/src/assets/components/ArrowOutward.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgArrowOutward = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#453936"
+      fillRule="evenodd"
+      d="M13 5a1 1 0 1 0 0 2h2.586l-6.293 6.293a1 1 0 1 0 1.414 1.414L17 8.414V11a1 1 0 1 0 2 0V5h-6m-3 2a5 5 0 0 0-5 5v2a5 5 0 0 0 5 5h2a5 5 0 0 0 5-5 1 1 0 1 0-2 0 3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3 1 1 0 1 0 0-2"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgArrowOutward;
diff --git a/packages/tradingpost/src/assets/components/index.ts b/packages/tradingpost/src/assets/components/index.ts
new file mode 100644
index 000000000..a6c6f8fb9
--- /dev/null
+++ b/packages/tradingpost/src/assets/components/index.ts
@@ -0,0 +1,2 @@
+export { default as ArrowOutward } from "./ArrowOutward";
+export { default as Arrow } from "./Arrow";
diff --git a/packages/tradingpost/src/components.tsx b/packages/tradingpost/src/components.tsx
new file mode 100644
index 000000000..bb8acd0b7
--- /dev/null
+++ b/packages/tradingpost/src/components.tsx
@@ -0,0 +1,52 @@
+import { Components, hooks, store } from "@orbs-network/twap-ui";
+import { useAdapterContext } from "./context";
+import BN from "bignumber.js";
+import { StyledMarketPriceContainer } from "./styles";
+import { styled } from "@mui/material";
+import { useMemo } from "react";
+
+export function Price() {
+  const { TradePrice: DappTradePrice } = useAdapterContext();
+  const { srcToken, dstToken, srcAmount, isLimitOrder } = store.useTwapStore((s) => ({
+    srcToken: s.srcToken,
+    dstToken: s.dstToken,
+    srcAmount: s.getSrcAmount().toString(),
+    isLimitOrder: s.isLimitOrder,
+  }));
+
+  const { limitPrice, isLoading, inverted } = hooks.useLimitPriceV2();
+  const { marketPrice } = hooks.useMarketPriceV2(inverted);
+
+  const price = hooks.useFormatNumber({ value: isLimitOrder ? limitPrice?.toggled : marketPrice?.toggled, decimalScale: 3, disableDynamicDecimals: false });
+
+  if (!DappTradePrice) {
+    return <Components.OrderSummaryLimitPrice />;
+  }
+
+  if (!srcToken || !dstToken || BN(srcAmount || "0").isZero()) {
+    return null;
+  }
+
+  const leftSymbol = inverted ? dstToken?.symbol : srcToken?.symbol;
+  const rightSymbol = inverted ? srcToken?.symbol : dstToken?.symbol;
+
+  return (
+    <StyledMarketPriceContainer>
+      <div style={{ opacity: isLoading ? 0 : 1 }}>
+        <DappTradePrice leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={price} />
+      </div>
+      <StyledLoader loading={isLoading ? 1 : 0} />
+    </StyledMarketPriceContainer>
+  );
+}
+
+const StyledLoader = styled(Components.Base.Loader)<{ loading: number }>(({ loading }) => ({
+  position: "absolute",
+  width: "30%!important",
+  height: "15px!important",
+  top: "50%",
+  transform: "translateY(-50%)",
+  right: 0,
+  display: loading ? "block" : ("none" as const),
+  posinterEvents: "none",
+}));
diff --git a/packages/tradingpost/src/context.ts b/packages/tradingpost/src/context.ts
new file mode 100644
index 000000000..11dc9f4ae
--- /dev/null
+++ b/packages/tradingpost/src/context.ts
@@ -0,0 +1,27 @@
+import { TWAPProps } from "@orbs-network/twap-ui";
+import { createContext, FC, JSXElementConstructor, useContext } from "react";
+
+export interface AdapterProps extends TWAPProps {
+  dappTokens?: { [key: string]: any };
+  isDarkTheme?: boolean;
+  ConnectButton: JSXElementConstructor<any>;
+  useTokenModal: any;
+  nativeToken: any;
+  connector?: any;
+  isMobile?: boolean;
+  useTooltip: any;
+  Button: any;
+  ApproveModalContent?: any;
+  SwapTransactionErrorContent?: any;
+  SwapPendingModalContent?: any;
+  SwapTransactionReceiptModalContent?: any;
+  AddToWallet?: any;
+  TradePrice?: any;
+  TradePriceToggle: FC<{ onClick: () => void; loading: boolean }>;
+}
+
+const AdapterContext = createContext({} as AdapterProps);
+
+export const AdapterContextProvider = AdapterContext.Provider;
+
+export const useAdapterContext = () => useContext(AdapterContext);
diff --git a/packages/tradingpost/src/i18n/en.json b/packages/tradingpost/src/i18n/en.json
new file mode 100644
index 000000000..1201d864b
--- /dev/null
+++ b/packages/tradingpost/src/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "enterAmount": "Enter an amount",
+  "tradeSizeMustBeEqual": "Trade size must be equal to at least 50 USD"
+}
diff --git a/packages/tradingpost/src/index.tsx b/packages/tradingpost/src/index.tsx
new file mode 100644
index 000000000..5628af33d
--- /dev/null
+++ b/packages/tradingpost/src/index.tsx
@@ -0,0 +1,612 @@
+import { GlobalStyles, Box, ThemeProvider, Typography, styled } from "@mui/material";
+import {
+  Components,
+  hooks,
+  Translations,
+  TwapAdapter,
+  Styles as TwapStyles,
+  store,
+  Orders,
+  TwapContextUIPreferences,
+  Styles,
+  TooltipProps,
+  parseError,
+} from "@orbs-network/twap-ui";
+import translations from "./i18n/en.json";
+import {
+  Card,
+  configureStyles,
+  darkTheme,
+  lightTheme,
+  StyledBalanceContainer,
+  StyledColumnFlex,
+  StyledLimitPrice,
+  StyledLimitPriceBody,
+  StyledModalHeader,
+  StyledModalHeaderClose,
+  StyledModalHeaderTitle,
+  StyledPoweredBy,
+  StyledReset,
+  StyledResetLimitButton,
+  StyledSwapModalContent,
+  StyledText,
+  StyledTimeSelect,
+  StyledTimeSelectBody,
+  StyledTimeSelectContainer,
+  StyledTimeSelectHeader,
+} from "./styles";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyledBalance, StyledTokenChange, StyledTokenChangeContainer, StyledTokenPanel, StyledTokenPanelInput, StyledTokenSelect } from "./styles";
+import { isNativeAddress, zeroAddress } from "@defi.org/web3-candies";
+import { Configs, TokenData } from "@orbs-network/twap";
+import Web3 from "web3";
+import _ from "lodash";
+import BN from "bignumber.js";
+import { MdArrowDropDown } from "@react-icons/all-files/md/MdArrowDropDown";
+import Arrow from "./assets/components/Arrow";
+import TradingPostOrders from "./TradingPostOrders";
+import { getTokenFromTokensList } from "@orbs-network/twap-ui";
+import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import { OrderSummary } from "./OrderSummary";
+import { useTwapContext } from "@orbs-network/twap-ui";
+import { useAdapterContext, AdapterContextProvider, AdapterProps } from "./context";
+import { Price } from "./components";
+import { create } from "zustand";
+const Button = (props: any) => {
+  const DappButton = useAdapterContext().Button;
+  return (
+    <DappButton onClick={props.onClick} disabled={props.disabled || props.loading}>
+      {props.children}
+    </DappButton>
+  );
+};
+const Tooltip = ({ text, children, childrenStyles = {} }: TooltipProps) => {
+  const useTooltip = useAdapterContext().useTooltip;
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(text, { placement: "top", hideTimeout: 0 });
+  return (
+    <span ref={targetRef} style={{ ...childrenStyles }}>
+      {children} {tooltipVisible && tooltip}
+    </span>
+  );
+};
+const uiPreferences: TwapContextUIPreferences = {
+  usdSuffix: " USD",
+  usdPrefix: "~",
+  usdEmptyUI: <></>,
+  balanceEmptyUI: <></>,
+  switchVariant: "ios",
+  inputPlaceholder: "0.0",
+  Tooltip,
+  Button,
+  orders: {
+    paginationChunks: 4,
+    hideUsd: true,
+  },
+  modal: {
+    styles: {
+      zIndex: 1,
+    },
+  },
+};
+const config = Configs.PancakeSwap;
+export const parseToken = (rawToken: any): TokenData | undefined => {
+  const { address, decimals, symbol, logoURI } = rawToken;
+  if (!symbol) {
+    console.error("Invalid token", rawToken);
+    return;
+  }
+  if (!address || isNativeAddress(address) || address === "BNB") {
+    return config.nativeToken;
+  }
+  return {
+    address: Web3.utils.toChecksumAddress(address),
+    decimals,
+    symbol,
+    logoUrl: logoURI,
+  };
+};
+const storeOverride = {
+  isLimitOrder: true,
+  chunks: 1,
+  customDuration: { resolution: store.TimeResolution.Days, amount: 7 },
+  customFillDelay: { resolution: store.TimeResolution.Minutes, amount: 2 },
+};
+const Balance = ({ isSrc }: { isSrc?: boolean }) => {
+  const onPercentClick = hooks.useCustomActions();
+  return (
+    <StyledBalanceContainer onClick={isSrc ? () => onPercentClick(1) : () => {}}>
+      <StyledBalance isSrc={isSrc} decimalScale={6} />
+    </StyledBalanceContainer>
+  );
+};
+
+const TokenPanel = ({ isSrcToken = false }: { isSrcToken?: boolean }) => {
+  const selectToken = hooks.useSelectTokenCallback();
+  const { dstToken, srcToken } = hooks.useDappRawSelectedTokens();
+  const onSelect = useCallback(
+    (token: any) => {
+      selectToken({ isSrc: !!isSrcToken, token });
+    },
+    [selectToken, isSrcToken]
+  );
+  const onTokenSelectClick = useAdapterContext().useTokenModal(onSelect, srcToken, dstToken, isSrcToken);
+  return (
+    <StyledTokenPanel>
+      <Card.Body editable={true}>
+        <Styles.StyledRowFlex style={{ width: "100%", justifyContent: "space-between" }}>
+          <TwapStyles.StyledColumnFlex style={{ justifyContent: "space-between" }}>
+            <StyledText>{isSrcToken ? "Sell" : "Receive at Least"}</StyledText>
+            <StyledTokenPanelInput dstDecimalScale={dstToken?.decimals || 3} isSrc={isSrcToken} />
+          </TwapStyles.StyledColumnFlex>
+          <TwapStyles.StyledColumnFlex style={{ alignItems: "end" }}>
+            <StyledTokenSelect CustomArrow={MdArrowDropDown} hideArrow={false} isSrc={isSrcToken} onClick={onTokenSelectClick} />
+            <Balance isSrc={isSrcToken} />
+          </TwapStyles.StyledColumnFlex>
+        </Styles.StyledRowFlex>
+      </Card.Body>{" "}
+    </StyledTokenPanel>
+  );
+};
+
+const ChangeTokensOrder = () => {
+  return (
+    <StyledTokenChangeContainer>
+      <StyledTokenChange icon={<Arrow />} />
+    </StyledTokenChangeContainer>
+  );
+};
+const handleAddress = (address?: string) => {
+  return isNativeAddress(address || "") ? "BNB" : address;
+};
+export const useProvider = (props: AdapterProps) => {
+  const [provider, setProvider] = useState<any>(undefined);
+  const setProviderFromConnector = useCallback(async () => {
+    const res = await props.connector?.getProvider();
+    setProvider(res);
+  }, [setProvider, props.connector]);
+  useEffect(() => {
+    setProviderFromConnector();
+  }, [props.account, props.connectedChainId, setProviderFromConnector]);
+  return provider;
+};
+const useTrade = (props: AdapterProps) => {
+  const { srcToken, toToken, srcAmount } = store.useTwapStore((s) => ({
+    srcToken: s.srcToken?.address,
+    toToken: s.dstToken?.address,
+    srcAmount: s.getSrcAmount().toString(),
+  }));
+  const res = props.useTrade!(handleAddress(srcToken), handleAddress(toToken), srcAmount === "0" ? undefined : srcAmount);
+  return {
+    outAmount: res?.outAmount,
+    isLoading: BN(srcAmount || "0").gt(0) && res?.isLoading,
+  };
+};
+const TWAP = memo((props: AdapterProps) => {
+  const provider = useProvider(props);
+  const trade = useTrade(props);
+  const theme = useMemo(() => {
+    return props.isDarkTheme ? darkTheme : lightTheme;
+  }, [props.isDarkTheme]);
+  const dappTokens = useMemo(() => {
+    if (!props.dappTokens || !props.nativeToken) return undefined;
+    return {
+      ...props.dappTokens,
+      [zeroAddress]: props.nativeToken,
+    };
+  }, [props.dappTokens, props.nativeToken]);
+  return (
+    <Box className="twap-adapter-wrapper">
+      <TwapAdapter
+        connect={props.connect}
+        config={config}
+        maxFeePerGas={props.maxFeePerGas}
+        priorityFeePerGas={props.priorityFeePerGas}
+        translations={translations as Translations}
+        provider={provider}
+        account={props.account}
+        srcToken={props.srcToken}
+        dstToken={props.dstToken}
+        storeOverride={props.limit ? storeOverride : undefined}
+        parseToken={parseToken}
+        dappTokens={dappTokens}
+        uiPreferences={uiPreferences}
+        onDstTokenSelected={props.onDstTokenSelected}
+        usePriceUSD={props.usePriceUSD}
+        onSrcTokenSelected={props.onSrcTokenSelected}
+        isDarkTheme={props.isDarkTheme}
+        isMobile={props.isMobile}
+        connectedChainId={props.connectedChainId}
+        enableQueryParams={true}
+        dstAmountOut={trade?.outAmount}
+        dstAmountLoading={trade?.isLoading}
+      >
+        <ThemeProvider theme={theme}>
+          <GlobalStyles styles={configureStyles(theme) as any} />
+          <AdapterContextProvider value={{ ...props, provider, dappTokens }}>
+            {props.limit ? <LimitPanel /> : <TWAPPanel />}
+            <TradingPostOrders />
+          </AdapterContextProvider>
+        </ThemeProvider>
+      </TwapAdapter>
+    </Box>
+  );
+});
+const TopPanel = () => {
+  return (
+    <Styles.StyledColumnFlex gap={0}>
+      <TokenPanel isSrcToken={true} />
+      <ChangeTokensOrder />
+      <TokenPanel />
+    </Styles.StyledColumnFlex>
+  );
+};
+
+const LimitTopPanel = () => {
+  return (
+    <Styles.StyledColumnFlex gap={0}>
+      <TokenPanel isSrcToken={true} />
+      <LimitPrice limitOnly={true} />
+      <ChangeTokensOrder />
+      <TokenPanel />
+    </Styles.StyledColumnFlex>
+  );
+};
+const OpenConfirmationModalButton = () => {
+  const { ConnectButton, provider, Button } = useAdapterContext();
+  const { onClick, text, disabled } = useShowSwapModalButton();
+  if (!provider) {
+    return (
+      <StyledButtonContainer>
+        <ConnectButton />
+      </StyledButtonContainer>
+    );
+  }
+  return (
+    <StyledButtonContainer>
+      <Button onClick={onClick} disabled={disabled}>
+        {text}
+      </Button>
+    </StyledButtonContainer>
+  );
+};
+const StyledButtonContainer = styled("div")({
+  width: "100%",
+  "> *": {
+    width: "100%",
+  },
+  marginTop: 10,
+});
+
+const PartDuration = () => {
+  return (
+    <StyledTimeSelectContainer>
+      <StyledTimeSelectHeader>
+        <Components.Labels.PartDurationLabel />
+      </StyledTimeSelectHeader>
+      <StyledTimeSelect>
+        <StyledTimeSelectBody editable={true}>
+          <Components.TradeIntervalSelector />
+        </StyledTimeSelectBody>
+        <Components.FillDelayWarning />
+      </StyledTimeSelect>
+    </StyledTimeSelectContainer>
+  );
+};
+
+const TotalDuration = () => {
+  return (
+    <StyledTimeSelectContainer>
+      <StyledTimeSelectHeader>
+        <Components.Labels.TotalDuarationLabel />
+      </StyledTimeSelectHeader>
+      <StyledTimeSelect>
+        <StyledTimeSelectBody editable={true}>
+          <Components.MaxDurationSelector />
+        </StyledTimeSelectBody>
+        <Components.PartialFillWarning />
+      </StyledTimeSelect>
+    </StyledTimeSelectContainer>
+  );
+};
+
+const LimitPanel = () => {
+  const { onInvert } = hooks.useLimitPriceV2();
+  return (
+    <div className="twap-container">
+      <StyledColumnFlex>
+        <LimitTopPanel />
+        <TwapStyles.StyledColumnFlex>
+          <Price />
+        </TwapStyles.StyledColumnFlex>
+        <OpenConfirmationModalButton />
+      </StyledColumnFlex>
+      <SwapModal limitPanel={true} />
+      <StyledPoweredBy />
+    </div>
+  );
+};
+const TWAPPanel = () => {
+  return (
+    <div className="twap-container">
+      <StyledColumnFlex>
+        <TopPanel />
+        <PartDuration />
+        <TotalDuration />
+        <Price />
+        <OpenConfirmationModalButton />
+      </StyledColumnFlex>
+      <StyledPoweredBy />
+    </div>
+  );
+};
+const LimitPrice = ({ limitOnly }: { limitOnly?: boolean }) => {
+  const isLimitOrder = store.useTwapStore((store) => store.isLimitOrder);
+  const { onInvert, isLoading } = hooks.useLimitPriceV2();
+  const { TradePriceToggle } = useAdapterContext();
+  return (
+    <StyledLimitPrice>
+      <Card>
+        {isLimitOrder && (
+          <Styles.StyledColumnFlex>
+            <StyledLimitPriceBody editable={true}>
+              <div style={{ position: "relative", top: "0px" }}>
+                <StyledResetLimitButton>
+                  <StyledReset>
+                    <Typography>Set To Market</Typography>
+                  </StyledReset>
+                </StyledResetLimitButton>
+
+                <Components.Labels.TradingPostLimitPriceLabel />
+              </div>
+              <Components.LimitInputV2 />
+            </StyledLimitPriceBody>
+          </Styles.StyledColumnFlex>
+        )}
+      </Card>
+    </StyledLimitPrice>
+  );
+};
+export { TWAP, Orders };
+export enum SwapState {
+  REVIEW,
+  APPROVE,
+  ATTEMTPING_TX,
+  PENDING_CONFIRMATION,
+  ERROR,
+  COMPLETED,
+}
+interface Store {
+  swapState: SwapState;
+  setSwapState: (value: SwapState) => void;
+}
+export const useOrdersStore = create<Store>((set, get) => ({
+  swapState: SwapState.REVIEW,
+  setSwapState: (swapState) => set({ swapState }),
+}));
+const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => {
+  const { swapState, setSwapState } = useOrdersStore();
+  const { dappTokens, ApproveModalContent, SwapPendingModalContent, SwapTransactionErrorContent, AddToWallet, SwapTransactionReceiptModalContent } = useAdapterContext();
+  const { fromToken, setShowConfirmation, showConfirmation, txHash, isLimitOrder, disclaimerAccepted } = store.useTwapStore((s) => ({
+    fromToken: s.srcToken,
+    setShowConfirmation: s.setShowConfirmation,
+    showConfirmation: s.showConfirmation,
+    txHash: s.txHash,
+    isLimitOrder: s.isLimitOrder,
+    disclaimerAccepted: s.disclaimerAccepted,
+  }));
+  const reset = hooks.useResetStore();
+  const { mutateAsync: approveCallback } = hooks.useApproveToken(true);
+  const { data: allowance, isLoading, refetch: refetchAllowance } = hooks.useHasAllowanceQuery();
+  const { mutateAsync: createOrder } = hooks.useCreateOrder(true);
+  const inputCurrency = useMemo(() => getTokenFromTokensList(dappTokens, fromToken?.address), [dappTokens, fromToken]);
+  const [error, setError] = useState("");
+  const { data: hasNativeBalance } = hooks.useHasMinNativeTokenBalance("0.0035");
+  const id = useRef(1);
+  const onSubmit = useCallback(async () => {
+    let _id = id.current;
+    try {
+      if (!hasNativeBalance) {
+        setError(`Insufficient BNB balance, you need at least 0.0035BNB to cover the transaction fees.`);
+        setSwapState(SwapState.ERROR);
+        return;
+      }
+      if (!allowance) {
+        setSwapState(SwapState.APPROVE);
+        await approveCallback();
+        const approved = await refetchAllowance();
+        if (!approved.data) {
+          setError("Insufficient allowance to perform the swap. Please approve the token first.");
+          setSwapState(SwapState.ERROR);
+          return;
+        }
+      }
+      if (id.current === _id) {
+        setSwapState(SwapState.ATTEMTPING_TX);
+      }
+      await createOrder();
+      if (id.current === _id) {
+        setSwapState(SwapState.COMPLETED);
+      }
+    } catch (error) {
+      if (id.current === _id) {
+        setSwapState(SwapState.ERROR);
+        setError(parseError(error) || "An error occurred");
+      }
+    }
+  }, [allowance, approveCallback, createOrder, setSwapState, setError, hasNativeBalance, id]);
+  const wrongNetwork = store.useTwapStore((store) => store.wrongNetwork);
+  let content = null;
+  let title: string | undefined = undefined;
+  const resetPoupupState = () => {
+    setTimeout(() => {
+      setSwapState(SwapState.REVIEW);
+    }, 300);
+  };
+  const onClose = () => {
+    id.current = id.current + 1;
+    setShowConfirmation(false);
+    resetPoupupState();
+    if (txHash) {
+      reset({ waitingForOrdersUpdate: true });
+    }
+    if (swapState === SwapState.COMPLETED) {
+      reset();
+    }
+  };
+  useEffect(() => {
+    if (txHash && swapState === SwapState.ATTEMTPING_TX) {
+      setSwapState(SwapState.PENDING_CONFIRMATION);
+    }
+  }, [txHash, swapState]);
+  const addToWallet = !AddToWallet ? null : <AddToWallet logo={fromToken?.logoUrl} symbol={fromToken?.symbol} address={fromToken?.address} decimals={fromToken?.decimals} />;
+  if (swapState === SwapState.REVIEW) {
+    title = "Confirm Order";
+    content = <OrderSummary isLimitPanel={limitPanel} disabled={isLoading || !disclaimerAccepted} onSubmit={onSubmit} />;
+  }
+  if (swapState === SwapState.APPROVE) {
+    content = !ApproveModalContent ? null : <ApproveModalContent title={`Enable spending ${inputCurrency?.symbol}`} isBonus={false} isMM={false} />;
+  }
+  if (swapState === SwapState.ERROR) {
+    content = !SwapTransactionErrorContent ? null : <SwapTransactionErrorContent openSettingModal={() => {}} onDismiss={onClose} message={error} />;
+  }
+  if (swapState === SwapState.ATTEMTPING_TX) {
+    content = !SwapPendingModalContent ? null : (
+      <SwapPendingModalContent title={`Create ${limitPanel ? "" : "TWAP"} ${isLimitOrder ? "Limit" : "Market"} Order`}>{addToWallet}</SwapPendingModalContent>
+    );
+  }
+  if (swapState === SwapState.PENDING_CONFIRMATION) {
+    content = (
+      <SwapPendingModalContent showIcon={true} title="Transaction Submitted">
+        {addToWallet}
+      </SwapPendingModalContent>
+    );
+  }
+  if (swapState === SwapState.COMPLETED) {
+    content = (
+      <SwapTransactionReceiptModalContent txHash={txHash} address={fromToken?.address} symbol={fromToken?.symbol} decimals={fromToken?.decimals} logo={fromToken?.logoUrl}>
+        {addToWallet}
+      </SwapTransactionReceiptModalContent>
+    );
+  }
+  if (wrongNetwork) {
+    content = null;
+  }
+  return (
+    <Components.Base.Modal header={<ModalHeader title={title} onClose={onClose} />} title={title} onClose={onClose} open={showConfirmation}>
+      <StyledSwapModalContent
+        style={{
+          paddingBottom: swapState === SwapState.REVIEW ? "24px" : "55px",
+          paddingTop: title ? "30px" : "24px",
+        }}
+      >
+        <StyledSwapModalContentChildren>{content}</StyledSwapModalContentChildren>
+      </StyledSwapModalContent>
+    </Components.Base.Modal>
+  );
+};
+const StyledSwapModalContentChildren = styled("div")`
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const ModalHeader = ({ title, onClose }: { title?: string; onClose: () => void }) => {
+  return (
+    <StyledModalHeader withTitle={title ? 1 : 0}>
+      {title && <StyledModalHeaderTitle>{title}</StyledModalHeaderTitle>}
+      <StyledModalHeaderClose className="twap-ui-close" onClick={onClose}>
+        <IoMdClose />
+      </StyledModalHeaderClose>
+    </StyledModalHeader>
+  );
+};
+export const useShowSwapModalButton = () => {
+  const translations = useTwapContext()?.translations;
+  const { shouldWrap, shouldUnwrap, wrongNetwork, setShowConfirmation, createOrderLoading, srcAmount } = store.useTwapStore((store) => ({
+    maker: store.lib?.maker,
+    shouldWrap: store.shouldWrap(),
+    shouldUnwrap: store.shouldUnwrap(),
+    wrongNetwork: store.wrongNetwork,
+    setShowConfirmation: store.setShowConfirmation,
+    createOrderLoading: store.loading,
+    srcAmount: store.srcAmountUi,
+  }));
+  const warning = hooks.useFillWarning();
+  const { isLoading: dstAmountLoading, dexAmounOut } = hooks.useDstAmount();
+  const { mutate: unwrap, isLoading: unwrapLoading } = hooks.useUnwrapToken(true);
+  const { mutate: wrap, isLoading: wrapLoading } = hooks.useWrapToken(true);
+  const { loading: changeNetworkLoading, changeNetwork } = hooks.useChangeNetwork();
+  const srcUsd = hooks.useSrcUsd().value;
+  const dstUsd = hooks.useDstUsd().value;
+  const noLiquidity = useMemo(() => {
+    if (!srcAmount || BN(srcAmount).isZero() || dstAmountLoading) return false;
+    return !dexAmounOut.raw || BN(dexAmounOut.raw).isZero();
+  }, [dexAmounOut.raw, dstAmountLoading, srcAmount]);
+  if (wrongNetwork)
+    return {
+      text: translations.switchNetwork,
+      onClick: changeNetwork,
+      loading: changeNetworkLoading,
+      disabled: changeNetworkLoading,
+    };
+  if (!srcAmount || BN(srcAmount || "0").isZero()) {
+    return {
+      text: translations.enterAmount,
+      disabled: true,
+    };
+  }
+  if (dstAmountLoading) {
+    return { text: "Searching for the best price", onClick: undefined, disabled: true };
+  }
+  if (noLiquidity) {
+    return {
+      text: "Insufficient liquidity for this trade.",
+      disabled: true,
+      loading: false,
+    };
+  }
+  if (!srcUsd || srcUsd.isZero() || !dstUsd || dstUsd.isZero()) {
+    return {
+      text: "Searching for the best price",
+      disabled: true,
+    };
+  }
+  if (warning)
+    return {
+      text: warning,
+      onClick: undefined,
+      disabled: true,
+      loading: false,
+    };
+  if (shouldUnwrap)
+    return {
+      text: translations.unwrap,
+      onClick: unwrap,
+      loading: unwrapLoading,
+      disabled: unwrapLoading,
+    };
+  if (shouldWrap)
+    return {
+      text: translations.wrap,
+      onClick: wrap,
+      loading: wrapLoading,
+      disabled: wrapLoading,
+    };
+  if (createOrderLoading) {
+    return {
+      text: translations.placeOrder,
+      onClick: () => {
+        setShowConfirmation(true);
+      },
+    };
+  }
+  return {
+    text: translations.placeOrder,
+    onClick: () => {
+      setShowConfirmation(true);
+    },
+    loading: false,
+    disabled: false,
+  };
+};
diff --git a/packages/tradingpost/src/styles.tsx b/packages/tradingpost/src/styles.tsx
new file mode 100644
index 000000000..877f8ec3d
--- /dev/null
+++ b/packages/tradingpost/src/styles.tsx
@@ -0,0 +1,979 @@
+import { Box, Button, createTheme, styled, Theme, Typography } from "@mui/material";
+import { display } from "@mui/system";
+import { Components, OrdersContainer, Styles } from "@orbs-network/twap-ui";
+import { CSSProperties, ReactNode } from "react";
+const isDarkMode = (theme: Theme) => theme.palette.mode === "dark";
+
+export const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+export const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+  },
+});
+
+export const baseStyles = (theme: Theme) => {
+  const darkMode = isDarkMode(theme);
+  return {
+    primaryColor: "#1fc7d4",
+    cardColor: darkMode ? "#362F47" : "#eee",
+    primaryTextColor: darkMode ? "#FBF4EF" : "#453936",
+    secondaryColor: darkMode ? "#767676" : "#866C65",
+    secondarySubTextColor: darkMode ? "#866C65" : "#767676",
+    cardBox: darkMode ? "#2A2A27" : "#E4CAB4",
+    editableCardBox: darkMode ? "#20201D" : "#EFD9C7",
+    inputShadow: darkMode ? "" : "inset 0px 2px 2px -1px rgba(74,74,104,.1)",
+    border: darkMode ? "#383241" : "#e7e3eb",
+    labelIcon: darkMode ? "#f4eeff" : "black",
+    darkMode,
+    subtitle: darkMode ? "#2A2A27" : "#E4CAB4",
+    subValue: darkMode ? "#FBF4EF" : "#453936",
+  };
+};
+
+const getTootlipStyles = (theme: Theme) => {
+  const darkTheme = isDarkMode(theme);
+
+  return {
+    background: darkTheme ? "white" : "#27262C",
+    color: darkTheme ? "#27262C" : "white",
+    fontSize: 15,
+    borderRadius: 10,
+    padding: "10px 15px",
+    lineHeight: "20px",
+    fontWeight: 400,
+    "*": {
+      color: "inherit",
+    },
+  };
+};
+
+const getButtonStyles = (theme: Theme) => {
+  const styles = baseStyles(theme);
+  return {
+    fontWeight: 600,
+    fontSize: 16,
+    boxShadow: "rgba(14, 14, 44, 0.4) 0px -1px 0px 0px inset",
+    borderRadius: 16,
+    background: styles.primaryColor,
+    transition: "0.2s all",
+    color: isDarkMode(theme) ? "#191326" : "white",
+    border: "unset",
+    "&:hover": {
+      opacity: 0.65,
+    },
+    "*, p": {
+      color: isDarkMode(theme) ? "#191326" : "white",
+    },
+  };
+};
+
+export const StyledCardBody = styled(Box)<{ editable?: number; opacity?: number }>(({ theme, editable, opacity = 100 }) => {
+  const styles = baseStyles(theme);
+
+  return {
+    opacity: opacity / 100,
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    pointerEvents: editable ? "all" : "none",
+    background: editable ? styles.editableCardBox : styles.cardBox,
+    padding: 16,
+    borderRadius: 16,
+    boxShadow: "0 2px 0px rgba(213, 186, 165, 0.76)",
+  };
+});
+
+export const StyledPoweredBy = styled(Components.PoweredBy)(({ theme }) => {
+  const styles = baseStyles(theme);
+
+  return {
+    color: styles.primaryTextColor,
+    marginTop: 20,
+    fontSize: 14,
+
+    "*": {
+      color: "inherit",
+    },
+  };
+});
+
+export const configureStyles = (theme: Theme) => {
+  const styles = baseStyles(theme);
+
+  const darkMode = isDarkMode(theme);
+
+  return {
+    ".twap-order-expanded-cancel-wraper": {
+      marginTop: "40px",
+      button: {
+        color: !darkMode ? "white!important" : "#191326!important",
+      },
+    },
+    ".twap-cancel-order": {
+      background: "unset!important",
+      borderRadius: "30px!important",
+      fontWeight: 500,
+      fontSize: "14px!important",
+      padding: "6px 40px!important",
+      transition: "0.2s all",
+      height: "unset!important",
+      cursor: "pointer",
+      marginTop: "20px",
+      minHeight: "unset!important",
+      boxShadow: "unset!important",
+    },
+    ".twap-token-input-loading": {
+      opacity: 0.5,
+    },
+    ".twap-odnp-button": {
+      ...getButtonStyles(theme),
+      background: darkMode ? "#B8ADD2" : "#492F79",
+      padding: "6px 12px!important",
+      width: "fit-content",
+      boxShadow: "unset",
+      marginLeft: "auto",
+      fontWeight: 500,
+      "&-children": {
+        gap: "5px!important",
+      },
+    },
+    ".twap-label": {
+      p: {
+        fontWeight: "400!important",
+        color: styles.primaryTextColor,
+      },
+      svg: {
+        color: `${styles.labelIcon}!important`,
+        maxWidth: 14,
+        maxHeight: 14,
+      },
+    },
+    ".twap-container": {
+      color: styles.primaryTextColor,
+    },
+    ".twap-button": {
+      minHeight: 48,
+      ...getButtonStyles(theme),
+      padding: "10px",
+    },
+    ".twap-order-separator": {
+      background: `${styles.primaryTextColor}!important`,
+      opacity: 0.4,
+    },
+    ".twap-spinner": {
+      color: `${styles.primaryTextColor}!important`,
+    },
+    ".twap-orders-lists": {
+      width: "100%",
+    },
+    ".twap-orders-list": {
+      padding: 0,
+      width: "100%",
+      gap: "15px!important",
+    },
+    ".twap-order-token-display": {
+      flex: "unset!important",
+    },
+    ".twap-adapter-wrapper": {
+      width: "100%",
+      background: "transparent",
+    },
+    ".twap-modal": {
+      ".MuiBackdrop-root": {
+        background: darkMode ? "rgba(244, 238, 255, 0.6)" : "",
+      },
+    },
+
+    ".twap-modal-content": {
+      background: darkMode ? "#27262C" : "white",
+      color: styles.primaryTextColor,
+      display: "flex",
+      flexDirection: "column",
+      padding: "0px",
+      maxWidth: "370px!important",
+      borderRadius: 32,
+      minHeight: "415px",
+      overflow: "hidden",
+      "*::-webkit-scrollbar": {
+        display: "none",
+      },
+      "&-header": {
+        marginBottom: 10,
+      },
+    },
+    ".twap-trade-size": {
+      ".twap-label": {
+        whiteSpace: "nowrap",
+      },
+      ".twap-token-logo": {
+        display: "none",
+      },
+      "*": {
+        color: styles.primaryTextColor,
+      },
+    },
+    ".twap-orders-title": {
+      p: {
+        fontWeight: 600,
+        color: `${styles.primaryTextColor}!important`,
+      },
+    },
+    ".twap-order": {
+      border: `1px solid ${styles.border}`,
+      borderRadius: 16,
+      padding: 15,
+      transition: "0.2s all",
+      color: `${styles.primaryTextColor}!important`,
+      background: darkMode ? "#362F47" : "#EEEAF4",
+      ".twap-order-expanded-right": {
+        fontWeight: "400!important",
+      },
+      ".twap-market-price-section": {
+        "*": {
+          fontSize: 13,
+          fontWeight: "400!important",
+        },
+      },
+    },
+    ".twap-order-progress": {
+      background: darkMode ? "#2D2836!important" : "#1fc7d4!important",
+      "&::after": {
+        display: "none!important",
+      },
+      ".MuiLinearProgress-bar": {
+        background: darkMode ? `${styles.subtitle}!important` : "#7a6eaa!important",
+      },
+    },
+
+    ".twap-switch": {
+      ".MuiSwitch-thumb": {
+        background: darkMode ? `#27262C!important` : "white!important",
+      },
+      ".MuiSwitch-track": {
+        backgroundColor: darkMode ? `#b8add2!important` : "#EDEAF4!important",
+        opacity: "1!important",
+      },
+      ".Mui-checked+.MuiSwitch-track": {
+        background: "#32D0AA!important",
+      },
+    },
+    ".twap-time-selector": {
+      ".twap-input": {
+        input: {
+          fontWeight: 400,
+        },
+      },
+    },
+    ".twap-price-impact-selector": {
+      border: `1px solid ${styles.cardBox}`,
+      borderRadius: 16,
+
+      ".twap-input": {
+        input: {
+          fontWeight: 700,
+          fontSize: 16,
+        },
+      },
+    },
+    ".twap-time-selector-selected": {
+      "*": {
+        color: `${styles.primaryTextColor}!important`,
+      },
+    },
+    ".twap-time-selector-list": {
+      background: styles.cardBox,
+      border: `1px solid ${styles.border}`,
+      borderRadius: "16px!important",
+      padding: "0px!important",
+    },
+    ".twap-time-selector-list-item": {
+      p: { color: styles.primaryTextColor, fontWeight: "400!important" },
+
+      "&:hover": {
+        background: darkMode ? "rgba(255,255,255, 0.06)" : "rgba(0,0,0, 0.06)",
+      },
+    },
+    ".twap-button-disabled": {
+      background: darkMode ? "#3c3742!important" : "#e9eaeb!important",
+      opacity: "1!important",
+      cursor: "not-allowed!important",
+      boxShadow: "unset!important",
+      "*": {
+        color: "#bdc2c4!important",
+      },
+      p: {
+        opacity: "0.4!important",
+      },
+    },
+    ".twap-tooltip": {
+      ".MuiTooltip-arrow": {
+        color: darkMode ? "white!important" : "#27262C!important",
+      },
+      "& .MuiTooltip-tooltip": {
+        ...getTootlipStyles(theme),
+        fontFamily: "Kanit",
+      },
+    },
+    ".twap-loader": {
+      background: darkMode ? "rgba(255,255,255, 0.1)!important" : "rgba(0,0,0, 0.1)!important",
+      right: 0,
+    },
+    ".twap-market-price": {
+      justifyContent: "center!important",
+      width: "100%",
+      ".twap-price-compare": {
+        justifyContent: "center",
+      },
+      ">div": {
+        width: "100%",
+      },
+      "*": {
+        fontSize: 14,
+        color: styles.primaryTextColor,
+      },
+    },
+    ".twap-label, .twap-market-price .title": {
+      fontSize: 13,
+      color: styles.primaryTextColor,
+      fontWeight: 600,
+      "*, p": {
+        color: "inherit",
+        fontWeight: "inherit",
+      },
+    },
+    ".twap-input": {
+      input: {
+        color: styles.primaryTextColor,
+        fontSize: 24,
+        fontWeight: 700,
+        "&::placeholder": {
+          color: `${styles.primaryTextColor}!important`,
+          opacity: 0.5,
+          fontWeight: "inherit",
+        },
+      },
+    },
+    ".twap-usd": {
+      fontSize: 12,
+      "*": {
+        color: styles.subtitle,
+      },
+    },
+    "@media (max-width:970px)": {
+      ".twap-orders-title": {
+        p: {
+          fontSize: "14px!important",
+        },
+      },
+      ".twap-order-expanded": {
+        ".twap-token-logo": {
+          display: "none",
+        },
+      },
+      ".twap-order-preview-tokens": {
+        ".twap-order-preview-icon svg": {
+          width: "16px!important",
+          height: "16px!important",
+          position: "relative",
+          top: 5,
+        },
+        ".twap-token-logo": {
+          display: "none",
+        },
+      },
+    },
+  };
+};
+
+export const StyledText = styled(Styles.StyledText)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    color: styles.secondaryColor,
+    fontSize: 16,
+    fontWeight: 400,
+  };
+});
+
+export const StyledTokenPanelInput = styled(Components.TokenPanelInput)({
+  input: {
+    width: "100%",
+  },
+});
+
+export const StyledBalanceContainer = styled("div")({
+  flex: 1,
+  overflow: "hidden",
+  display: "flex",
+  justifyContent: "flex-end",
+});
+export const StyledBalance = styled(Components.TokenBalance)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    cursor: "pointer",
+    fontSize: 12,
+    color: styles.primaryTextColor,
+    fontWeight: "400",
+    "*": {
+      color: "inherit",
+      fontWeight: "700",
+    },
+  };
+});
+
+export const StyledMarketPrice = styled(Components.MarketPrice)({
+  flexDirection: "column",
+  alignItems: "flex-start",
+
+  gap: 5,
+  ".twap-loader": {
+    marginLeft: "auto",
+  },
+
+  ".twap-price-compare": {
+    justifyContent: "flex-end",
+    width: "auto",
+    marginLeft: "auto",
+    "*": {
+      fontSize: 13,
+    },
+  },
+});
+
+export const StyledMarketPriceContainer = styled(Styles.StyledRowFlex)(({ theme }) => {
+  const darkMode = baseStyles(theme).darkMode;
+  return {
+    position: "relative",
+    padding: 12,
+    borderRadius: 16,
+    background: darkMode ? "#20201D" : "#EFD9C7",
+    justifyContent: "space-between",
+    p: { color: darkMode ? "#767676" : "#866C65", fontWeight: "400!important" },
+    ".twap-token-logo": {
+      display: "none",
+    },
+    ".twap-label": {
+      p: {
+        whiteSpace: "nowrap",
+      },
+    },
+    "@media(max-width: 700px)": {
+      ".twap-label": {
+        p: {
+          fontSize: "12px!important",
+        },
+      },
+    },
+  };
+});
+
+export const StyledTokenSelect = styled(Components.TokenSelect)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    background: styles.cardBox,
+    borderRadius: 16,
+    padding: 12,
+
+    ".twap-token-name": {
+      fontWeight: 700,
+      fontSize: 12,
+      color: styles.primaryTextColor,
+    },
+  };
+});
+
+export const StyledColumnFlex = styled(Styles.StyledColumnFlex)({
+  gap: 14,
+});
+
+export const StyledPercentSelect = styled(Styles.StyledRowFlex)({
+  marginTop: 14,
+  gap: 5,
+  justifyContent: "flex-end",
+});
+
+export const StyledTokenChangeContainer = styled(Styles.StyledRowFlex)(({ theme }) => {
+  const styles = baseStyles(theme);
+
+  const darkMode = isDarkMode(theme);
+  return {
+    width: 32,
+    height: 32,
+    marginLeft: "auto",
+    marginRight: "auto",
+    "&:hover": {
+      button: {
+        opacity: darkMode ? 0.65 : 1,
+      },
+    },
+  };
+});
+
+export const StyledTokenChange = styled(Components.ChangeTokensOrder)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    button: {
+      width: "100%",
+      height: "100%",
+      transition: "unset",
+      svg: {
+        color: styles.primaryTextColor,
+        fill: styles.primaryTextColor,
+        width: 17,
+        height: 17,
+      },
+    },
+  };
+});
+
+export const StyledLimitPrice = styled(Styles.StyledRowFlex)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    justifyContent: "space-between",
+    marginTop: 10,
+    ".twap-limit-price-input": {
+      "*": {
+        color: styles.primaryTextColor,
+      },
+      input: {
+        position: "relative",
+        top: -2,
+      },
+    },
+    ".twap-token-logo": {
+      display: "none",
+    },
+    ".twap-limit-reset": {
+      left: 10,
+      "*": {
+        stroke: styles.primaryColor,
+      },
+    },
+  };
+});
+
+export const StyledLimitPriceInput = styled(Components.LimitPriceInput)({
+  paddingLeft: 0,
+});
+
+const borderButtonStyles = {
+  background: "unset",
+  borderRadius: 16,
+  fontWeight: 600,
+  fontSize: 12,
+  border: "2px solid #1fc7d4",
+  color: "#1fc7d4",
+  padding: "0px 8px",
+  transition: "0.2s all",
+  cursor: "pointer",
+  "&:hover": {
+    opacity: 0.65,
+  },
+};
+
+export const StyledButton = styled("button")<{ selected?: number }>(({ theme, selected }) => {
+  const styles = baseStyles(theme);
+  return {
+    ...borderButtonStyles,
+    background: selected ? styles.primaryColor : "unset",
+    color: !selected ? "#1fc7d4" : styles.darkMode ? "#191326" : "white",
+  };
+});
+
+export const StyledReset = styled(StyledButton)({
+  p: {
+    fontSize: 13,
+    color: "#DE7F3B",
+  },
+  border: "none",
+  padding: "0px",
+});
+
+export const StyledAcceptDisclaimer = styled(Components.AcceptDisclaimer)({
+  justifyContent: "space-between",
+});
+
+export const StyledOutputAddress = styled(Components.OutputAddress)({
+  marginTop: 20,
+  fontSize: 14,
+});
+
+export const StyledOrderSummary = styled(Styles.StyledColumnFlex)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    ".twap-order-summary-output-address": {
+      alignItems: "center",
+      fontSize: 14,
+    },
+    ".twap-order-summary-details-item": {
+      ".twap-label": {
+        maxWidth: "unset",
+        fontSize: 14,
+        fontWeight: 400,
+      },
+      ".twap-token-display": {
+        order: 1,
+      },
+    },
+    ".twap-order-summary-limit-price": {
+      p: {
+        fontSize: 14,
+      },
+    },
+    ".twap-order-summary-details-item-right": {
+      fontSize: 14,
+      gap: 3,
+    },
+    ".twap-ui-close": {
+      "*": {
+        color: `${styles.primaryTextColor}`,
+      },
+    },
+    ".twap-card": {
+      border: `1px solid ${styles.border}`,
+      borderRadius: 16,
+      padding: 12,
+      transition: "0.2s all",
+
+      background: styles.darkMode ? "#353547" : "#D5BAA5",
+      "*": {
+        color: `${styles.primaryTextColor}`,
+      },
+    },
+    ".twap-label": {
+      p: {
+        color: styles.primaryTextColor,
+      },
+      svg: {
+        color: `${styles.labelIcon}!important`,
+      },
+    },
+
+    ".twap-orders-summary-token-display-amount": {
+      p: {
+        fontSize: 16,
+      },
+    },
+    ".twap-orders-summary-token-display": {
+      ".twap-token-logo": {
+        width: 35,
+        height: 35,
+      },
+    },
+    "@media (max-width:700px)": {
+      ".twap-order-summary-limit-price": {
+        "*": {
+          fontSize: "12px!important",
+        },
+      },
+    },
+  };
+});
+
+export const Card = ({ children, className = "" }: { children: ReactNode; className?: string }) => {
+  return (
+    <StyledColumnFlex gap={5} className={className}>
+      {children}
+    </StyledColumnFlex>
+  );
+};
+
+const CardHeader = ({ children, className = "" }: { children: ReactNode; className?: string }) => {
+  return (
+    <Styles.StyledRowFlex className={className} justifyContent="space-between">
+      {" "}
+      {children}
+    </Styles.StyledRowFlex>
+  );
+};
+
+const CardBody = ({ children, editable, className = "", opacity }: { children: ReactNode; editable?: boolean; className?: string; opacity?: number }) => {
+  return (
+    <StyledCardBody className={className} editable={editable ? 1 : 0} opacity={opacity}>
+      {children}
+    </StyledCardBody>
+  );
+};
+
+Card.Body = CardBody;
+Card.Header = CardHeader;
+
+export const StyledDisabledCardBody = styled(Card.Body)(({ opacity = 1 }: { opacity: number }) => ({
+  opacity: opacity,
+}));
+
+export const StyledTokenPanel = styled(Card)({
+  width: "100%",
+  gap: 7,
+  ".twap-input": {
+    width: "100%",
+    input: {
+      textAlign: "left",
+    },
+  },
+  ".twap-token-logo": {
+    width: 24,
+    height: 24,
+  },
+});
+
+export const StyledTradeSize = styled(Styles.StyledRowFlex)({
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  alignItems: "center",
+});
+
+export const StyledOrders = styled(OrdersContainer)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    gap: 0,
+    ".twap-orders-empty-list": {
+      marginBottom: "40px",
+      paddingTop: "30px",
+      color: styles.primaryTextColor,
+      justifyContent: "center",
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+    },
+    ".twap-orders-pagination": {
+      color: styles.primaryTextColor,
+      "*": {
+        color: styles.primaryTextColor,
+      },
+    },
+  };
+});
+
+export const StyledTimeSelect = styled(Styles.StyledColumnFlex)({
+  display: "flex",
+  alignItems: "flex-end",
+  width: "auto",
+  padding: 2,
+  flex: 1,
+});
+
+export const StyledTimeSelectBody = styled(CardBody)({
+  display: "flex",
+  alignItems: "center",
+
+  padding: "4px 10px",
+  width: "auto",
+  boxShadow: "none",
+});
+
+export const StyledTimeSelectContainer = styled(Styles.StyledRowFlex)(({ theme }) => {
+  const styles = baseStyles(theme);
+
+  return {
+    background: styles.editableCardBox,
+    borderRadius: 16,
+    padding: 16,
+    ".MuiButtonBase-root": {
+      padding: "0px!important",
+      background: "unset!important",
+      height: "100%",
+      p: {
+        fontSize: "12px!important",
+        fontWeight: 400,
+      },
+    },
+    ".twap-input": {
+      input: {
+        fontSize: 14,
+        paddingRight: 3,
+      },
+    },
+  };
+});
+
+export const StyledTimeSelectHeader = styled(Card.Header)({
+  marginTop: 1,
+  width: "auto",
+});
+
+export const StyledOrdersHeader = styled(Box)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: styles.darkMode ? "#20201D" : "#EFD9C7",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    height: 60,
+    width: "100%",
+    padding: "0px 0px",
+    position: "relative",
+  };
+});
+
+export const StyledOrdersTab = styled(Box)<{ selected: number }>(({ selected, theme }) => {
+  const styles = baseStyles(theme);
+  const selectedColor = styles.darkMode ? "#FBF4EF" : "#453936";
+  return {
+    cursor: "pointer",
+    background: selected ? (theme.palette.mode === "dark" ? "#2A2A27" : "#E4CAB4") : "transparent",
+    height: "100%",
+    padding: "0px 24px",
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "16px",
+    flex: 1,
+    justifyContent: "center",
+    color: selectedColor,
+    "@media (max-width:700px)": {
+      fontSize: 12,
+      padding: "0px 10px",
+    },
+  };
+});
+
+export const StyledOrdersTabs = styled(Box)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    display: "flex",
+    flex: 1,
+    border: `1px solid ${styles.darkMode ? "#353531" : "#D5BAA5"}`,
+    alignItems: "center",
+    padding: "2px",
+    borderRadius: 16,
+    justifyContent: "space-between",
+    height: "100%",
+
+    "@media (max-width:700px)": {},
+  };
+});
+
+export const StyledLimitPriceBody = styled(Card.Body)({
+  padding: "10px 10px",
+  alignItems: "center",
+  position: "relative",
+  input: {
+    textAlign: "right",
+  },
+});
+
+export const StyledResetLimitButton = styled(Components.ResetLimitButton)({
+  position: "absolute",
+  top: "0",
+  right: "0",
+  zIndex: 1,
+});
+
+export const StyledLimitPriceLabel = styled(Styles.StyledRowFlex)({
+  width: "auto",
+  minHeight: 24,
+});
+
+export const StyledSubmitButtonContainer = styled(Styles.StyledRowFlex)({
+  button: {
+    width: "100%",
+  },
+});
+
+export const StyledModalHeaderClose = styled("button")(({ theme }) => {
+  const darkMode = baseStyles(theme).darkMode;
+
+  return {
+    margin: 0,
+    marginLeft: "auto",
+    background: "transparent",
+    padding: 0,
+    border: "unset",
+    width: 48,
+    height: 48,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    svg: {
+      color: darkMode ? "#f4eeff" : "#1fc7d4",
+      width: 20,
+      height: 20,
+    },
+    "&:hover": {
+      opacity: 0.8,
+    },
+  };
+});
+
+export const StyledModalHeader = styled(Styles.StyledRowFlex)<{ withTitle: number }>(({ theme, withTitle }) => {
+  const darkMode = baseStyles(theme).darkMode;
+
+  return {
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: !withTitle ? "transparent" : darkMode ? "#3B394D" : "linear-gradient(111.68deg,#f2ecf2,#e8f2f6)",
+    padding: "12px 24px",
+    paddingBottom: !withTitle ? "0" : "12px",
+    borderBottom: !withTitle ? "1px solid transparent" : darkMode ? "1px solid #383241" : "1px solid #e7e3eb",
+  };
+});
+
+export const StyledSwapModalContent = styled(Styles.StyledColumnFlex)<{ style: CSSProperties }>(({ style }) => ({
+  padding: "0px 24px 24px 24px",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: 1,
+  overflowY: "auto",
+  ...style,
+}));
+export const StyledModalHeaderTitle = styled(Typography)(({ theme }) => {
+  const darkMode = baseStyles(theme).darkMode;
+  return {
+    fontSize: 20,
+    fontWeight: 600,
+    color: darkMode ? "#f4eeff" : "#280d5f",
+  };
+});
+
+export const StyledBody = styled(Styles.StyledColumnFlex)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    padding: "15px 20px 20px 20px",
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16,
+    alignItems: "center",
+    gap: 15,
+    backgroundColor: styles.darkMode ? "#20201D" : "#EFD9C7",
+  };
+});
+
+export const StyledButtonTab = styled("button")<{ selected?: boolean }>(({ selected, theme }) => {
+  const styles = baseStyles(theme);
+
+  let color;
+
+  if (styles.darkMode) {
+    color = selected ? "#DE7F3B" : "#767676";
+  } else {
+    color = selected ? "#DE7F3B" : "#866C65";
+  }
+
+  return {
+    color: color,
+    backgroundColor: "inherit",
+    border: "none",
+    padding: "5px",
+    cursor: "pointer",
+    outline: "none",
+    fontSize: 16,
+    fontWeight: 700,
+  };
+});
+
+export const StyledLine = styled(Box)(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    height: "1px",
+    backgroundColor: styles.darkMode ? "#FBF4EF" : "#D5BAA5",
+    width: "95%",
+    margin: "0 auto",
+  };
+});
diff --git a/packages/tradingpost/src/types.ts b/packages/tradingpost/src/types.ts
new file mode 100644
index 000000000..2cd7853f8
--- /dev/null
+++ b/packages/tradingpost/src/types.ts
@@ -0,0 +1,6 @@
+export interface TradeStatCardProps {
+  title: string;
+  value: string;
+  editable?: boolean;
+  opacity?: number;
+}
diff --git a/packages/tradingpost/transform-svg.ts b/packages/tradingpost/transform-svg.ts
new file mode 100644
index 000000000..94c4e038c
--- /dev/null
+++ b/packages/tradingpost/transform-svg.ts
@@ -0,0 +1,12 @@
+import { execSync } from 'child_process';
+import * as path from 'path';
+import * as fs from 'fs';
+
+const svgDir = path.join(__dirname, 'src', 'assets');
+const outputDir = path.join(__dirname, 'src', 'assets', 'components');
+
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+execSync(`npx @svgr/cli --typescript --out-dir ${outputDir} ${svgDir}`);
diff --git a/packages/tradingpost/tsconfig.json b/packages/tradingpost/tsconfig.json
new file mode 100644
index 000000000..6bb1a2eba
--- /dev/null
+++ b/packages/tradingpost/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "commonjs",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "declaration": true,
+  },
+  "include": ["./src"]
+}