From 12beea8f810d940f029d84f47c6a76a0a6771cb1 Mon Sep 17 00:00:00 2001
From: jtpark <pjt0014@gmail.com>
Date: Thu, 17 Aug 2023 17:32:27 +0900
Subject: [PATCH] feat: Develop swap pages components

---
 .../components/common/button/Button.spec.tsx  |   2 +-
 .../components/common/button/Button.styles.ts |   2 +
 .../src/components/common/button/Button.tsx   |   1 +
 .../src/components/common/icons/IconLink.tsx  |  19 ++
 .../src/components/common/icons/IconNote.tsx  |  16 +-
 .../components/common/icons/IconRouter.tsx    |  17 ++
 .../common/icons/IconStrokeArrowDown.tsx      |   9 +-
 .../common/icons/IconStrokeArrowUp.tsx        |   9 +-
 .../components/common/icons/IconVector.tsx    |  20 ++
 .../common/tooltip/Tooltip.styles.ts          |   2 +-
 .../src/components/common/tooltip/Tooltip.tsx |   1 +
 .../SwapButtonTooltip.spec.tsx                |  23 ++
 .../SwapButtonTooltip.stories.tsx             |  44 ++++
 .../SwapButtonTooltip.styles.ts               |  20 ++
 .../swap-button-tooltip/SwapButtonTooltip.tsx |  38 ++++
 .../SwapCardAutoRouter.spec.tsx               |  47 ++++
 .../SwapCardAutoRouter.stories.tsx            |  62 ++++++
 .../SwapCardAutoRouter.styles.ts              | 103 +++++++++
 .../SwapCardAutoRouter.tsx                    | 115 ++++++++++
 .../SwapCardContentDetail.spec.tsx            |  51 +++++
 .../SwapCardContentDetail.stories.tsx         |  62 ++++++
 .../SwapCardContentDetail.styles.ts           | 208 ++++++++++++++++++
 .../SwapCardContentDetail.tsx                 |  82 +++++++
 .../SwapCardContent.spec.tsx                  |  51 +++++
 .../SwapCardContent.stories.tsx               |  66 ++++++
 .../SwapCardContent.styles.ts                 | 104 +++++++++
 .../swap-card-content/SwapCardContent.tsx     | 114 ++++++++++
 .../SwapCardFeeInfo.spec.tsx                  |  23 ++
 .../SwapCardFeeInfo.stories.tsx               |  38 ++++
 .../SwapCardFeeInfo.styles.ts                 | 155 +++++++++++++
 .../swap-card-fee-info/SwapCardFeeInfo.tsx    |  56 +++++
 .../swap-card-header/SwapCardHeader.spec.tsx  |  18 ++
 .../SwapCardHeader.stories.tsx                |  32 +++
 .../swap-card-header/SwapCardHeader.styles.ts |  27 +++
 .../swap/swap-card-header/SwapCardHeader.tsx  |  18 ++
 .../swap/swap-card/SwapCard.spec.tsx          |  57 +++++
 .../swap/swap-card/SwapCard.stories.tsx       |  72 ++++++
 .../swap/swap-card/SwapCard.styles.ts         |  32 +++
 .../components/swap/swap-card/SwapCard.tsx    | 124 +++++++++++
 .../swap-liquidity/SwapLiquidity.spec.tsx     |  21 ++
 .../swap-liquidity/SwapLiquidity.stories.tsx  |  36 +++
 .../swap-liquidity/SwapLiquidity.styles.ts    | 147 +++++++++++++
 .../swap/swap-liquidity/SwapLiquidity.tsx     |  76 +++++++
 .../src/components/swap/swap/Swap.styles.ts   |   6 -
 .../web/src/components/swap/swap/Swap.tsx     |   8 -
 packages/web/src/constants/theme.constant.ts  |   7 +
 .../swap-container/SwapContainer.tsx          |  90 +++++++-
 .../SwapLiquidityContainer.tsx                |  51 +++++
 .../layouts/swap-layout/SwapLayout.styles.ts  |  87 ++++++--
 .../src/layouts/swap-layout/SwapLayout.tsx    |  28 ++-
 packages/web/src/pages/swap.tsx               |   2 +
 packages/web/src/styles/ThemeTypes.ts         |   2 +
 52 files changed, 2442 insertions(+), 59 deletions(-)
 create mode 100644 packages/web/src/components/common/icons/IconLink.tsx
 create mode 100644 packages/web/src/components/common/icons/IconRouter.tsx
 create mode 100644 packages/web/src/components/common/icons/IconVector.tsx
 create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
 create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-card/SwapCard.tsx
 create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx
 create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
 create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
 create mode 100644 packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx
 delete mode 100644 packages/web/src/components/swap/swap/Swap.styles.ts
 delete mode 100644 packages/web/src/components/swap/swap/Swap.tsx
 create mode 100644 packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx

diff --git a/packages/web/src/components/common/button/Button.spec.tsx b/packages/web/src/components/common/button/Button.spec.tsx
index d77e818c6..c561990e7 100644
--- a/packages/web/src/components/common/button/Button.spec.tsx
+++ b/packages/web/src/components/common/button/Button.spec.tsx
@@ -36,7 +36,7 @@ describe("Button Component", () => {
               height: 50,
               justify: "space-between",
               padding: "0px 10px",
-              textColor: "",
+              textColor: "text01",
             }}
           />
         </GnoswapThemeProvider>
diff --git a/packages/web/src/components/common/button/Button.styles.ts b/packages/web/src/components/common/button/Button.styles.ts
index b755b9bcd..2d276982c 100644
--- a/packages/web/src/components/common/button/Button.styles.ts
+++ b/packages/web/src/components/common/button/Button.styles.ts
@@ -40,6 +40,7 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
   transition: background-color 0.3s ease;
   background-color: ${({ hierarchy, bgColor, theme }) => {
     if (hierarchy === ButtonHierarchy.Primary) return theme.color.background04;
+    if (hierarchy === ButtonHierarchy.Gray) return theme.color.background17;
     if (hierarchy === ButtonHierarchy.Dark) return theme.color.background05;
     return theme.color[bgColor ?? "background04"];
   }};
@@ -80,6 +81,7 @@ export const StyledText = styled.span<ButtonStyleProps>`
   ${({ fontType }) => fonts[fontType ?? "body9"]};
   color: ${({ theme, textColor, hierarchy }) => {
     if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;
+    if (hierarchy === ButtonHierarchy.Gray) return theme.color.text20;
     return theme.color[textColor ?? "text03"];
   }};
 `;
diff --git a/packages/web/src/components/common/button/Button.tsx b/packages/web/src/components/common/button/Button.tsx
index b28570600..285b7391b 100644
--- a/packages/web/src/components/common/button/Button.tsx
+++ b/packages/web/src/components/common/button/Button.tsx
@@ -12,6 +12,7 @@ interface ButtonProps {
 
 export enum ButtonHierarchy {
   Primary = "Primary",
+  Gray = "Gray",
   Dark = "Dark",
 }
 
diff --git a/packages/web/src/components/common/icons/IconLink.tsx b/packages/web/src/components/common/icons/IconLink.tsx
new file mode 100644
index 000000000..61036c8a6
--- /dev/null
+++ b/packages/web/src/components/common/icons/IconLink.tsx
@@ -0,0 +1,19 @@
+const IconLink = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 15H7C5.35 15 4 13.65 4 12C4 10.35 5.35 9 7 9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15ZM17 7H13V9H17C18.65 9 20 10.35 20 12C20 13.65 18.65 15 17 15H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7ZM16 11H8V13H16V11Z"
+      fill="#90A2C0"
+    />
+  </svg>
+);
+
+export default IconLink;
diff --git a/packages/web/src/components/common/icons/IconNote.tsx b/packages/web/src/components/common/icons/IconNote.tsx
index 327505a11..af947fa1d 100644
--- a/packages/web/src/components/common/icons/IconNote.tsx
+++ b/packages/web/src/components/common/icons/IconNote.tsx
@@ -1,17 +1,17 @@
-const Icon = ({ className }: { className?: string }) => (
+const IconNote = ({ className }: { className?: string }) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     className={className}
   >
     <path
-      d="M19 5V14H14V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H15L21 15V5C21 3.9 20.1 3 19 3ZM12 14H7V12H12V14ZM17 10H7V8H17V10Z"
-      fill="white"
+      d="M12.6667 3.33333V9.33333H9.33333V12.6667H3.33333V3.33333H12.6667ZM12.6667 2H3.33333C2.6 2 2 2.6 2 3.33333V12.6667C2 13.4 2.6 14 3.33333 14H10L14 10V3.33333C14 2.6 13.4 2 12.6667 2ZM8 9.33333H4.66667V8H8V9.33333ZM11.3333 6.66667H4.66667V5.33333H11.3333V6.66667Z"
+      fill="#90A2C0"
     />
   </svg>
 );
 
-export default Icon;
+export default IconNote;
diff --git a/packages/web/src/components/common/icons/IconRouter.tsx b/packages/web/src/components/common/icons/IconRouter.tsx
new file mode 100644
index 000000000..cddc63ca2
--- /dev/null
+++ b/packages/web/src/components/common/icons/IconRouter.tsx
@@ -0,0 +1,17 @@
+const IconRouter = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M13.0007 6.3335C12.314 6.3335 11.734 6.74683 11.474 7.3335H9.52732C9.26732 6.74683 8.68732 6.3335 8.00065 6.3335C7.31398 6.3335 6.73398 6.74683 6.47398 7.3335H4.52732C4.26732 6.74683 3.68732 6.3335 3.00065 6.3335C2.08065 6.3335 1.33398 7.08016 1.33398 8.00016C1.33398 8.92016 2.08065 9.66683 3.00065 9.66683C3.68732 9.66683 4.26732 9.2535 4.52732 8.66683H6.47398C6.73398 9.2535 7.31398 9.66683 8.00065 9.66683C8.68732 9.66683 9.26732 9.2535 9.52732 8.66683H11.474C11.734 9.2535 12.314 9.66683 13.0007 9.66683C13.9207 9.66683 14.6673 8.92016 14.6673 8.00016C14.6673 7.08016 13.9207 6.3335 13.0007 6.3335Z"
+      fill="#0059FF"
+    />
+  </svg>
+);
+
+export default IconRouter;
diff --git a/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx b/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx
index 14137dbb1..c794aebeb 100644
--- a/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx
+++ b/packages/web/src/components/common/icons/IconStrokeArrowDown.tsx
@@ -1,4 +1,10 @@
-const IconStrokeArrowDown = ({ className }: { className?: string }) => (
+const IconStrokeArrowDown = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => (
   <svg
     width="24"
     height="24"
@@ -6,6 +12,7 @@ const IconStrokeArrowDown = ({ className }: { className?: string }) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    onClick={onClick}
   >
     <path
       d="M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z"
diff --git a/packages/web/src/components/common/icons/IconStrokeArrowUp.tsx b/packages/web/src/components/common/icons/IconStrokeArrowUp.tsx
index 604ed06e1..eb1900849 100644
--- a/packages/web/src/components/common/icons/IconStrokeArrowUp.tsx
+++ b/packages/web/src/components/common/icons/IconStrokeArrowUp.tsx
@@ -1,4 +1,10 @@
-const IconStrokeArrowUp = ({ className }: { className?: string }) => (
+const IconStrokeArrowUp = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => (
   <svg
     width="24"
     height="24"
@@ -6,6 +12,7 @@ const IconStrokeArrowUp = ({ className }: { className?: string }) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    onClick={onClick}
   >
     <path
       d="M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z"
diff --git a/packages/web/src/components/common/icons/IconVector.tsx b/packages/web/src/components/common/icons/IconVector.tsx
new file mode 100644
index 000000000..685c284b8
--- /dev/null
+++ b/packages/web/src/components/common/icons/IconVector.tsx
@@ -0,0 +1,20 @@
+const IconVector = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="34"
+    height="2"
+    viewBox="0 0 34 2"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M0 1H33.6667"
+      stroke="#C3D2EA"
+      stroke-width="2"
+      stroke-miterlimit="3.8637"
+      stroke-dasharray="1 4"
+    />
+  </svg>
+);
+
+export default IconVector;
diff --git a/packages/web/src/components/common/tooltip/Tooltip.styles.ts b/packages/web/src/components/common/tooltip/Tooltip.styles.ts
index 2a058b28f..b63ef1f1a 100644
--- a/packages/web/src/components/common/tooltip/Tooltip.styles.ts
+++ b/packages/web/src/components/common/tooltip/Tooltip.styles.ts
@@ -7,5 +7,5 @@ export const Content = styled.div`
   border-radius: 8px;
   box-sizing: border-box;
   width: max-content;
-  max-width: calc(100vw - 10px);
+  //   max-width: calc(100vw - 10px);
 `;
diff --git a/packages/web/src/components/common/tooltip/Tooltip.tsx b/packages/web/src/components/common/tooltip/Tooltip.tsx
index 1ac8a732a..ee8180455 100644
--- a/packages/web/src/components/common/tooltip/Tooltip.tsx
+++ b/packages/web/src/components/common/tooltip/Tooltip.tsx
@@ -91,6 +91,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
         data-state={open ? "open" : "closed"}
         style={{
           display: "flex",
+          width: "100%",
         }}
       >
         {children}
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
new file mode 100644
index 000000000..689360aff
--- /dev/null
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapButtonTooltip from "./SwapButtonTooltip";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import Button from "@components/common/button/Button";
+
+describe("SwapButtonTooltip Component", () => {
+  it("SwapButtonTooltip render", () => {
+    const mockProps = {
+      swapGasInfo: dummySwapGasInfo,
+      children: <Button style={{ width: "400" }} />,
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapButtonTooltip {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
new file mode 100644
index 000000000..60dfa7c57
--- /dev/null
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapButtonTooltip from "./SwapButtonTooltip";
+import { css, Theme } from "@emotion/react";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import Button, { ButtonHierarchy } from "@components/common/button/Button";
+
+export default {
+  title: "swap/SwapButtonTooltip",
+  component: SwapButtonTooltip,
+} as ComponentMeta<typeof SwapButtonTooltip>;
+
+const Template: ComponentStory<typeof SwapButtonTooltip> = args => (
+  <div css={wrapper}>
+    <div>
+      <SwapButtonTooltip {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  swapGasInfo: dummySwapGasInfo,
+  children: (
+    <Button
+      text="Swap"
+      style={{
+        width: 450,
+        height: 57,
+        fontType: "body7",
+        hierarchy: ButtonHierarchy.Primary,
+      }}
+      onClick={() => {}}
+    />
+  ),
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 200px;
+`;
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
new file mode 100644
index 000000000..73f0279a0
--- /dev/null
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import mixins from "@styles/mixins";
+import { fonts } from "@constants/font.constant";
+
+export const SwapButtonTooltipWrap = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 300px;
+  height: 123px
+  padding: 16px;
+  gap: 8px;
+  ${fonts.body12};
+  color: ${({ theme }) => theme.color.text15};
+  background-color: ${({ theme }) => theme.color.background14};
+
+  .tooltip-list {
+    ${mixins.flexbox("row", "flex-start", "space-between")};
+    width: 100%;
+    padding: 4px 0px;
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
new file mode 100644
index 000000000..195653600
--- /dev/null
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
+import { SwapGasInfo } from "@containers/swap-container/SwapContainer";
+import Tooltip from "@components/common/tooltip/Tooltip";
+
+interface WalletBalanceDetailInfoProps {
+  swapGasInfo: SwapGasInfo;
+  children: React.ReactNode;
+}
+
+const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
+  swapGasInfo,
+  children,
+}) => {
+  const TooltipFloatingContent = (
+    <SwapButtonTooltipWrap>
+      <div className="tooltip-list">
+        <span>Price Impact</span>
+        <span>{swapGasInfo.gasFee}</span>
+      </div>
+      <div className="tooltip-list">
+        <span>Min. Received</span>
+        <span>{swapGasInfo.minReceived}</span>
+      </div>
+      <div className="tooltip-list">
+        <span>Gas Fee</span>
+        <span>{swapGasInfo.gasFee}</span>
+      </div>
+    </SwapButtonTooltipWrap>
+  );
+
+  return (
+    <Tooltip placement="top" FloatingContent={TooltipFloatingContent}>
+      {children}
+    </Tooltip>
+  );
+};
+export default SwapButtonTooltip;
diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx
new file mode 100644
index 000000000..2e63fec5d
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.spec.tsx
@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardAutoRouter from "./SwapCardAutoRouter";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
+
+describe("SwapCard Component", () => {
+  it("SwapCard render", () => {
+    const mockProps = {
+      autoRouterInfo: dummyAutoRouterInfo,
+      from: {
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      },
+      to: {
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      },
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardAutoRouter {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx
new file mode 100644
index 000000000..9e16fd0bf
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCardAutoRouter from "./SwapCardAutoRouter";
+import { css, Theme } from "@emotion/react";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { action } from "@storybook/addon-actions";
+import { DEVICE_TYPE } from "@styles/media";
+
+export default {
+  title: "swap/SwapCardAutoRouter",
+  component: SwapCardAutoRouter,
+} as ComponentMeta<typeof SwapCardAutoRouter>;
+
+const Template: ComponentStory<typeof SwapCardAutoRouter> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <SwapCardAutoRouter {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  autoRouterInfo: dummyAutoRouterInfo,
+  from: {
+    token: "USDCoin",
+    symbol: "USDC",
+    amount: "121",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+  },
+  to: {
+    token: "HEX",
+    symbol: "HEX",
+    amount: "5000",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  },
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts
new file mode 100644
index 000000000..91681142d
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.styles.ts
@@ -0,0 +1,103 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const AutoRouterWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  padding: 12px;
+  margin: 0px 16px 16px 16px;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  .row {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    gap: 4px;
+    align-self: stretch;
+    .token-logo {
+      width: 24px;
+      height: 24px;
+    }
+    .left-box {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      height: 28px;
+      padding: 0px 4px 0px 2px;
+      gap: 2px;
+      border-radius: 4px;
+      border: 1px solid ${({ theme }) => theme.color.border02};
+      background: ${({ theme }) => theme.color.background02};
+
+      .left-badge {
+        ${mixins.flexbox("row", "center", "flex-end")};
+        height: 24px;
+        padding: 0px 6px;
+        gap: 4px;
+        border-radius: 4px;
+        ${fonts.p3};
+        color: ${({ theme }) => theme.color.text03};
+        border: 1px solid ${({ theme }) => theme.color.border08};
+        background: ${({ theme }) => theme.color.background05};
+      }
+      span {
+        ${fonts.p3};
+        color: ${({ theme }) => theme.color.text03};
+      }
+    }
+
+    .vector {
+      ${mixins.flexbox("row", "flex-start", "flex-start")};
+    }
+    .pair-fee {
+      ${mixins.flexbox("row", "center", "center")};
+      height: 28px;
+      padding: 0px 8px;
+      gap: 2px;
+      border-radius: 4px;
+      border: 1px solid ${({ theme }) => theme.color.border02};
+      background: ${({ theme }) => theme.color.background02};
+      h1 {
+        ${fonts.p3};
+        color: ${({ theme }) => theme.color.text03};
+      }
+      .coin-logo {
+        ${mixins.flexbox("row", "flex-start", "flex-start")};
+
+        .pair-logo {
+          width: 16px;
+          height: 16px;
+        }
+        .from {
+          ${mixins.flexbox("row", "center", "center")};
+          background-color: ${({ theme }) => theme.color.point};
+          width: 16px;
+          height: 16px;
+          border-radius: 100%;
+        }
+        .to {
+          ${mixins.flexbox("row", "center", "center")};
+          background-color: ${({ theme }) => theme.color.icon09};
+          width: 16px;
+          height: 16px;
+          border-radius: 100%;
+          margin-left: -6px;
+        }
+      }
+    }
+  }
+  .gas-description {
+    ${fonts.body12}
+    ${media.mobile} {
+      ${fonts.p4}
+    }
+    color: ${({ theme }) => theme.color.text04};
+  }
+`;
+
+export const SwapDivider = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  height: 1px;
+  align-self: stretch;
+  background: ${({ theme }) => theme.color.border02};
+`;
diff --git a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
new file mode 100644
index 000000000..06c25b64d
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { AutoRouterWrapper } from "./SwapCardAutoRouter.styles";
+import { TokenInfo } from "../swap-card/SwapCard";
+import IconVector from "@components/common/icons/IconVector";
+import { AutoRouterInfo } from "@containers/swap-container/SwapContainer";
+import IconLogoPrimary from "@components/common/icons/IconLogoPrimary";
+
+interface ContentProps {
+  to: TokenInfo;
+  from: TokenInfo;
+  autoRouterInfo: AutoRouterInfo;
+}
+
+const SwapCardAutoRouter: React.FC<ContentProps> = ({
+  to,
+  from,
+  autoRouterInfo,
+}) => {
+  return (
+    <AutoRouterWrapper>
+      <div className="row">
+        <img src={from.tokenLogo} alt="token logo" className="token-logo" />
+        <div className="left-box">
+          <div className="left-badge">V1</div>
+          <span>{autoRouterInfo.v1fee[0]}</span>
+        </div>
+        <IconVector className="vector" />
+        <div className="pair-fee">
+          <div className="coin-logo">
+            <div className="from">
+              <img src={from.tokenLogo} alt="pair-logo" className="pair-logo" />
+            </div>
+            <div className="to">
+              <img src={to.tokenLogo} alt="pair-logo" className="pair-logo" />
+            </div>
+          </div>
+          <h1>{autoRouterInfo.v1fee[1]}</h1>
+        </div>
+        <IconVector className="vector" />
+        <div className="pair-fee">
+          <div className="coin-logo">
+            <div className="from">
+              <img src={from.tokenLogo} alt="pair-logo" className="pair-logo" />
+            </div>
+            <div className="to">
+              <IconLogoPrimary className="pair-logo" />
+            </div>
+          </div>
+          <h1>{autoRouterInfo.v1fee[2]}</h1>
+        </div>
+        <IconVector className="vector" />
+        <IconLogoPrimary className="token-logo" />
+      </div>
+
+      <div className="row">
+        <img src={from.tokenLogo} alt="token logo" className="token-logo" />
+        <div className="left-box">
+          <div className="left-badge">V1</div>
+          <span>{autoRouterInfo.v2fee[0]}</span>
+        </div>
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <div className="pair-fee">
+          <div className="coin-logo">
+            <div className="from">
+              <img src={from.tokenLogo} alt="pair-logo" className="pair-logo" />
+            </div>
+            <div className="to">
+              <IconLogoPrimary className="pair-logo" />
+            </div>
+          </div>
+          <h1>{autoRouterInfo.v2fee[1]}</h1>
+        </div>
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconLogoPrimary className="token-logo" />
+      </div>
+
+      <div className="row">
+        <img src={from.tokenLogo} alt="token logo" className="token-logo" />
+        <div className="left-box">
+          <div className="left-badge">V1</div>
+          <span>{autoRouterInfo.v3fee[0]}</span>
+        </div>
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <div className="pair-fee">
+          <div className="coin-logo">
+            <div className="from">
+              <img src={from.tokenLogo} alt="pair-logo" className="pair-logo" />
+            </div>
+            <div className="to">
+              <IconLogoPrimary className="pair-logo" />
+            </div>
+          </div>
+          <h1>{autoRouterInfo.v3fee[1]}</h1>
+        </div>
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconVector className="vector" />
+        <IconLogoPrimary className="token-logo" />
+      </div>
+      <p className="gas-description">
+        Best price route costs ~$0.58 in gas. This route optimizes your total
+        output by considering split routes, multiple hops, and the gas cost of
+        each step.
+      </p>
+    </AutoRouterWrapper>
+  );
+};
+
+export default SwapCardAutoRouter;
diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx
new file mode 100644
index 000000000..be4290436
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.spec.tsx
@@ -0,0 +1,51 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardContentDetail from "./SwapCardContentDetail";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+
+describe("SwapCardContentDetail Component", () => {
+  it("SwapCardContentDetail render", () => {
+    const mockProps = {
+      autoRouter: false,
+      showAutoRouter: () => null,
+      swapGasInfo: dummySwapGasInfo,
+      swapInfo: true,
+      showSwapInfo: () => null,
+      autoRouterInfo: dummyAutoRouterInfo,
+      from: {
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      },
+      to: {
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      },
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardContentDetail {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx
new file mode 100644
index 000000000..a39ac149d
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCardContentDetail from "./SwapCardContentDetail";
+import { css, Theme } from "@emotion/react";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "swap/SwapCardContentDetail",
+  component: SwapCardContentDetail,
+} as ComponentMeta<typeof SwapCardContentDetail>;
+
+const Template: ComponentStory<typeof SwapCardContentDetail> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <SwapCardContentDetail {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  autoRouter: true,
+  showAutoRouter: action("onClick"),
+  swapGasInfo: dummySwapGasInfo,
+  swapInfo: true,
+  showSwapInfo: action("onClick"),
+  from: {
+    token: "USDCoin",
+    symbol: "USDC",
+    amount: "121",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+  },
+  to: {
+    token: "HEX",
+    symbol: "HEX",
+    amount: "5000",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  },
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.styles.ts b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.styles.ts
new file mode 100644
index 000000000..00f21ba01
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.styles.ts
@@ -0,0 +1,208 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const DetailWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.color.background01};
+  border: 1px solid ${({ theme }) => theme.color.border02};
+
+  .exchange-section {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    width: 100%;
+    padding: 16px;
+    gap: 16px;
+    align-self: stretch;
+
+    ${media.mobile} {
+      padding: 12px;
+    }
+    .exchange-container {
+      ${mixins.flexbox("row", "center", "space-between")};
+      width: 100%;
+      align-self: stretch;
+      ${fonts.body12};
+      color: ${({ theme }) => theme.color.text03};
+      .ocin-info {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        gap: 4px;
+        .exchange-price {
+          color: ${({ theme }) => theme.color.text04};
+        }
+        .icon-info {
+          width: 16px;
+          height: 16px;
+          * {
+            fill: ${({ theme }) => theme.color.icon05};
+          }
+        }
+      }
+      .price-info {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        color: ${({ theme }) => theme.color.text04};
+        ${fonts.body12};
+        gap: 4px;
+        .price-icon {
+          cursor: pointer;
+          width: 16px;
+          height: 16px;
+          * {
+            fill: ${({ theme }) => theme.color.icon03};
+          }
+        }
+      }
+    }
+  }
+  .hidden-list {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    width: 100%;
+    padding: 16px;
+    gap: 16px;
+    border-top: 1px solid ${({ theme }) => theme.color.border02};
+    align-self: stretch;
+    ${fonts.body12};
+    ${media.mobile} {
+      ${fonts.p2};
+    }
+    ${media.mobile} {
+      padding: 12px;
+      gap: 8px;
+      flex-direction: column;
+    }
+
+    .gray-text {
+      color: ${({ theme }) => theme.color.text04};
+    }
+    .white-text {
+      color: ${({ theme }) => theme.color.text03};
+    }
+    .received,
+    .gas-fee,
+    .price-impact {
+      ${mixins.flexbox("row", "flex-start", "space-between")};
+      width: 100%;
+      align-self: stretch;
+    }
+    .auto-router {
+      ${mixins.flexbox("row", "center", "space-between")};
+      width: 100%;
+      align-self: stretch;
+      .auto-wrapper {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        gap: 4px;
+        h1 {
+          color: ${({ theme }) => theme.color.text07};
+        }
+      }
+      .router-icon {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        * {
+          fill: ${({ theme }) => theme.color.icon03};
+        }
+      }
+    }
+  }
+  .router-box {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    padding: 12px;
+    margin: 0px 16px 16px 16px;
+    gap: 12px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.color.border02};
+    .row {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      gap: 4px;
+      align-self: stretch;
+      .token-logo {
+        width: 24px;
+        height: 24px;
+      }
+      .left-box {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        height: 28px;
+        padding: 0px 4px 0px 2px;
+        gap: 2px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => theme.color.border02};
+        background: ${({ theme }) => theme.color.background02};
+
+        .left-badge {
+          ${mixins.flexbox("row", "center", "flex-end")};
+          height: 24px;
+          padding: 0px 6px;
+          gap: 4px;
+          border-radius: 4px;
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+          border: 1px solid ${({ theme }) => theme.color.border08};
+          background: ${({ theme }) => theme.color.background05};
+        }
+        span {
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+        }
+      }
+
+      .vector {
+        ${mixins.flexbox("row", "flex-start", "flex-start")};
+      }
+      .pair-fee {
+        ${mixins.flexbox("row", "center", "center")};
+        height: 28px;
+        padding: 0px 8px;
+        gap: 2px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => theme.color.border02};
+        background: ${({ theme }) => theme.color.background02};
+        h1 {
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+        }
+        .coin-logo {
+          ${mixins.flexbox("row", "flex-start", "flex-start")};
+
+          .pair-logo {
+            width: 16px;
+            height: 16px;
+          }
+          .from {
+            ${mixins.flexbox("row", "center", "center")};
+            background-color: ${({ theme }) => theme.color.point};
+            width: 16px;
+            height: 16px;
+            border-radius: 100%;
+          }
+          .to {
+            ${mixins.flexbox("row", "center", "center")};
+            background-color: ${({ theme }) => theme.color.icon09};
+            width: 16px;
+            height: 16px;
+            border-radius: 100%;
+            margin-left: -6px;
+          }
+        }
+      }
+    }
+    .gas-description {
+      ${fonts.body12}
+      ${media.mobile} {
+        ${fonts.p4}
+      }
+      color: ${({ theme }) => theme.color.text04};
+    }
+  }
+`;
+
+export const SwapDivider = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  height: 1px;
+  align-self: stretch;
+  background: ${({ theme }) => theme.color.border02};
+`;
diff --git a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx
new file mode 100644
index 000000000..93d13c4bd
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { DetailWrapper } from "./SwapCardContentDetail.styles";
+import { TokenInfo } from "../swap-card/SwapCard";
+import IconInfo from "@components/common/icons/IconInfo";
+import IconNote from "@components/common/icons/IconNote";
+import IconStrokeArrowDown from "@components/common/icons/IconStrokeArrowDown";
+import IconStrokeArrowUp from "@components/common/icons/IconStrokeArrowUp";
+import SwapCardFeeInfo from "../swap-card-fee-info/SwapCardFeeInfo";
+import SwapCardAutoRouter from "../swap-card-auto-router/SwapCardAutoRouter";
+import {
+  AutoRouterInfo,
+  SwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+
+interface ContentProps {
+  to: TokenInfo;
+  from: TokenInfo;
+  swapInfo: boolean;
+  showSwapInfo: () => void;
+  autoRouter: boolean;
+  showAutoRouter: () => void;
+  swapGasInfo: SwapGasInfo;
+  autoRouterInfo: AutoRouterInfo;
+}
+
+const SwapCardContentDetail: React.FC<ContentProps> = ({
+  to,
+  from,
+  swapInfo,
+  showSwapInfo,
+  autoRouter,
+  showAutoRouter,
+  swapGasInfo,
+  autoRouterInfo,
+}) => {
+  return (
+    <DetailWrapper>
+      <div className="exchange-section">
+        <div className="exchange-container">
+          <div className="ocin-info">
+            <IconInfo className="icon-info" />
+            <span>
+              {from.amount} {from.symbol} = {from.gnosExchangePrice} GNOS
+            </span>
+            <span className="exchange-price">{from.usdExchangePrice}</span>
+          </div>
+          <div className="price-info">
+            <IconNote className="price-icon" />
+            <span>{swapGasInfo.usdExchangeGasFee}</span>
+            {swapInfo ? (
+              <IconStrokeArrowDown
+                className="price-icon"
+                onClick={showSwapInfo}
+              />
+            ) : (
+              <IconStrokeArrowUp
+                className="price-icon"
+                onClick={showSwapInfo}
+              />
+            )}
+          </div>
+        </div>
+        {swapInfo && (
+          <SwapCardFeeInfo
+            autoRouter={autoRouter}
+            showAutoRouter={showAutoRouter}
+            swapGasInfo={swapGasInfo}
+          />
+        )}
+        {autoRouter && (
+          <SwapCardAutoRouter
+            from={from}
+            to={to}
+            autoRouterInfo={autoRouterInfo}
+          />
+        )}
+      </div>
+    </DetailWrapper>
+  );
+};
+
+export default SwapCardContentDetail;
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx b/packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx
new file mode 100644
index 000000000..b04397bbb
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx
@@ -0,0 +1,51 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardContent from "./SwapCardContent";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+
+describe("SwapCardContent Component", () => {
+  it("SwapCardContent render", () => {
+    const mockProps = {
+      autoRouter: false,
+      showAutoRouter: () => null,
+      swapGasInfo: dummySwapGasInfo,
+      swapInfo: true,
+      showSwapInfo: () => null,
+      autoRouterInfo: dummyAutoRouterInfo,
+      from: {
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      },
+      to: {
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      },
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardContent {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx b/packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx
new file mode 100644
index 000000000..50d25de68
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCardContent from "./SwapCardContent";
+import { css, Theme } from "@emotion/react";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "swap/SwapCardContent",
+  component: SwapCardContent,
+} as ComponentMeta<typeof SwapCardContent>;
+
+const Template: ComponentStory<typeof SwapCardContent> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <SwapCardContent {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  autoRouter: true,
+  showAutoRouter: action("onClick"),
+  swapGasInfo: dummySwapGasInfo,
+  swapInfo: true,
+  showSwapInfo: action("onClick"),
+  autoRouterInfo: dummyAutoRouterInfo,
+  from: {
+    token: "USDCoin",
+    symbol: "USDC",
+    amount: "121",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+  },
+  to: {
+    token: "HEX",
+    symbol: "HEX",
+    amount: "5000",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  },
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts b/packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts
new file mode 100644
index 000000000..e8e4e88c6
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts
@@ -0,0 +1,104 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const ContentWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  gap: 2px;
+  align-self: stretch;
+
+  .first-section {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    position: relative;
+    width: 100%;
+    padding: 16px 24px;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.color.border02};
+    background: ${({ theme }) => theme.color.background01};
+    ${media.mobile} {
+      padding: 12px;
+    }
+  }
+
+  .amount-container {
+    ${mixins.flexbox("row", "center", "space-between")};
+    width: 100%;
+    align-self: stretch;
+    color: ${({ theme }) => theme.color.text02};
+  }
+
+  .amount-text {
+    width: 100%;
+    ${fonts.body1};
+    ${media.mobile} {
+      ${fonts.body5};
+    }
+    color: ${({ theme }) => theme.color.text01};
+  }
+
+  .button-wrapper {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    padding: 4px 6px;
+    gap: 8px;
+  }
+  .amount-info {
+    ${mixins.flexbox("row", "center", "space-between")};
+    width: 100%;
+    align-self: stretch;
+    .price-text,
+    .balance-text {
+      ${fonts.body12};
+      color: ${({ theme }) => theme.color.text10};
+    }
+  }
+
+  .second-section {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    padding: 16px 24px;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${({ theme }) => theme.color.background01};
+    border: 1px solid ${({ theme }) => theme.color.border02};
+    ${media.mobile} {
+      padding: 12px;
+    }
+  }
+  .arrow {
+    ${mixins.flexbox("row", "center", "center")};
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+
+    width: 100%;
+    .shape {
+      ${mixins.flexbox("row", "center", "center")};
+      width: 40px;
+      height: 40px;
+      background-color: ${({ theme }) => theme.color.background01};
+      border: 1px solid ${({ theme }) => theme.color.border02};
+      border-radius: 50%;
+
+      .shape-icon {
+        width: 16px;
+        height: 16px;
+        * {
+          fill: ${({ theme }) => theme.color.icon02};
+        }
+      }
+    }
+  }
+`;
+
+export const SwapDivider = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  height: 1px;
+  align-self: stretch;
+  background: ${({ theme }) => theme.color.border02};
+`;
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx b/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
new file mode 100644
index 000000000..68e7b1da7
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
@@ -0,0 +1,114 @@
+import React, { useCallback, useState } from "react";
+import { ContentWrapper } from "./SwapCardContent.styles";
+import SelectPairButton from "@components/common/select-pair-button/SelectPairButton";
+import { TokenInfo } from "../swap-card/SwapCard";
+import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
+import SwapCardContentDetail from "../swap-card-content-detail/SwapCardContentDetail";
+import {
+  AutoRouterInfo,
+  SwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+
+interface ContentProps {
+  to: TokenInfo;
+  from: TokenInfo;
+  swapInfo: boolean;
+  showSwapInfo: () => void;
+  autoRouter: boolean;
+  showAutoRouter: () => void;
+  swapGasInfo: SwapGasInfo;
+  autoRouterInfo: AutoRouterInfo;
+}
+
+function isAmount(str: string) {
+  const regex = /^\d+(\.\d*)?$/;
+  return regex.test(str);
+}
+
+const SwapCardContent: React.FC<ContentProps> = ({
+  to,
+  from,
+  swapInfo,
+  showSwapInfo,
+  autoRouter,
+  showAutoRouter,
+  swapGasInfo,
+  autoRouterInfo,
+}) => {
+  const [fromAmount, setFromAmount] = useState(from.amount);
+  const [toAmount, setToAmount] = useState(to.amount);
+
+  const onChangeFromAmount = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      if (value !== "" && !isAmount(value)) return;
+      setFromAmount(value);
+    },
+    [],
+  );
+
+  const onChangeToAmount = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      if (value !== "" && !isAmount(value)) return;
+      setToAmount(value);
+    },
+    [],
+  );
+
+  return (
+    <ContentWrapper>
+      <div className="first-section">
+        <div className="amount-container">
+          <input
+            className="amount-text"
+            value={fromAmount}
+            onChange={onChangeFromAmount}
+            placeholder={fromAmount === "" ? "0" : ""}
+          />
+          <div className="button-wrapper">
+            <SelectPairButton disabled token={from} />
+          </div>
+        </div>
+        <div className="amount-info">
+          <span className="price-text">{from.price}</span>
+          <span className="balance-text">Balance : {from.balance}</span>
+        </div>
+        <div className="arrow">
+          <div className="shape">
+            <IconSwapArrowDown className="shape-icon" />
+          </div>
+        </div>
+      </div>
+      <div className="second-section">
+        <div className="amount-container">
+          <input
+            className="amount-text"
+            value={toAmount}
+            onChange={onChangeToAmount}
+            placeholder={toAmount === "" ? "0" : ""}
+          />
+          <div className="button-wrapper">
+            <SelectPairButton disabled token={to} />
+          </div>
+        </div>
+        <div className="amount-info">
+          <span className="price-text">{to.price}</span>
+          <span className="balance-text">Balance : {to.balance}</span>
+        </div>
+      </div>
+      <SwapCardContentDetail
+        to={to}
+        from={from}
+        swapInfo={swapInfo}
+        showSwapInfo={showSwapInfo}
+        autoRouter={autoRouter}
+        showAutoRouter={showAutoRouter}
+        swapGasInfo={swapGasInfo}
+        autoRouterInfo={autoRouterInfo}
+      />
+    </ContentWrapper>
+  );
+};
+
+export default SwapCardContent;
diff --git a/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.spec.tsx b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.spec.tsx
new file mode 100644
index 000000000..6cc16ead2
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.spec.tsx
@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardFeeInfo from "./SwapCardFeeInfo";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+
+describe("SwapCardFeeInfo Component", () => {
+  it("SwapCardFeeInfo render", () => {
+    const mockProps = {
+      autoRouter: false,
+      showAutoRouter: () => null,
+      swapGasInfo: dummySwapGasInfo,
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardFeeInfo {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.stories.tsx b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.stories.tsx
new file mode 100644
index 000000000..f5da7ce78
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.stories.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCardFeeInfo from "./SwapCardFeeInfo";
+import { css, Theme } from "@emotion/react";
+import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "swap/SwapCardFeeInfo",
+  component: SwapCardFeeInfo,
+} as ComponentMeta<typeof SwapCardFeeInfo>;
+
+const Template: ComponentStory<typeof SwapCardFeeInfo> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <SwapCardFeeInfo {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  autoRouter: true,
+  showAutoRouter: action("onClick"),
+  swapGasInfo: dummySwapGasInfo,
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.styles.ts b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.styles.ts
new file mode 100644
index 000000000..ff30e31e1
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.styles.ts
@@ -0,0 +1,155 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const FeeWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  padding: 16px;
+  gap: 16px;
+  border-top: 1px solid ${({ theme }) => theme.color.border02};
+  align-self: stretch;
+  ${fonts.body12};
+  ${media.mobile} {
+    ${fonts.p2};
+  }
+  ${media.mobile} {
+    padding: 12px;
+    gap: 8px;
+    flex-direction: column;
+  }
+
+  .gray-text {
+    color: ${({ theme }) => theme.color.text04};
+  }
+  .white-text {
+    color: ${({ theme }) => theme.color.text03};
+  }
+  .received,
+  .gas-fee,
+  .price-impact {
+    ${mixins.flexbox("row", "flex-start", "space-between")};
+    width: 100%;
+    align-self: stretch;
+  }
+  .auto-router {
+    ${mixins.flexbox("row", "center", "space-between")};
+    width: 100%;
+    align-self: stretch;
+    .auto-wrapper {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      gap: 4px;
+      h1 {
+        color: ${({ theme }) => theme.color.text07};
+      }
+    }
+    .router-icon {
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+      * {
+        fill: ${({ theme }) => theme.color.icon03};
+      }
+    }
+  }
+
+  .router-box {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    padding: 12px;
+    margin: 0px 16px 16px 16px;
+    gap: 12px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.color.border02};
+    .row {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      gap: 4px;
+      align-self: stretch;
+      .token-logo {
+        width: 24px;
+        height: 24px;
+      }
+      .left-box {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        height: 28px;
+        padding: 0px 4px 0px 2px;
+        gap: 2px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => theme.color.border02};
+        background: ${({ theme }) => theme.color.background02};
+
+        .left-badge {
+          ${mixins.flexbox("row", "center", "flex-end")};
+          height: 24px;
+          padding: 0px 6px;
+          gap: 4px;
+          border-radius: 4px;
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+          border: 1px solid ${({ theme }) => theme.color.border08};
+          background: ${({ theme }) => theme.color.background05};
+        }
+        span {
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+        }
+      }
+
+      .vector {
+        ${mixins.flexbox("row", "flex-start", "flex-start")};
+      }
+      .pair-fee {
+        ${mixins.flexbox("row", "center", "center")};
+        height: 28px;
+        padding: 0px 8px;
+        gap: 2px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => theme.color.border02};
+        background: ${({ theme }) => theme.color.background02};
+        h1 {
+          ${fonts.p3};
+          color: ${({ theme }) => theme.color.text03};
+        }
+        .coin-logo {
+          ${mixins.flexbox("row", "flex-start", "flex-start")};
+
+          .pair-logo {
+            width: 16px;
+            height: 16px;
+          }
+          .from {
+            ${mixins.flexbox("row", "center", "center")};
+            background-color: ${({ theme }) => theme.color.point};
+            width: 16px;
+            height: 16px;
+            border-radius: 100%;
+          }
+          .to {
+            ${mixins.flexbox("row", "center", "center")};
+            background-color: ${({ theme }) => theme.color.icon09};
+            width: 16px;
+            height: 16px;
+            border-radius: 100%;
+            margin-left: -6px;
+          }
+        }
+      }
+    }
+    .gas-description {
+      ${fonts.body12}
+      ${media.mobile} {
+        ${fonts.p4}
+      }
+      color: ${({ theme }) => theme.color.text04};
+    }
+  }
+`;
+
+export const SwapDivider = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  height: 1px;
+  align-self: stretch;
+  background: ${({ theme }) => theme.color.border02};
+`;
diff --git a/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx
new file mode 100644
index 000000000..da57585f7
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { FeeWrapper, SwapDivider } from "./SwapCardFeeInfo.styles";
+import IconStrokeArrowDown from "@components/common/icons/IconStrokeArrowDown";
+import IconStrokeArrowUp from "@components/common/icons/IconStrokeArrowUp";
+import IconRouter from "@components/common/icons/IconRouter";
+import { SwapGasInfo } from "@containers/swap-container/SwapContainer";
+
+interface ContentProps {
+  autoRouter: boolean;
+  showAutoRouter: () => void;
+  swapGasInfo: SwapGasInfo;
+}
+
+const SwapCardFeeInfo: React.FC<ContentProps> = ({
+  autoRouter,
+  showAutoRouter,
+  swapGasInfo,
+}) => {
+  return (
+    <FeeWrapper>
+      <div className="price-impact">
+        <span className="gray-text">Price Impact</span>
+        <span className="white-text">{swapGasInfo.priceImpact}</span>
+      </div>
+      <SwapDivider />
+      <div className="received">
+        <span className="gray-text">Min. Received</span>
+        <span className="white-text">{swapGasInfo.minReceived}</span>
+      </div>
+      <div className="gas-fee">
+        <span className="gray-text">Gas Fee</span>
+        <span className="white-text">
+          {swapGasInfo.gasFee} GNOT{" "}
+          <span className="gray-text">({swapGasInfo.usdExchangeGasFee})</span>
+        </span>
+      </div>
+      <SwapDivider />
+      <div className="auto-router">
+        <div className="auto-wrapper">
+          <IconRouter />
+          <h1 className="gradient">Auto Router</h1>
+        </div>
+        {autoRouter ? (
+          <IconStrokeArrowDown
+            className="router-icon"
+            onClick={showAutoRouter}
+          />
+        ) : (
+          <IconStrokeArrowUp className="router-icon" onClick={showAutoRouter} />
+        )}
+      </div>
+    </FeeWrapper>
+  );
+};
+
+export default SwapCardFeeInfo;
diff --git a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx
new file mode 100644
index 000000000..7095b49bc
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx
@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCardHeader from "./SwapCardHeader";
+
+describe("SwapCardHeader Component", () => {
+  it("SwapCardHeader render", () => {
+    const mockProps = {};
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCardHeader {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx
new file mode 100644
index 000000000..ce20b6ccf
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCardHeader from "./SwapCardHeader";
+import { css, Theme } from "@emotion/react";
+
+export default {
+  title: "swap/SwapCardHeader",
+  component: SwapCardHeader,
+} as ComponentMeta<typeof SwapCardHeader>;
+
+const Template: ComponentStory<typeof SwapCardHeader> = args => (
+  <div css={wrapper}>
+    <div css={headerWrap}>
+      <SwapCardHeader {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const headerWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts
new file mode 100644
index 000000000..f48dfb2a9
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts
@@ -0,0 +1,27 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const SwapCardHeaderWrapper = styled.div`
+  ${mixins.flexbox("row", "center", "space-between")};
+  width: 100%;
+
+  h2 {
+    ${fonts.h6};
+    ${media.mobile} {
+      ${fonts.body9};
+    }
+    color: ${({ theme }) => theme.color.text02};
+  }
+
+  .button-wrap {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    cursor: pointer;
+    gap: 12px;
+  }
+
+  .setting-icon * {
+    fill: ${({ theme }) => theme.color.icon03};
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
new file mode 100644
index 000000000..150c03ee4
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
@@ -0,0 +1,18 @@
+import IconLink from "@components/common/icons/IconLink";
+import IconSettings from "@components/common/icons/IconSettings";
+import React from "react";
+import { SwapCardHeaderWrapper } from "./SwapCardHeader.styles";
+
+const SwapCardHeader: React.FC = () => {
+  return (
+    <SwapCardHeaderWrapper>
+      <h2>Swap</h2>
+      <div className="button-wrap">
+        <IconLink className="setting-icon" />
+        <IconSettings className="setting-icon" />
+      </div>
+    </SwapCardHeaderWrapper>
+  );
+};
+
+export default SwapCardHeader;
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx b/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
new file mode 100644
index 000000000..c920777de
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
@@ -0,0 +1,57 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapCard from "./SwapCard";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
+
+describe("SwapCard Component", () => {
+  it("SwapCard render", () => {
+    const mockProps = {
+      search: () => null,
+      keyword: "",
+      deviceType: DEVICE_TYPE.WEB,
+      gnosAmount: "1",
+      isConnected: true,
+      autoRouter: false,
+      showAutoRouter: () => null,
+      swapGasInfo: dummySwapGasInfo,
+      swapInfo: true,
+      showSwapInfo: () => null,
+      autoRouterInfo: dummyAutoRouterInfo,
+      from: {
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      },
+      to: {
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      },
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapCard {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx b/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
new file mode 100644
index 000000000..a8a017101
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapCard from "./SwapCard";
+import { css, Theme } from "@emotion/react";
+import {
+  dummyAutoRouterInfo,
+  dummySwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+import { action } from "@storybook/addon-actions";
+import { DEVICE_TYPE } from "@styles/media";
+
+export default {
+  title: "swap/SwapCard",
+  component: SwapCard,
+} as ComponentMeta<typeof SwapCard>;
+
+const Template: ComponentStory<typeof SwapCard> = args => (
+  <div css={wrapper}>
+    <div css={contentWrap}>
+      <SwapCard {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  search: () => null,
+  keyword: "",
+  deviceType: DEVICE_TYPE.WEB,
+  gnosAmount: "1500",
+  isConnected: true,
+  autoRouter: true,
+  showAutoRouter: action("onClick"),
+  swapGasInfo: dummySwapGasInfo,
+  swapInfo: true,
+  showSwapInfo: action("onClick"),
+  autoRouterInfo: dummyAutoRouterInfo,
+  from: {
+    token: "USDCoin",
+    symbol: "USDC",
+    amount: "121",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+  },
+  to: {
+    token: "HEX",
+    symbol: "HEX",
+    amount: "5000",
+    price: "$0.00",
+    gnosExchangePrice: "1250",
+    usdExchangePrice: "($1541.55)",
+    balance: "0",
+    tokenLogo:
+      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  },
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
+
+const contentWrap = (theme: Theme) => css`
+  width: 500px;
+`;
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.styles.ts b/packages/web/src/components/swap/swap-card/SwapCard.styles.ts
new file mode 100644
index 000000000..b0527155f
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card/SwapCard.styles.ts
@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const SwapCardWrapper = styled.div`
+  ${mixins.flexbox("column", "center", "flex-start")};
+  width: 100%;
+  padding: 24px;
+  gap: 16px;
+
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  background: ${({ theme }) => theme.color.background06};
+  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
+
+  ${media.mobile} {
+    padding: 16px;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  .search-input {
+  }
+
+  .footer {
+    ${mixins.flexbox("row", "flex-start", "flex-start")};
+    position: relative;
+    width: 100%;
+  }
+  .tooltip {
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.tsx b/packages/web/src/components/swap/swap-card/SwapCard.tsx
new file mode 100644
index 000000000..abdbe47ad
--- /dev/null
+++ b/packages/web/src/components/swap/swap-card/SwapCard.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import Button, { ButtonHierarchy } from "@components/common/button/Button";
+import { SwapCardWrapper } from "./SwapCard.styles";
+import SearchInput from "@components/common/search-input/SearchInput";
+import SwapCardHeader from "../swap-card-header/SwapCardHeader";
+import SwapCardContent from "../swap-card-content/SwapCardContent";
+import { DEVICE_TYPE } from "@styles/media";
+import SwapButtonTooltip from "../swap-button-tooltip/SwapButtonTooltip";
+import {
+  AutoRouterInfo,
+  SwapGasInfo,
+} from "@containers/swap-container/SwapContainer";
+
+export interface TokenInfo {
+  token: string;
+  symbol: string;
+  amount: string;
+  price: string;
+  gnosExchangePrice: string;
+  usdExchangePrice: string;
+  balance: string;
+  tokenLogo: string;
+}
+
+interface SwapCardProps {
+  search: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  keyword: string;
+  deviceType: DEVICE_TYPE;
+  isConnected: boolean;
+  from: TokenInfo;
+  to: TokenInfo;
+  gnosAmount: string;
+  swapInfo: boolean;
+  showSwapInfo: () => void;
+  autoRouter: boolean;
+  showAutoRouter: () => void;
+  swapGasInfo: SwapGasInfo;
+  autoRouterInfo: AutoRouterInfo;
+}
+
+const SwapCard: React.FC<SwapCardProps> = ({
+  search,
+  keyword,
+  deviceType,
+  from,
+  to,
+  gnosAmount,
+  isConnected,
+  swapInfo,
+  showSwapInfo,
+  autoRouter,
+  showAutoRouter,
+  swapGasInfo,
+  autoRouterInfo,
+}) => {
+  return (
+    <>
+      {deviceType === DEVICE_TYPE.MOBILE && (
+        <SearchInput
+          width={"100%"}
+          height={40}
+          value={keyword}
+          onChange={search}
+          className="tokens-search"
+        />
+      )}
+      <SwapCardWrapper>
+        <SwapCardHeader />
+        <SwapCardContent
+          from={from}
+          to={to}
+          swapInfo={swapInfo}
+          showSwapInfo={showSwapInfo}
+          autoRouter={autoRouter}
+          showAutoRouter={showAutoRouter}
+          swapGasInfo={swapGasInfo}
+          autoRouterInfo={autoRouterInfo}
+        />
+        <div className="footer">
+          <SwapButtonTooltip swapGasInfo={swapGasInfo}>
+            {isConnected ? (
+              Number(gnosAmount) - Number(from.gnosExchangePrice) > 0 ? (
+                <Button
+                  text="Swap"
+                  style={{
+                    width: deviceType === DEVICE_TYPE.MOBILE ? 466 : 450,
+                    height: 57,
+                    fontType: "body7",
+                    hierarchy: ButtonHierarchy.Primary,
+                  }}
+                  onClick={() => {}}
+                />
+              ) : (
+                <Button
+                  text="Insufficient Balance"
+                  style={{
+                    width: deviceType === DEVICE_TYPE.MOBILE ? 466 : 450,
+                    height: 57,
+                    fontType: "body7",
+                    hierarchy: ButtonHierarchy.Gray,
+                  }}
+                  onClick={showSwapInfo}
+                />
+              )
+            ) : (
+              <Button
+                text="Connect Wallet"
+                style={{
+                  width: deviceType === DEVICE_TYPE.MOBILE ? 466 : 450,
+                  height: 57,
+                  fontType: "body7",
+                  hierarchy: ButtonHierarchy.Primary,
+                }}
+                onClick={() => {}}
+              />
+            )}
+          </SwapButtonTooltip>
+        </div>
+      </SwapCardWrapper>
+    </>
+  );
+};
+
+export default SwapCard;
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx
new file mode 100644
index 000000000..81dcf9445
--- /dev/null
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.spec.tsx
@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import SwapLiquidity from "./SwapLiquidity";
+import { dummyLiquidityList } from "@containers/swap-liquidity-container/SwapLiquidityContainer";
+
+describe("SwapLiquidity Component", () => {
+  it("SwapLiquidity render", () => {
+    const mockProps = {
+      liquiditys: dummyLiquidityList,
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <SwapLiquidity {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
new file mode 100644
index 000000000..0c9515a2b
--- /dev/null
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SwapLiquidity from "./SwapLiquidity";
+import { dummyLiquidityList } from "@containers/swap-liquidity-container/SwapLiquidityContainer";
+import { css, Theme } from "@emotion/react";
+
+export default {
+  title: "swap/SwapLiquidity",
+  component: SwapLiquidity,
+} as ComponentMeta<typeof SwapLiquidity>;
+
+const Template: ComponentStory<typeof SwapLiquidity> = args => (
+  <div css={wrapper}>
+    <div>
+      <SwapLiquidity {...args} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  liquiditys: dummyLiquidityList,
+};
+
+export const NoLiquidity = Template.bind({});
+NoLiquidity.args = {
+  liquiditys: [],
+};
+
+const wrapper = (theme: Theme) => css`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+`;
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
new file mode 100644
index 000000000..3c402cdc3
--- /dev/null
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
@@ -0,0 +1,147 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const SwapLiquidityWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  padding: 24px 0px;
+  gap: 24px;
+  ${media.mobile} {
+    padding: 16px 0px;
+    gap: 16px;
+    align-self: stretch;
+  }
+
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  background: ${({ theme }) => theme.color.background01};
+  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
+
+  .box-header {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    width: 100%;
+    padding: 0px 24px;
+    gap: 8px;
+    color: ${({ theme }) => theme.color.text02};
+    ${fonts.body7};
+    ${media.mobile} {
+      padding: 0px 16px;
+    }
+
+    .coin-pair {
+      ${mixins.flexbox("row", "flex-start", "flex-start")};
+
+      .gnos-image-wrapper {
+        ${mixins.flexbox("row", "center", "center")};
+        background-color: ${({ theme }) => theme.color.point};
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+      }
+      .gnot-image-wrapper {
+        ${mixins.flexbox("row", "center", "center")};
+        background-color: ${({ theme }) => theme.color.icon09};
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+        margin-left: -6px;
+      }
+      .coin-logo {
+        ${mixins.flexbox("row", "center", "flex-start")};
+        width: 14.25px;
+        height: 14.25px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .list-wrap {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    width: 100%;
+    padding: 0px 24px;
+    gap: 16px;
+    ${media.mobile} {
+      padding: 0px 16px;
+    }
+    ${fonts.body12}
+    color: ${({ theme }) => theme.color.text04};
+  }
+
+  .liquidity-list {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    color: ${({ theme }) => theme.color.text02};
+    width: 100%;
+    gap: 4px;
+    align-self: stretch;
+    ${fonts.body12}
+    ${media.mobile} {
+      ${fonts.p2}
+    }
+
+    .th {
+      ${mixins.flexbox("row", "flex-start", "flex-start")};
+      width: 100%;
+      padding: 0px 24px;
+      align-self: stretch;
+      color: ${({ theme }) => theme.color.text04};
+      ${media.mobile} {
+        padding: 0px 16px;
+      }
+
+      .feetier {
+        flex: 1 0 0;
+        width: 100%;
+      }
+      .volume,
+      .liquidity,
+      .apr {
+        flex: 1 0 0;
+        text-align: right;
+      }
+    }
+
+    .fee-info {
+      ${mixins.flexbox("row", "center", "flex-start")};
+      width: 100%;
+      padding: 8px 24px;
+      gap: 8px;
+      align-self: stretch;
+      ${media.mobile} {
+        padding: 8px 16px;
+      }
+      &:hover {
+        background-color: ${({ theme }) => theme.color.background05Hover};
+      }
+
+      .badge-wrap {
+        ${mixins.flexbox("column", "flex-start", "flex-start")};
+        flex: 1 0 0;
+        .badge {
+          ${fonts.body11}
+          ${media.mobile} {
+            ${fonts.p1}
+          }
+          ${mixins.flexbox("row", "center", "flex-end")};
+          padding: 4px 6px;
+          gap: 4px;
+          color: ${({ theme }) => theme.color.text11};
+          background-color: ${({ theme }) => theme.color.background13};
+          border: 1px solid ${({ theme }) => theme.color.border02};
+          border-radius: 4px;
+        }
+      }
+      .volume,
+      .liquidity,
+      .apr {
+        flex: 1 0 0;
+        text-align: right;
+        ${fonts.body12}
+        ${media.mobile} {
+          ${fonts.p2}
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx
new file mode 100644
index 000000000..2c3a0624a
--- /dev/null
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.tsx
@@ -0,0 +1,76 @@
+import IconLogoWhite from "@components/common/icons/IconLogoWhite";
+import React from "react";
+import { SwapLiquidityWrapper } from "./SwapLiquidity.styles";
+import Button, { ButtonHierarchy } from "@components/common/button/Button";
+import IconAdd from "@components/common/icons/IconAdd";
+import {
+  LiquidityInfo,
+  LIQUIDITY_HEAD,
+} from "@containers/swap-liquidity-container/SwapLiquidityContainer";
+
+interface SwapLiquidityProps {
+  liquiditys: LiquidityInfo[];
+}
+
+const SwapLiquidity: React.FC<SwapLiquidityProps> = ({ liquiditys }) => {
+  return (
+    <SwapLiquidityWrapper>
+      <div className="box-header">
+        <div className="coin-pair">
+          <div className="gnos-image-wrapper">
+            <IconLogoWhite className="coin-logo" />
+          </div>
+          <div className="gnot-image-wrapper">
+            <IconLogoWhite className="coin-logo" />
+          </div>
+        </div>
+        <span>GNOS/GNOT</span>
+      </div>
+      {liquiditys.length === 0 ? (
+        <div className="list-wrap">
+          <p>
+            No pools available for this pair. You will be the first to <br />
+            add liquidity to this pair.
+          </p>
+          <Button
+            text="Create Pool"
+            leftIcon={<IconAdd />}
+            style={{
+              fullWidth: true,
+              gap: 8,
+              height: 44,
+              fontType: "body9",
+              hierarchy: ButtonHierarchy.Primary,
+            }}
+            onClick={() => {}}
+          />
+        </div>
+      ) : (
+        <div className="liquidity-list">
+          <div className="th">
+            {Object.values(LIQUIDITY_HEAD).map((head, idx) => (
+              <span
+                key={idx}
+                className={Object.keys(LIQUIDITY_HEAD)[idx].toLowerCase()}
+              >
+                {head}
+              </span>
+            ))}
+          </div>
+          {liquiditys.map((liquidity, idx) => (
+            <div className="fee-info" key={idx}>
+              <span className="badge-wrap">
+                <div className="badge">{liquidity.feeTier}</div>
+              </span>
+              <span className="volume">{liquidity.volume}</span>
+              <span className="liquidity">{liquidity.liquidity}</span>
+              <span className="apr">{liquidity.apr}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </SwapLiquidityWrapper>
+  );
+};
+
+export default SwapLiquidity;
diff --git a/packages/web/src/components/swap/swap/Swap.styles.ts b/packages/web/src/components/swap/swap/Swap.styles.ts
deleted file mode 100644
index 4e27411d2..000000000
--- a/packages/web/src/components/swap/swap/Swap.styles.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { css, type Theme } from "@emotion/react";
-
-export const wrapper = (theme: Theme) => css`
-  color: ${theme.color.text01};
-  height: 100px;
-`;
diff --git a/packages/web/src/components/swap/swap/Swap.tsx b/packages/web/src/components/swap/swap/Swap.tsx
deleted file mode 100644
index 013d49b25..000000000
--- a/packages/web/src/components/swap/swap/Swap.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { wrapper } from "./Swap.styles";
-
-const Swap: React.FC = () => {
-  return <div css={wrapper}>Swap</div>;
-};
-
-export default Swap;
diff --git a/packages/web/src/constants/theme.constant.ts b/packages/web/src/constants/theme.constant.ts
index 8354a0c02..d97c9f8a9 100644
--- a/packages/web/src/constants/theme.constant.ts
+++ b/packages/web/src/constants/theme.constant.ts
@@ -49,6 +49,7 @@ const colors = {
     blackOpacity07BG: palette.blackOpacity07,
     gray600BG: palette.gray600,
     gray500BG: palette.gray500,
+    gray400BG: palette.gray400,
     gray200BG: palette.gray200,
     brand300Opacity03BG: palette.brand300Opacity03,
     whiteText1: palette.white,
@@ -76,6 +77,8 @@ const colors = {
     whiteOpacity07BG: palette.whiteOpacity07,
     gray100BG: palette.gray100,
     gray200BG: palette.gray200,
+    gray300BG: palette.gray300,
+    gray400BG: palette.gray400,
     gray100Opacity05BG: palette.gray100Opacity,
     gray100Text1: palette.gray100,
     gray200Text1: palette.gray200,
@@ -116,6 +119,7 @@ export const DARK_THEME_COLORS: ThemeColorType = {
   background14: colors.dark.brand900BG,
   background15: colors.dark.blackBG,
   background16: colors.dark.gray200BG,
+  background17: colors.dark.gray400BG,
   backgroundOpacity: colors.dark.blackOpacity07BG,
   backgroundOpacity2: colors.dark.blackOpacity07BG,
   backgroundGradient: colors.dark.gray600BG,
@@ -154,6 +158,7 @@ export const DARK_THEME_COLORS: ThemeColorType = {
   text17: colors.dark.gray400Text5,
   text18: colors.dark.whiteText1,
   text19: colors.dark.gray100Text2,
+  text20: colors.dark.gray100Text2,
   icon01: colors.dark.gray100Icon2,
   icon02: colors.dark.gray200Icon3,
   icon03: colors.dark.gray400Icon5,
@@ -190,6 +195,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = {
   background14: colors.global.brand700,
   background15: colors.white.gray100Opacity05BG,
   background16: colors.white.gray200BG,
+  background17: colors.white.gray400BG,
   backgroundOpacity: colors.white.gray100Opacity05BG,
   backgroundOpacity2: colors.white.whiteOpacity07BG,
   backgroundGradient: colors.white.gray100BG,
@@ -228,6 +234,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = {
   text17: colors.white.gray200Text1,
   text18: colors.white.gray300Text1,
   text19: colors.white.gray400Text2,
+  text20: colors.global.white,
   icon01: colors.white.gray300Icon1,
   icon02: colors.white.gray300Icon1,
   icon03: colors.white.gray300Icon1,
diff --git a/packages/web/src/containers/swap-container/SwapContainer.tsx b/packages/web/src/containers/swap-container/SwapContainer.tsx
index b616c48dc..1bb1b7484 100644
--- a/packages/web/src/containers/swap-container/SwapContainer.tsx
+++ b/packages/web/src/containers/swap-container/SwapContainer.tsx
@@ -1,6 +1,90 @@
-import React from "react";
-import Swap from "@components/swap/swap/Swap";
+import React, { useCallback, useState } from "react";
+import SwapCard from "@components/swap/swap-card/SwapCard";
+import { useAtom } from "jotai";
+import { CommonState } from "@states/index";
 
-const SwapContainer: React.FC = () => <Swap />;
+export interface SwapGasInfo {
+  priceImpact: string;
+  minReceived: string;
+  gasFee: string;
+  usdExchangeGasFee: string;
+}
+
+export const dummySwapGasInfo: SwapGasInfo = {
+  priceImpact: "-0.3%",
+  minReceived: "1.8445 ETH",
+  gasFee: "0.002451 GNOT",
+  usdExchangeGasFee: "$0.12",
+};
+
+export interface AutoRouterInfo {
+  v1fee: string[];
+  v2fee: string[];
+  v3fee: string[];
+}
+
+export const dummyAutoRouterInfo: AutoRouterInfo = {
+  v1fee: ["60%", "0.05%", "0.01%"],
+  v2fee: ["35%", "0.01%"],
+  v3fee: ["5%", "0.3%"],
+};
+
+const SwapContainer: React.FC = () => {
+  const [keyword, setKeyword] = useState("");
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [gnosAmount, setGnosAmount] = useState("1500");
+  const [breakpoint] = useAtom(CommonState.breakpoint);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isConnected, setIsConnected] = useState(true);
+  const [autoRouter, setAutoRouter] = useState(false);
+  const [swapInfo, setSwapInfo] = useState(false);
+  const search = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value);
+  }, []);
+  const showSwapInfo = () => {
+    setSwapInfo(prev => !prev);
+  };
+
+  const showAutoRouter = () => {
+    setAutoRouter(prev => !prev);
+  };
+  return (
+    <SwapCard
+      search={search}
+      keyword={keyword}
+      isConnected={isConnected}
+      deviceType={breakpoint}
+      swapInfo={swapInfo}
+      showSwapInfo={showSwapInfo}
+      gnosAmount={gnosAmount}
+      autoRouter={autoRouter}
+      showAutoRouter={showAutoRouter}
+      swapGasInfo={dummySwapGasInfo}
+      autoRouterInfo={dummyAutoRouterInfo}
+      from={{
+        token: "USDCoin",
+        symbol: "USDC",
+        amount: "121",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
+      }}
+      to={{
+        token: "HEX",
+        symbol: "HEX",
+        amount: "5000",
+        price: "$0.00",
+        gnosExchangePrice: "1250",
+        usdExchangePrice: "($1541.55)",
+        balance: "0",
+        tokenLogo:
+          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+      }}
+    />
+  );
+};
 
 export default SwapContainer;
diff --git a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx
new file mode 100644
index 000000000..a69bae28c
--- /dev/null
+++ b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx
@@ -0,0 +1,51 @@
+import SwapLiquidity from "@components/swap/swap-liquidity/SwapLiquidity";
+import React from "react";
+import { ValuesType } from "utility-types";
+
+export interface LiquidityInfo {
+  feeTier: string;
+  volume: string;
+  liquidity: string;
+  apr: string;
+}
+
+export const LIQUIDITY_HEAD = {
+  FEETIER: "Fee Tier",
+  VOLUME: "Volume (24h)",
+  LIQUIDITY: "Liquidity",
+  APR: "APR",
+} as const;
+export type LIQUIDITY_HEAD = ValuesType<typeof LIQUIDITY_HEAD>;
+
+export const dummyLiquidityList: LiquidityInfo[] = [
+  {
+    feeTier: "0.01%",
+    volume: "$25.45M",
+    liquidity: "$25.45M",
+    apr: "245.24%",
+  },
+  {
+    feeTier: "0.05%",
+    volume: "$15.45M",
+    liquidity: "$225.45M",
+    apr: "245.24%",
+  },
+  {
+    feeTier: "0.3%",
+    volume: "-",
+    liquidity: "-",
+    apr: "-",
+  },
+  {
+    feeTier: "1%",
+    volume: "-",
+    liquidity: "-",
+    apr: "-",
+  },
+];
+
+const SwapLiquidityContainer: React.FC = () => {
+  return <SwapLiquidity liquiditys={dummyLiquidityList} />;
+};
+
+export default SwapLiquidityContainer;
diff --git a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
index a85eb70f7..c2991596e 100644
--- a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
+++ b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
@@ -1,33 +1,80 @@
 import { fonts } from "@constants/font.constant";
-import { css, Theme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { media, ContainerWidth } from "@styles/media";
 import mixins from "@styles/mixins";
 
-export const wrapper = (theme: Theme) => css`
-  .container {
-    border: 1px solid ${theme.color.green01};
-
-    ${mixins.flexbox("row", "flex-start", "space-between")};
-    flex-wrap: wrap;
+export const SwapLayoutWrapper = styled.div`
+  ${mixins.flexbox("column", "center", "flex-start")};
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.background01};
 
+  .swap-section {
+    ${mixins.flexbox("column", "center", "flex-start")};
+    max-width: ${ContainerWidth.WEB_SECTION_CONTAINER};
     width: 100%;
-    max-width: 1440px;
-    margin: 100px auto;
-    padding: 0 40px;
-
-    .page-name {
-      width: 100px;
-      ${fonts.h3};
-      color: ${theme.color.text02};
+    padding: 100px 0px;
+    ${media.tablet} {
+      max-width: ${ContainerWidth.TABLET_CONTAINER};
+      padding: 60px 0px;
+    }
+    ${media.mobile} {
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
+      width: 90%;
+      padding: 0px;
     }
+  }
+  .swap-container {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    max-width: ${ContainerWidth.WEB_CONTAINER};
+    width: 100%;
+    padding: 0px 40px;
+    ${media.tablet} {
+      align-self: stretch;
+    }
+    ${media.mobile} {
+      padding: 24px 16px 48px 16px;
+      gap: 24px;
+    }
+  }
 
-    .swap {
-      border: 1px solid ${theme.color.green01};
+  .right-container {
+    ${mixins.flexbox("row", "flex-start", "flex-end")};
+    width: 100%;
+    gap: 16px;
+    ${media.tablet} {
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    ${media.mobile} {
+      gap: 8px;
+      align-items: center;
+    }
+  }
 
-      width: 500px;
+  .page-name {
+    ${fonts.h3};
+    ${media.tablet} {
+      ${fonts.h4};
+    }
+    ${media.mobile} {
+      ${fonts.h5};
     }
+    color: ${({ theme }) => theme.color.text02};
+  }
 
-    .empty {
-      width: 100px;
+  .swap {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    max-width: 500px;
+    width: 100%;
+    gap: 16px;
+    ${media.mobile} {
+      gap: 8px;
+      align-items: center;
     }
   }
+  .liquidity {
+    max-width: 500px;
+    width: 100%;
+  }
 `;
diff --git a/packages/web/src/layouts/swap-layout/SwapLayout.tsx b/packages/web/src/layouts/swap-layout/SwapLayout.tsx
index 8883ce8cf..b3ea85790 100644
--- a/packages/web/src/layouts/swap-layout/SwapLayout.tsx
+++ b/packages/web/src/layouts/swap-layout/SwapLayout.tsx
@@ -1,24 +1,32 @@
 import React from "react";
-import { wrapper } from "./SwapLayout.styles";
+import { SwapLayoutWrapper } from "./SwapLayout.styles";
 
 interface SwapLayoutProps {
   header: React.ReactNode;
   swap: React.ReactNode;
+  liquidity: React.ReactNode;
   footer: React.ReactNode;
 }
 
-const SwapLayout: React.FC<SwapLayoutProps> = ({ header, swap, footer }) => (
-  <div css={wrapper}>
+const SwapLayout: React.FC<SwapLayoutProps> = ({
+  header,
+  swap,
+  liquidity,
+  footer,
+}) => (
+  <SwapLayoutWrapper>
     {header}
-
-    <div className="container">
-      <div className="page-name">Swap</div>
-      <div className="swap">{swap}</div>
-      <div className="empty" />
+    <div className="swap-section">
+      <div className="swap-container">
+        <div className="page-name">Swap</div>
+        <div className="right-container">
+          <div className="swap">{swap}</div>
+          <div className="liquidity">{liquidity}</div>
+        </div>
+      </div>
     </div>
-
     {footer}
-  </div>
+  </SwapLayoutWrapper>
 );
 
 export default SwapLayout;
diff --git a/packages/web/src/pages/swap.tsx b/packages/web/src/pages/swap.tsx
index 1d8f590c2..66f485c74 100644
--- a/packages/web/src/pages/swap.tsx
+++ b/packages/web/src/pages/swap.tsx
@@ -2,12 +2,14 @@ import SwapLayout from "@layouts/swap-layout/SwapLayout";
 import HeaderContainer from "@containers/header-container/HeaderContainer";
 import SwapContainer from "@containers/swap-container/SwapContainer";
 import Footer from "@components/common/footer/Footer";
+import SwapLiquidityContainer from "@containers/swap-liquidity-container/SwapLiquidityContainer";
 
 export default function Swap() {
   return (
     <SwapLayout
       header={<HeaderContainer />}
       swap={<SwapContainer />}
+      liquidity={<SwapLiquidityContainer />}
       footer={<Footer />}
     />
   );
diff --git a/packages/web/src/styles/ThemeTypes.ts b/packages/web/src/styles/ThemeTypes.ts
index e5b4adf9a..9982b2720 100644
--- a/packages/web/src/styles/ThemeTypes.ts
+++ b/packages/web/src/styles/ThemeTypes.ts
@@ -17,6 +17,7 @@ export interface ThemeColorType {
   background14: string;
   background15: string;
   background16: string;
+  background17: string;
   backgroundOpacity: string;
   backgroundOpacity2: string;
   backgroundGradient: string;
@@ -51,6 +52,7 @@ export interface ThemeColorType {
   text17: string;
   text18: string;
   text19: string;
+  text20: string;
   icon01: string;
   icon02: string;
   icon03: string;