From c70c5a4a3c56ce4b9066937f85b82033d5f0924d Mon Sep 17 00:00:00 2001
From: jtpark <pjt0014@gmail.com>
Date: Thu, 24 Aug 2023 20:50:36 +0900
Subject: [PATCH] feat: Fix Swap pages

---
 .../components/common/icons/IconPolygon.tsx   |  17 ++
 .../components/common/icons/IconVector.tsx    |   6 +-
 .../SwapButtonTooltip.spec.tsx                |   2 -
 .../SwapButtonTooltip.stories.tsx             |  17 +-
 .../SwapButtonTooltip.styles.ts               |  12 ++
 .../swap-button-tooltip/SwapButtonTooltip.tsx |  15 +-
 .../SwapCardAutoRouter.styles.ts              |  21 ++-
 .../SwapCardAutoRouter.tsx                    |  39 ++---
 .../SwapCardContentDetail.spec.tsx            |   2 +
 .../SwapCardContentDetail.stories.tsx         |   8 +-
 .../SwapCardContentDetail.styles.ts           | 164 ++++--------------
 .../SwapCardContentDetail.tsx                 |  91 +++++-----
 .../SwapCardContent.spec.tsx                  |   2 +
 .../SwapCardContent.stories.tsx               |   2 +
 .../SwapCardContent.styles.ts                 |  37 +++-
 .../swap-card-content/SwapCardContent.tsx     |  30 ++--
 .../SwapCardFeeInfo.stories.tsx               |   4 +-
 .../SwapCardFeeInfo.styles.ts                 |  96 +---------
 .../swap-card-fee-info/SwapCardFeeInfo.tsx    |   4 +-
 .../swap-card-header/SwapCardHeader.spec.tsx  |   2 +
 .../SwapCardHeader.stories.tsx                |   2 +
 .../swap-card-header/SwapCardHeader.styles.ts |  24 +++
 .../swap/swap-card-header/SwapCardHeader.tsx  |  23 ++-
 .../swap/swap-card/SwapCard.spec.tsx          |   3 +-
 .../swap/swap-card/SwapCard.stories.tsx       |   2 +
 .../components/swap/swap-card/SwapCard.tsx    |  66 +++----
 .../swap-liquidity/SwapLiquidity.stories.tsx  |   4 +-
 .../swap-liquidity/SwapLiquidity.styles.ts    |   2 +-
 packages/web/src/constants/theme.constant.ts  |   2 +
 .../swap-container/SwapContainer.tsx          |  16 ++
 .../layouts/swap-layout/SwapLayout.styles.ts  |  10 +-
 packages/web/src/styles/ThemeTypes.ts         |   1 +
 32 files changed, 342 insertions(+), 384 deletions(-)
 create mode 100644 packages/web/src/components/common/icons/IconPolygon.tsx

diff --git a/packages/web/src/components/common/icons/IconPolygon.tsx b/packages/web/src/components/common/icons/IconPolygon.tsx
new file mode 100644
index 000000000..12f7249b7
--- /dev/null
+++ b/packages/web/src/components/common/icons/IconPolygon.tsx
@@ -0,0 +1,17 @@
+const IconPolygon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="27"
+    height="13"
+    viewBox="0 0 27 13"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M10.52 10.6683C12.11 12.4454 14.8919 12.4454 16.4819 10.6683L26.0272 0H0.974609L10.52 10.6683Z"
+      fill="#112188"
+    />
+  </svg>
+);
+
+export default IconPolygon;
diff --git a/packages/web/src/components/common/icons/IconVector.tsx b/packages/web/src/components/common/icons/IconVector.tsx
index d6f1d44fb..685c284b8 100644
--- a/packages/web/src/components/common/icons/IconVector.tsx
+++ b/packages/web/src/components/common/icons/IconVector.tsx
@@ -10,9 +10,9 @@ const IconVector = ({ className }: { className?: string }) => (
     <path
       d="M0 1H33.6667"
       stroke="#C3D2EA"
-      strokeWidth="2"
-      strokeMiterlimit="3.8637"
-      strokeDasharray="1 4"
+      stroke-width="2"
+      stroke-miterlimit="3.8637"
+      stroke-dasharray="1 4"
     />
   </svg>
 );
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
index 689360aff..4e887acae 100644
--- a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.spec.tsx
@@ -3,13 +3,11 @@ 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(
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
index 60dfa7c57..3873a866a 100644
--- a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.stories.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapButtonTooltip from "./SwapButtonTooltip";
-import { css, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 import { dummySwapGasInfo } from "@containers/swap-container/SwapContainer";
-import Button, { ButtonHierarchy } from "@components/common/button/Button";
 
 export default {
   title: "swap/SwapButtonTooltip",
@@ -21,21 +20,9 @@ const Template: ComponentStory<typeof SwapButtonTooltip> = args => (
 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`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;
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
index 73f0279a0..68f75a0d5 100644
--- a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.styles.ts
@@ -18,3 +18,15 @@ export const SwapButtonTooltipWrap = styled.div`
     padding: 4px 0px;
   }
 `;
+
+export const IconWrap = styled.div`
+  ${mixins.flexbox("row", "center", "flex-start")};
+  cursor: pointer;
+  .icon-info {
+    width: 16px;
+    height: 16px;
+    * {
+      fill: ${({ theme }) => theme.color.icon05};
+    }
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
index 396539945..12c24336d 100644
--- a/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
+++ b/packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
+import { IconWrap, SwapButtonTooltipWrap } from "./SwapButtonTooltip.styles";
 import { SwapGasInfo } from "@containers/swap-container/SwapContainer";
 import Tooltip from "@components/common/tooltip/Tooltip";
+import IconInfo from "@components/common/icons/IconInfo";
 
 interface WalletBalanceDetailInfoProps {
   swapGasInfo: SwapGasInfo;
-  children: React.ReactNode;
 }
 
 const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
   swapGasInfo,
-  children,
 }) => {
   const TooltipFloatingContent = (
     <SwapButtonTooltipWrap>
@@ -30,12 +29,10 @@ const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
   );
 
   return (
-    <Tooltip
-      placement="top"
-      FloatingContent={TooltipFloatingContent}
-      width="100%"
-    >
-      {children}
+    <Tooltip placement="top" FloatingContent={TooltipFloatingContent}>
+      <IconWrap>
+        <IconInfo className="icon-info" />
+      </IconWrap>
     </Tooltip>
   );
 };
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
index 91681142d..ba48e1470 100644
--- 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
@@ -5,20 +5,29 @@ import mixins from "@styles/mixins";
 
 export const AutoRouterWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
   padding: 12px;
-  margin: 0px 16px 16px 16px;
   gap: 12px;
+  ${media.mobile} {
+    margin-top: -4px;
+    overflow-x: auto;
+  }
   align-self: stretch;
   border-radius: 8px;
   border: 1px solid ${({ theme }) => theme.color.border02};
   .row {
     ${mixins.flexbox("row", "center", "flex-start")};
+    width: 100%;
     gap: 4px;
     align-self: stretch;
     .token-logo {
       width: 24px;
       height: 24px;
     }
+    .image-wrap {
+      width: 24px;
+      height: 24px;
+    }
     .left-box {
       ${mixins.flexbox("row", "center", "flex-start")};
       height: 28px;
@@ -45,9 +54,6 @@ export const AutoRouterWrapper = styled.div`
       }
     }
 
-    .vector {
-      ${mixins.flexbox("row", "flex-start", "flex-start")};
-    }
     .pair-fee {
       ${mixins.flexbox("row", "center", "center")};
       height: 28px;
@@ -101,3 +107,10 @@ export const SwapDivider = styled.div`
   align-self: stretch;
   background: ${({ theme }) => theme.color.border02};
 `;
+
+export const DotLine = styled.hr`
+  width: 100%;
+  min-width: 5px;
+  border: 0px;
+  border-top: 2px dotted ${({ theme }) => theme.color.border03};
+`;
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
index 06c25b64d..f9fd86712 100644
--- a/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
+++ b/packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { AutoRouterWrapper } from "./SwapCardAutoRouter.styles";
+import { AutoRouterWrapper, DotLine } 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";
 
@@ -24,7 +23,7 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           <div className="left-badge">V1</div>
           <span>{autoRouterInfo.v1fee[0]}</span>
         </div>
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -36,7 +35,7 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v1fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -48,19 +47,18 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v1fee[2]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </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" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -72,21 +70,18 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v2fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </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" />
+        <DotLine />
         <div className="pair-fee">
           <div className="coin-logo">
             <div className="from">
@@ -98,10 +93,10 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
           </div>
           <h1>{autoRouterInfo.v3fee[1]}</h1>
         </div>
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconVector className="vector" />
-        <IconLogoPrimary className="token-logo" />
+        <DotLine />
+        <div className="image-wrap">
+          <IconLogoPrimary className="token-logo" />
+        </div>
       </div>
       <p className="gas-description">
         Best price route costs ~$0.58 in gas. This route optimizes your total
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
index be4290436..f235bf5ff 100644
--- 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
@@ -6,6 +6,7 @@ import {
   dummyAutoRouterInfo,
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("SwapCardContentDetail Component", () => {
   it("SwapCardContentDetail render", () => {
@@ -16,6 +17,7 @@ describe("SwapCardContentDetail Component", () => {
       swapInfo: true,
       showSwapInfo: () => null,
       autoRouterInfo: dummyAutoRouterInfo,
+      breakpoint: DEVICE_TYPE.WEB,
       from: {
         token: "USDCoin",
         symbol: "USDC",
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
index 74bb2d173..f1d141158 100644
--- 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
@@ -1,12 +1,13 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapCardContentDetail from "./SwapCardContentDetail";
-import { css, Theme } from "@emotion/react";
+import { css } 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/SwapCardContentDetail",
@@ -29,6 +30,7 @@ Default.args = {
   swapInfo: true,
   showSwapInfo: action("onClick"),
   autoRouterInfo: dummyAutoRouterInfo,
+  breakpoint: DEVICE_TYPE.WEB,
   from: {
     token: "USDCoin",
     symbol: "USDC",
@@ -53,7 +55,7 @@ Default.args = {
   },
 };
 
-const wrapper = (theme: Theme) => css`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;
@@ -61,6 +63,6 @@ const wrapper = (theme: Theme) => css`
   margin-top: 50px;
 `;
 
-const contentWrap = (theme: Theme) => css`
+const contentWrap = () => 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
index 00f21ba01..f25bd7faf 100644
--- 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
@@ -3,10 +3,16 @@ import styled from "@emotion/styled";
 import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
-export const DetailWrapper = styled.div`
+interface exchangeProps {
+  swapInfo: boolean;
+}
+
+export const DetailWrapper = styled.div<exchangeProps>`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
   width: 100%;
-  border-radius: 8px;
+  border-radius: ${({ swapInfo }) => {
+    return swapInfo ? "8px 8px 0px 0px" : "8px";
+  }};
   background: ${({ theme }) => theme.color.background01};
   border: 1px solid ${({ theme }) => theme.color.border02};
 
@@ -19,6 +25,7 @@ export const DetailWrapper = styled.div`
 
     ${media.mobile} {
       padding: 12px;
+      gap: 12px;
     }
     .exchange-container {
       ${mixins.flexbox("row", "center", "space-between")};
@@ -29,6 +36,9 @@ export const DetailWrapper = styled.div`
       .ocin-info {
         ${mixins.flexbox("row", "center", "flex-start")};
         gap: 4px;
+        ${media.mobile} {
+          ${fonts.p2};
+        }
         .exchange-price {
           color: ${({ theme }) => theme.color.text04};
         }
@@ -56,145 +66,29 @@ export const DetailWrapper = styled.div`
       }
     }
   }
-  .hidden-list {
+`;
+
+export const FeelWrapper = styled.div<exchangeProps>`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  border-radius: ${({ swapInfo }) => {
+    return swapInfo ? "0px 0px 8px 8px" : "8px";
+  }};
+  background: ${({ theme }) => theme.color.background01};
+  border-left: 1px solid ${({ theme }) => theme.color.border02};
+  border-right: 1px solid ${({ theme }) => theme.color.border02};
+  border-bottom: 1px solid ${({ theme }) => theme.color.border02};
+  margin-top: -2px;
+  .fee-section {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     width: 100%;
-    padding: 16px;
+    padding: 0px 16px 16px 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};
+      gap: 12px;
     }
   }
 `;
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
index 93d13c4bd..50af30f1d 100644
--- a/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx
+++ b/packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { DetailWrapper } from "./SwapCardContentDetail.styles";
+import { DetailWrapper, FeelWrapper } 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";
@@ -11,6 +10,8 @@ import {
   AutoRouterInfo,
   SwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
+import SwapButtonTooltip from "../swap-button-tooltip/SwapButtonTooltip";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface ContentProps {
   to: TokenInfo;
@@ -21,6 +22,7 @@ interface ContentProps {
   showAutoRouter: () => void;
   swapGasInfo: SwapGasInfo;
   autoRouterInfo: AutoRouterInfo;
+  breakpoint: DEVICE_TYPE;
 }
 
 const SwapCardContentDetail: React.FC<ContentProps> = ({
@@ -32,50 +34,61 @@ const SwapCardContentDetail: React.FC<ContentProps> = ({
   showAutoRouter,
   swapGasInfo,
   autoRouterInfo,
+  breakpoint,
 }) => {
   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>
+    <>
+      <DetailWrapper swapInfo={swapInfo}>
+        <div className="exchange-section">
+          <div className="exchange-container">
+            <div className="ocin-info">
+              <SwapButtonTooltip swapGasInfo={swapGasInfo} />
+              <span>
+                {from.amount} {from.symbol} = {from.gnosExchangePrice} GNOS
+              </span>
+              {breakpoint !== DEVICE_TYPE.MOBILE && (
+                <span className="exchange-price">{from.usdExchangePrice}</span>
+              )}
+            </div>
+            <div className="price-info">
+              <IconNote className="price-icon" />
+              <span>{swapGasInfo.usdExchangeGasFee}</span>
+              {swapInfo ? (
+                <IconStrokeArrowUp
+                  className="price-icon"
+                  onClick={showSwapInfo}
+                />
+              ) : (
+                <IconStrokeArrowDown
+                  className="price-icon"
+                  onClick={showSwapInfo}
+                />
+              )}
+            </div>
           </div>
-          <div className="price-info">
-            <IconNote className="price-icon" />
-            <span>{swapGasInfo.usdExchangeGasFee}</span>
-            {swapInfo ? (
-              <IconStrokeArrowDown
-                className="price-icon"
-                onClick={showSwapInfo}
+        </div>
+      </DetailWrapper>
+      {swapInfo && (
+        <FeelWrapper swapInfo={swapInfo}>
+          <div className="fee-section">
+            {swapInfo && (
+              <SwapCardFeeInfo
+                autoRouter={autoRouter}
+                showAutoRouter={showAutoRouter}
+                swapGasInfo={swapGasInfo}
               />
-            ) : (
-              <IconStrokeArrowUp
-                className="price-icon"
-                onClick={showSwapInfo}
+            )}
+            {autoRouter && (
+              <SwapCardAutoRouter
+                from={from}
+                to={to}
+                autoRouterInfo={autoRouterInfo}
               />
             )}
           </div>
-        </div>
-        {swapInfo && (
-          <SwapCardFeeInfo
-            autoRouter={autoRouter}
-            showAutoRouter={showAutoRouter}
-            swapGasInfo={swapGasInfo}
-          />
-        )}
-        {autoRouter && (
-          <SwapCardAutoRouter
-            from={from}
-            to={to}
-            autoRouterInfo={autoRouterInfo}
-          />
-        )}
-      </div>
-    </DetailWrapper>
+        </FeelWrapper>
+      )}
+    </>
   );
 };
 
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
index bb1e07323..2b246f297 100644
--- a/packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.spec.tsx
@@ -8,6 +8,7 @@ import {
   dummyAutoRouterInfo,
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("SwapCardContent Component", () => {
   it("SwapCardContent render", () => {
@@ -25,6 +26,7 @@ describe("SwapCardContent Component", () => {
       coinList: coinList(),
       changeToken: (token: tokenInfo, type: string) => null,
       selectToken: (e: string) => null,
+      breakpoint: DEVICE_TYPE.WEB,
       from: {
         token: "USDCoin",
         symbol: "USDC",
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
index 799fc22ca..4473cf33e 100644
--- a/packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.stories.tsx
@@ -8,6 +8,7 @@ import {
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
 import { action } from "@storybook/addon-actions";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "swap/SwapCardContent",
@@ -37,6 +38,7 @@ Default.args = {
   coinList: coinList(),
   changeToken: action("changeToken"),
   selectToken: action("selectToken"),
+  breakpoint: DEVICE_TYPE.WEB,
   from: {
     token: "USDCoin",
     symbol: "USDC",
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
index 8a0edc26a..eeb813d69 100644
--- a/packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.styles.ts
@@ -40,12 +40,6 @@ export const ContentWrapper = styled.div`
     color: ${({ theme }) => theme.color.text01};
   }
 
-  .button-wrapper {
-    ${mixins.flexbox("row", "center", "flex-start")};
-    padding: 4px 6px;
-    gap: 8px;
-    cursor: pointer;
-  }
   .amount-info {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
@@ -53,6 +47,9 @@ export const ContentWrapper = styled.div`
     .price-text,
     .balance-text {
       ${fonts.body12};
+      ${media.mobile} {
+        ${fonts.p2};
+      }
       color: ${({ theme }) => theme.color.text10};
     }
   }
@@ -103,3 +100,31 @@ export const SwapDivider = styled.div`
   align-self: stretch;
   background: ${({ theme }) => theme.color.border02};
 `;
+
+export const SelectPairButton = styled.div`
+  ${mixins.flexbox("row", "center", "flex-start")};
+  padding: 4px 6px;
+  gap: 8px;
+  border-radius: 36px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.color.background05};
+  transition: 0.2s;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.hover01};
+  }
+  span {
+    ${fonts.body9};
+    color: ${({ theme }) => theme.color.text01};
+  }
+  .token-logo {
+    width: 24px;
+    height: 24px;
+  }
+  .arrow-icon {
+    width: 16px;
+    height: 16px;
+    * {
+      fill: ${({ theme }) => theme.color.icon01};
+    }
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx b/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
index aeac22f61..691cec2f2 100644
--- a/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
+++ b/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { ContentWrapper } from "./SwapCardContent.styles";
-import SelectPairButton from "@components/common/select-pair-button/SelectPairButton";
+import { ContentWrapper, SelectPairButton } from "./SwapCardContent.styles";
 import { TokenInfo } from "../swap-card/SwapCard";
 import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
 import SwapCardContentDetail from "../swap-card-content-detail/SwapCardContentDetail";
@@ -10,6 +9,8 @@ import {
   SwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
 import SelectTokenModal from "../select-token-modal/SelectTokenModal";
+import { DEVICE_TYPE } from "@styles/media";
+import IconStrokeArrowDown from "@components/common/icons/IconStrokeArrowDown";
 
 interface ContentProps {
   to: TokenInfo;
@@ -27,6 +28,7 @@ interface ContentProps {
   coinList: tokenInfo[];
   changeToken: (token: tokenInfo, type: string) => void;
   selectToken: (e: string) => void;
+  breakpoint: DEVICE_TYPE;
 }
 
 function isAmount(str: string) {
@@ -50,6 +52,7 @@ const SwapCardContent: React.FC<ContentProps> = ({
   coinList,
   changeToken,
   selectToken,
+  breakpoint,
 }) => {
   const [fromAmount, setFromAmount] = useState(from.amount);
   const [toAmount, setToAmount] = useState(to.amount);
@@ -92,15 +95,20 @@ const SwapCardContent: React.FC<ContentProps> = ({
               onChange={onChangeFromAmount}
               placeholder={fromAmount === "" ? "0" : ""}
             />
-            <div
-              className="button-wrapper"
+            <SelectPairButton
               onClick={() => {
                 selectToken("from");
                 onSelectTokenModal();
               }}
             >
-              <SelectPairButton disabled token={from} />
-            </div>
+              <img
+                src={from.tokenLogo}
+                alt="token logo"
+                className="token-logo"
+              />
+              <span className="token-symbol">{from.symbol}</span>
+              <IconStrokeArrowDown className="arrow-icon" />
+            </SelectPairButton>
           </div>
           <div className="amount-info">
             <span className="price-text">{from.price}</span>
@@ -120,15 +128,16 @@ const SwapCardContent: React.FC<ContentProps> = ({
               onChange={onChangeToAmount}
               placeholder={toAmount === "" ? "0" : ""}
             />
-            <div
-              className="button-wrapper"
+            <SelectPairButton
               onClick={() => {
                 selectToken("to");
                 onSelectTokenModal();
               }}
             >
-              <SelectPairButton disabled token={to} />
-            </div>
+              <img src={to.tokenLogo} alt="token logo" className="token-logo" />
+              <span className="token-symbol">{to.symbol}</span>
+              <IconStrokeArrowDown className="arrow-icon" />
+            </SelectPairButton>
           </div>
           <div className="amount-info">
             <span className="price-text">{to.price}</span>
@@ -144,6 +153,7 @@ const SwapCardContent: React.FC<ContentProps> = ({
           showAutoRouter={showAutoRouter}
           swapGasInfo={swapGasInfo}
           autoRouterInfo={autoRouterInfo}
+          breakpoint={breakpoint}
         />
       </ContentWrapper>
     </>
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
index f5da7ce78..47e6ee7b6 100644
--- 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
@@ -25,7 +25,7 @@ Default.args = {
   swapGasInfo: dummySwapGasInfo,
 };
 
-const wrapper = (theme: Theme) => css`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;
@@ -33,6 +33,6 @@ const wrapper = (theme: Theme) => css`
   margin-top: 50px;
 `;
 
-const contentWrap = (theme: Theme) => css`
+const contentWrap = () => 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
index ff30e31e1..9a9b0c60f 100644
--- 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
@@ -6,16 +6,15 @@ import mixins from "@styles/mixins";
 export const FeeWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
   width: 100%;
-  padding: 16px;
+  padding: 16px 0px 0px 0px;
   gap: 16px;
-  border-top: 1px solid ${({ theme }) => theme.color.border02};
   align-self: stretch;
   ${fonts.body12};
   ${media.mobile} {
     ${fonts.p2};
   }
   ${media.mobile} {
-    padding: 12px;
+    padding: 0px;
     gap: 8px;
     flex-direction: column;
   }
@@ -53,97 +52,6 @@ export const FeeWrapper = styled.div`
       }
     }
   }
-
-  .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`
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
index da57585f7..429211c37 100644
--- a/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx
+++ b/packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx
@@ -41,12 +41,12 @@ const SwapCardFeeInfo: React.FC<ContentProps> = ({
           <h1 className="gradient">Auto Router</h1>
         </div>
         {autoRouter ? (
+          <IconStrokeArrowUp className="router-icon" onClick={showAutoRouter} />
+        ) : (
           <IconStrokeArrowDown
             className="router-icon"
             onClick={showAutoRouter}
           />
-        ) : (
-          <IconStrokeArrowUp className="router-icon" onClick={showAutoRouter} />
         )}
       </div>
     </FeeWrapper>
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
index fbfbc384d..4eb0e198f 100644
--- a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.spec.tsx
@@ -11,6 +11,8 @@ describe("SwapCardHeader Component", () => {
       tolerance: "",
       changeTolerance: () => null,
       resetTolerance: () => null,
+      handleCopyClipBoard: () => null,
+      copied: true,
     };
 
     render(
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
index e59cc7e80..c98949aaf 100644
--- a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.stories.tsx
@@ -24,6 +24,8 @@ Default.args = {
   tolerance: "",
   changeTolerance: action("changeTolerance"),
   resetTolerance: action("resetTolerance"),
+  handleCopyClipBoard: action("handleCopyClipBoard"),
+  copied: true,
 };
 
 const wrapper = () => css`
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
index dc5e0af16..c69ef17df 100644
--- a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.styles.ts
@@ -22,12 +22,16 @@ export const SwapCardHeaderWrapper = styled.div`
 
   .setting-wrap {
     ${mixins.flexbox("row", "center", "center")};
+    position: relative;
     width: 24px;
     height: 24px;
     cursor: pointer;
     .setting-icon * {
       fill: ${({ theme }) => theme.color.icon03};
     }
+    .setting-icon:hover * {
+      fill: ${({ theme }) => theme.color.icon07};
+    }
   }
 `;
 
@@ -35,3 +39,23 @@ export const SettingMenuButton = styled.div`
   ${mixins.flexbox("row", "center", "center")};
   position: relative;
 `;
+
+export const CopyTooltip = styled.div`
+  ${mixins.flexbox("column", "center", "flex-start")};
+  position: absolute;
+  top: -65px;
+  .box {
+    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    width: 115px;
+    padding: 16px;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    ${fonts.body12};
+    color: ${({ theme }) => theme.color.text15};
+    background-color: ${({ theme }) => theme.color.background14};
+  }
+  .polygon-icon * {
+    fill: ${({ theme }) => theme.color.background14};
+  }
+`;
diff --git a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
index e83ab6979..9ff2e6fd9 100644
--- a/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
+++ b/packages/web/src/components/swap/swap-card-header/SwapCardHeader.tsx
@@ -1,8 +1,10 @@
 import IconLink from "@components/common/icons/IconLink";
+import IconPolygon from "@components/common/icons/IconPolygon";
 import IconSettings from "@components/common/icons/IconSettings";
 import React from "react";
 import SettingMenuModal from "../setting-menu-modal/SettingMenuModal";
 import {
+  CopyTooltip,
   SettingMenuButton,
   SwapCardHeaderWrapper,
 } from "./SwapCardHeader.styles";
@@ -12,6 +14,8 @@ interface SwapCardHeaderProps {
   tolerance: string;
   changeTolerance: (e: React.ChangeEvent<HTMLInputElement>) => void;
   resetTolerance: () => void;
+  handleCopyClipBoard: (text: string) => void;
+  copied: boolean;
 }
 const SwapCardHeader: React.FC<SwapCardHeaderProps> = ({
   settingMenuToggle,
@@ -19,13 +23,28 @@ const SwapCardHeader: React.FC<SwapCardHeaderProps> = ({
   tolerance,
   changeTolerance,
   resetTolerance,
+  handleCopyClipBoard,
+  copied,
 }) => {
   return (
     <SwapCardHeaderWrapper>
       <h2>Swap</h2>
       <div className="button-wrap">
-        <div className="setting-wrap">
-          <IconLink className="setting-icon" />
+        <div
+          className="setting-wrap"
+          onClick={() => handleCopyClipBoard("Copy Completed.")}
+        >
+          <>
+            <IconLink className="setting-icon" />
+            {copied && (
+              <CopyTooltip>
+                <div className="box">
+                  <span>URL Copied!</span>
+                </div>
+                <IconPolygon className="polygon-icon" />
+              </CopyTooltip>
+            )}
+          </>
         </div>
         <SettingMenuButton>
           <div className="setting-wrap" onClick={onSettingMenu}>
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx b/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
index 7b906b0df..7885c3862 100644
--- a/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
+++ b/packages/web/src/components/swap/swap-card/SwapCard.spec.tsx
@@ -4,7 +4,6 @@ import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapTheme
 import SwapCard from "./SwapCard";
 import {
   coinList,
-  tokenInfo,
   dummyAutoRouterInfo,
   dummySwapGasInfo,
 } from "@containers/swap-container/SwapContainer";
@@ -37,8 +36,10 @@ describe("SwapCard Component", () => {
       submitSwap: () => null,
       resetTolerance: () => null,
       breakpoint: DEVICE_TYPE.WEB,
+      handleCopyClipBoard: () => null,
       submit: false,
       isFetched: true,
+      copied: true,
       swapResult: { success: true, transaction: "https//:naver.com" },
       from: {
         token: "USDCoin",
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx b/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
index 421713df0..25b371a48 100644
--- a/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
+++ b/packages/web/src/components/swap/swap-card/SwapCard.stories.tsx
@@ -48,8 +48,10 @@ Default.args = {
   changeToken: action("changeToken"),
   selectToken: action("selectToken"),
   resetTolerance: action("resetTolerance"),
+  handleCopyClipBoard: action("handleCopyClipBoard"),
   breakpoint: DEVICE_TYPE.WEB,
   submit: false,
+  copied: true,
   isFetched: true,
   swapResult: { success: true, transaction: "https//:naver.com" },
   from: {
diff --git a/packages/web/src/components/swap/swap-card/SwapCard.tsx b/packages/web/src/components/swap/swap-card/SwapCard.tsx
index 426b6067e..f428c498f 100644
--- a/packages/web/src/components/swap/swap-card/SwapCard.tsx
+++ b/packages/web/src/components/swap/swap-card/SwapCard.tsx
@@ -3,7 +3,6 @@ import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import { SwapCardWrapper } from "./SwapCard.styles";
 import SwapCardHeader from "../swap-card-header/SwapCardHeader";
 import SwapCardContent from "../swap-card-content/SwapCardContent";
-import SwapButtonTooltip from "../swap-button-tooltip/SwapButtonTooltip";
 import {
   AutoRouterInfo,
   tokenInfo,
@@ -54,6 +53,8 @@ interface SwapCardProps {
   isFetched: boolean;
   swapResult?: SwapData;
   resetTolerance: () => void;
+  handleCopyClipBoard: (text: string) => void;
+  copied: boolean;
 }
 
 const SwapCard: React.FC<SwapCardProps> = ({
@@ -86,6 +87,8 @@ const SwapCard: React.FC<SwapCardProps> = ({
   isFetched,
   swapResult,
   resetTolerance,
+  handleCopyClipBoard,
+  copied,
 }) => {
   return (
     <>
@@ -96,6 +99,8 @@ const SwapCard: React.FC<SwapCardProps> = ({
           tolerance={tolerance}
           changeTolerance={changeTolerance}
           resetTolerance={resetTolerance}
+          handleCopyClipBoard={handleCopyClipBoard}
+          copied={copied}
         />
         <SwapCardContent
           from={from}
@@ -113,46 +118,45 @@ const SwapCard: React.FC<SwapCardProps> = ({
           coinList={coinList}
           changeToken={changeToken}
           selectToken={selectToken}
+          breakpoint={breakpoint}
         />
         <div className="footer">
-          <SwapButtonTooltip swapGasInfo={swapGasInfo}>
-            {isConnected ? (
-              Number(gnosAmount) - Number(from.gnosExchangePrice) > 0 ? (
-                <Button
-                  text="Swap"
-                  style={{
-                    fullWidth: true,
-                    height: breakpoint === DEVICE_TYPE.MOBILE ? 41 : 57,
-                    fontType: "body7",
-                    hierarchy: ButtonHierarchy.Primary,
-                  }}
-                  onClick={onConfirmModal}
-                />
-              ) : (
-                <Button
-                  text="Insufficient Balance"
-                  style={{
-                    fullWidth: true,
-                    height: breakpoint === DEVICE_TYPE.MOBILE ? 41 : 57,
-                    fontType: "body7",
-                    hierarchy: ButtonHierarchy.Gray,
-                  }}
-                  onClick={showSwapInfo}
-                />
-              )
-            ) : (
+          {isConnected ? (
+            Number(gnosAmount) - Number(from.gnosExchangePrice) > 0 ? (
               <Button
-                text="Connect Wallet"
+                text="Swap"
                 style={{
                   fullWidth: true,
                   height: breakpoint === DEVICE_TYPE.MOBILE ? 41 : 57,
                   fontType: "body7",
                   hierarchy: ButtonHierarchy.Primary,
                 }}
-                onClick={() => {}}
+                onClick={onConfirmModal}
+              />
+            ) : (
+              <Button
+                text="Insufficient Balance"
+                style={{
+                  fullWidth: true,
+                  height: breakpoint === DEVICE_TYPE.MOBILE ? 41 : 57,
+                  fontType: "body7",
+                  hierarchy: ButtonHierarchy.Gray,
+                }}
+                onClick={showSwapInfo}
               />
-            )}
-          </SwapButtonTooltip>
+            )
+          ) : (
+            <Button
+              text="Connect Wallet"
+              style={{
+                fullWidth: true,
+                height: breakpoint === DEVICE_TYPE.MOBILE ? 41 : 57,
+                fontType: "body7",
+                hierarchy: ButtonHierarchy.Primary,
+              }}
+              onClick={() => {}}
+            />
+          )}
         </div>
       </SwapCardWrapper>
       {swapOpen && (
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
index 0c9515a2b..dd424f10f 100644
--- a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.stories.tsx
@@ -2,7 +2,7 @@ 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";
+import { css } from "@emotion/react";
 
 export default {
   title: "swap/SwapLiquidity",
@@ -27,7 +27,7 @@ NoLiquidity.args = {
   liquiditys: [],
 };
 
-const wrapper = (theme: Theme) => css`
+const wrapper = () => css`
   display: flex;
   width: 100%;
   align-items: center;
diff --git a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
index 3c402cdc3..ec4f9715e 100644
--- a/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
+++ b/packages/web/src/components/swap/swap-liquidity/SwapLiquidity.styles.ts
@@ -126,7 +126,7 @@ export const SwapLiquidityWrapper = styled.div`
           ${mixins.flexbox("row", "center", "flex-end")};
           padding: 4px 6px;
           gap: 4px;
-          color: ${({ theme }) => theme.color.text11};
+          color: ${({ theme }) => theme.color.text21};
           background-color: ${({ theme }) => theme.color.background13};
           border: 1px solid ${({ theme }) => theme.color.border02};
           border-radius: 4px;
diff --git a/packages/web/src/constants/theme.constant.ts b/packages/web/src/constants/theme.constant.ts
index 15aa42455..c181a11f8 100644
--- a/packages/web/src/constants/theme.constant.ts
+++ b/packages/web/src/constants/theme.constant.ts
@@ -160,6 +160,7 @@ export const DARK_THEME_COLORS: ThemeColorType = {
   text18: colors.dark.whiteText1,
   text19: colors.dark.gray100Text2,
   text20: colors.dark.gray100Text2,
+  text21: colors.global.brand100,
   icon01: colors.dark.gray100Icon2,
   icon02: colors.dark.gray200Icon3,
   icon03: colors.dark.gray400Icon5,
@@ -238,6 +239,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = {
   text18: colors.white.gray300Text1,
   text19: colors.white.gray400Text2,
   text20: colors.global.white,
+  text21: colors.white.gray300Text1,
   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 d32dea9a1..5418f7a1a 100644
--- a/packages/web/src/containers/swap-container/SwapContainer.tsx
+++ b/packages/web/src/containers/swap-container/SwapContainer.tsx
@@ -124,6 +124,7 @@ const SwapContainer: React.FC = () => {
   const [swapOpen, setSwapOpen] = useState(false);
   const [division, setDivision] = useState("");
   const [submit, setSubmit] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const { data: tokens } = useQuery<tokenInfo[], Error>({
     queryKey: [keyword],
@@ -184,6 +185,18 @@ const SwapContainer: React.FC = () => {
     }
   };
 
+  const handleCopyClipBoard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (e) {
+      throw new Error("Copy Error!");
+    }
+  };
+
   const onSettingMenu = () => {
     setSettingMenuToggle(prev => !prev);
   };
@@ -216,6 +229,7 @@ const SwapContainer: React.FC = () => {
   }, []);
 
   const showSwapInfo = () => {
+    autoRouter && setAutoRouter(prev => !prev);
     setSwapInfo(prev => !prev);
   };
 
@@ -258,6 +272,8 @@ const SwapContainer: React.FC = () => {
       isFetched={isFetched}
       swapResult={swapResult}
       resetTolerance={resetTolerance}
+      handleCopyClipBoard={handleCopyClipBoard}
+      copied={copied}
     />
   );
 };
diff --git a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
index 5724137b4..18d443351 100644
--- a/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
+++ b/packages/web/src/layouts/swap-layout/SwapLayout.styles.ts
@@ -24,7 +24,7 @@ export const SwapLayoutWrapper = styled.div`
     }
   }
   .swap-container {
-    ${mixins.flexbox("column", "flex-start", "flex-start")};
+    ${mixins.flexbox("row", "flex-start", "flex-start")};
     max-width: ${ContainerWidth.WEB_CONTAINER};
     width: 100%;
     padding: 0px 40px;
@@ -33,6 +33,7 @@ export const SwapLayoutWrapper = styled.div`
     }
     ${media.mobile} {
       padding: 24px 0px 48px 0px;
+      flex-direction: column;
       gap: 24px;
     }
   }
@@ -41,6 +42,7 @@ export const SwapLayoutWrapper = styled.div`
     ${mixins.flexbox("row", "flex-start", "flex-end")};
     width: 100%;
     gap: 16px;
+    margin-top: 8px;
     ${media.tablet} {
       flex-direction: column;
       align-items: center;
@@ -48,6 +50,7 @@ export const SwapLayoutWrapper = styled.div`
     }
     ${media.mobile} {
       gap: 8px;
+      margin-top: 0px;
       align-items: center;
     }
   }
@@ -59,6 +62,10 @@ export const SwapLayoutWrapper = styled.div`
     }
     ${media.mobile} {
       ${fonts.h5};
+      ${mixins.flexbox("row", "flex-start", "flex-start")};
+      max-width: 500px;
+      width: 100%;
+      align-self: center;
     }
     color: ${({ theme }) => theme.color.text02};
   }
@@ -73,6 +80,7 @@ export const SwapLayoutWrapper = styled.div`
       align-items: center;
     }
   }
+
   .liquidity {
     max-width: 414px;
     width: 100%;
diff --git a/packages/web/src/styles/ThemeTypes.ts b/packages/web/src/styles/ThemeTypes.ts
index e95ffde78..67d096acb 100644
--- a/packages/web/src/styles/ThemeTypes.ts
+++ b/packages/web/src/styles/ThemeTypes.ts
@@ -54,6 +54,7 @@ export interface ThemeColorType {
   text18: string;
   text19: string;
   text20: string;
+  text21: string;
   icon01: string;
   icon02: string;
   icon03: string;