diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 94374461..41c36726 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -195,7 +195,11 @@ const SwapForm = () => {
     : tokenMax.lt(amountIn)
 
   return (
-    <ContentBox hidePadding showBackground className="relative overflow-hidden">
+    <ContentBox
+      hidePadding
+      showBackground
+      className="relative overflow-hidden rounded md:rounded-none"
+    >
       <div className="p-6">
         <Transition
           className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index 54ddfece..9a12eac2 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -228,7 +228,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
   }
 
   return (
-    <ContentBox hideBorder className="h-full">
+    <ContentBox hideBorder hidePadding className="h-full p-0 md:p-6">
       {loadChartData ? (
         <>
           <SheenLoader className="w-[148px] rounded-md">
@@ -317,13 +317,13 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 onChange={(v) => setDaysToShow(v)}
               />
             </div>
-            <div className="mt-4 h-full md:-mx-5">
+            <div className="h-full md:-mx-2 md:mt-4">
               <ResponsiveContainer>
                 <AreaChart
                   data={chartData}
                   onMouseMove={handleMouseMove}
                   onMouseLeave={handleMouseLeave}
-                  margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+                  // margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 >
                   <Tooltip
                     cursor={{
diff --git a/components/swap/TradeSimplePage.tsx b/components/swap/TradeSimplePage.tsx
index 737bdd9d..7fb1726e 100644
--- a/components/swap/TradeSimplePage.tsx
+++ b/components/swap/TradeSimplePage.tsx
@@ -15,10 +15,10 @@ const TradeSimplePage = () => {
           outputTokenId={outputTokenInfo?.extensions?.coingeckoId}
         />
       </div>
-      <div className="col-span-12 space-y-6 border-th-bkg-3 md:col-span-6 md:border-b lg:col-span-4">
+      <div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-4">
         <Swap />
       </div>
-      <div className="col-span-12 p-6">
+      <div className="col-span-12 p-2 pt-8 md:p-6">
         <AccountTabs />
       </div>
     </div>
diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index d6d371ca..9a758385 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -100,7 +100,7 @@ export const ConnectWalletButton: React.FC = () => {
         disabled={!group}
         className={` text-white focus:outline-none disabled:cursor-wait disabled:opacity-25`}
       >
-        <div className="relative flex w-44 rounded bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
+        <div className="relative flex h-16 w-44 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
           <div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
             <div
               className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
@@ -118,7 +118,7 @@ export const ConnectWalletButton: React.FC = () => {
               />
             </div>
             <div className="text-left">
-              <div className="mb-0.5 flex justify-center text-base font-bold leading-none">
+              <div className="mb-1.5 flex justify-center text-base font-bold leading-none">
                 {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
               </div>
               {wallet?.adapter?.name && (
diff --git a/pages/swap.tsx b/pages/swap.tsx
index e28d1edb..6ba87fd7 100644
--- a/pages/swap.tsx
+++ b/pages/swap.tsx
@@ -12,7 +12,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Trade: NextPage = () => {
   return (
-    <div className="p-8 pb-20 md:p-0">
+    <div className="p-6 pb-20 md:p-0">
       <TradeSimplePage />
     </div>
   )
diff --git a/tailwind.config.js b/tailwind.config.js
index dc92d883..8afb0ece 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,8 +47,8 @@ module.exports = {
           red: { DEFAULT: '#CC2929', dark: '#AA2222', muted: '#571e20' },
           green: { DEFAULT: '#5EBF4D', dark: '#4BA53B', muted: '#365D31' },
           orange: { DEFAULT: '#FF9C24' },
-          'bkg-1': '#131316',
-          'bkg-2': '#1D1D20',
+          'bkg-1': '#101012',
+          'bkg-2': '#1B1B1F',
           'bkg-3': '#27272B',
           'bkg-4': '#38383D',
           'fgd-1': '#D1D1D1',