diff --git a/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx b/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx
index 98538b3d74..b18a1f7b29 100644
--- a/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx
+++ b/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx
@@ -12,6 +12,7 @@ import {
   TransactionErrorContent,
 } from 'components/TransactionConfirmationModal'
 import { CancellationSummary } from './styled'
+import { Routes } from 'constants/routes'
 
 import { shortenOrderId } from 'utils'
 
@@ -48,7 +49,7 @@ function RequestCancellationModal(props: RequestCancellationModalProps): JSX.Ele
               <p>
                 This means that a solver might already have included the order in a solution even if this cancellation
                 is successful. Read more in the{' '}
-                <a target="_blank" href="/#/faq/trading#can-i-cancel-an-order">
+                <a target="_blank" rel="noreferrer" href={`${Routes.FAQ_TRADING}#can-i-cancel-an-order`}>
                   FAQ
                 </a>
                 .
diff --git a/src/custom/components/AppziButton/index.tsx b/src/custom/components/AppziButton/index.tsx
index b72c08710e..85d0639644 100644
--- a/src/custom/components/AppziButton/index.tsx
+++ b/src/custom/components/AppziButton/index.tsx
@@ -23,11 +23,14 @@ const Wrapper = styled(ButtonPrimary)`
   z-index: 2;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: 86px;
-  `};
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    right: 14px;
+    left: 14px;
+    height: 42px;
+    width: 42px;
+    bottom: 11px;
+    right: initial;
+    z-index: 10;
+    box-shadow: none;
+    border-width: 3px;
   `};
 
   &::after {
diff --git a/src/custom/components/ClickWrap/index.tsx b/src/custom/components/ClickWrap/index.tsx
index 09852010b1..dcc39efd7e 100644
--- a/src/custom/components/ClickWrap/index.tsx
+++ b/src/custom/components/ClickWrap/index.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components/macro'
 import { NavLink } from 'react-router-dom'
 import { ButtonPrimary, ButtonOutlined } from 'components/Button'
+import { Routes } from 'constants/routes'
 
 const Wrapper = styled.div`
   display: flex;
@@ -111,9 +112,9 @@ export default function ClickWrap() {
       <div>
         <p>
           We use cookies to provide you with the best experience and to help improve our website and application. Please
-          read our <NavLink to="/cookie-policy">Cookie Policy</NavLink> for more information. By clicking &apos;Accept
-          all&apos;, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage
-          and provide customer support.
+          read our <NavLink to={Routes.COOKIE_POLICY}>Cookie Policy</NavLink> for more information. By clicking
+          &apos;Accept all&apos;, you agree to the storing of cookies on your device to enhance site navigation, analyze
+          site usage and provide customer support.
         </p>
         <Form>
           <span>
diff --git a/src/custom/components/CowBalanceButton/index.tsx b/src/custom/components/CowBalanceButton/index.tsx
index 2d10154cfc..84b0d69707 100644
--- a/src/custom/components/CowBalanceButton/index.tsx
+++ b/src/custom/components/CowBalanceButton/index.tsx
@@ -4,25 +4,35 @@ import CowProtocolLogo from 'components/CowProtocolLogo'
 import { useCombinedBalance } from 'state/cowToken/hooks'
 import { ChainId } from 'state/lists/actions/actionsMod'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
-import { AMOUNT_PRECISION } from 'constants/index'
 import { COW } from 'constants/tokens'
 import { transparentize } from 'polished'
 
 export const Wrapper = styled.div<{ isLoading: boolean }>`
   background-color: ${({ theme }) => theme.bg4};
   color: ${({ theme }) => theme.text1};
-  padding: 7px 12px;
-  border: 1px solid transparent;
+  padding: 6px 12px;
+  border: 2px solid transparent;
   font-weight: 500;
+  width: auto;
   display: flex;
   align-items: center;
   position: relative;
   border-radius: 21px;
   pointer-events: auto;
-  transition: border 0.2s ease-in-out;
+  transition: width 0.2s ease-in-out, border 0.2s ease-in-out;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 100%;
+    width: auto;
+    padding: 6px 12px 6px 8px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 6px 8px;
+  `};
 
   &:hover {
-    border: 1px solid ${({ theme }) => transparentize(0.4, theme.text1)};
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
   }
 
   ${({ theme, isLoading }) =>
@@ -76,22 +86,25 @@ interface CowBalanceButtonProps {
   account?: string | null | undefined
   chainId: ChainId | undefined
   onClick?: () => void
+  isUpToSmall?: boolean
 }
 
 const COW_DECIMALS = COW[ChainId.MAINNET].decimals
 
-export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) {
+export default function CowBalanceButton({ onClick, isUpToSmall }: CowBalanceButtonProps) {
   const { balance, isLoading } = useCombinedBalance()
 
-  const formattedBalance = formatSmartLocaleAware(balance, AMOUNT_PRECISION)
+  const formattedBalance = formatSmartLocaleAware(balance, 0)
   const formattedMaxBalance = formatMax(balance, COW_DECIMALS)
 
   return (
     <Wrapper isLoading={isLoading} onClick={onClick}>
       <CowProtocolLogo />
-      <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
-        <Trans>{formattedBalance || 0}</Trans>
-      </b>
+      {!isUpToSmall && (
+        <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
+          <Trans>{formattedBalance || 0}</Trans>
+        </b>
+      )}
     </Wrapper>
   )
 }
diff --git a/src/custom/components/CowProtocolLogo/index.tsx b/src/custom/components/CowProtocolLogo/index.tsx
index 3de61e7955..f5f3f5043c 100644
--- a/src/custom/components/CowProtocolLogo/index.tsx
+++ b/src/custom/components/CowProtocolLogo/index.tsx
@@ -3,7 +3,7 @@ import CowProtocolIcon from 'assets/cow-swap/cow_v2.svg'
 
 export const Icon = styled.span<Props>`
   --defaultSize: 24px;
-  --smallSize: ${({ size }) => (size ? `calc(${size}px / 1.5)` : 'calc(var(--defaultSize) / 1.5)')};
+  --smallSize: 28px;
   background: url(${CowProtocolIcon}) no-repeat center/contain;
   height: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   width: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
@@ -12,7 +12,7 @@ export const Icon = styled.span<Props>`
   border-radius: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   position: relative;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
     width: var(--smallSize);
     height: var(--smallSize);
     border-radius: var(--smallSize);
diff --git a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx b/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
index 84afbd4a7f..53e580507f 100644
--- a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
+++ b/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
@@ -18,6 +18,7 @@ import { UniIcon, LogoImage } from 'components/Header/styled' // mod
 import { HeaderRow } from 'components/Header/HeaderMod'
 import Footer from 'components/Footer'
 import { DISCORD_LINK, CODE_LINK } from 'constants/index'
+import { Routes } from 'constants/routes'
 
 /* const FallbackWrapper = styled.div`
   display: flex;
@@ -173,7 +174,7 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
         <AppWrapper>
           <HeaderWrapper>
             <HeaderRow marginRight="0">
-              <a href=".">
+              <a href={Routes.HOME}>
                 <UniIcon>
                   <LogoImage />
                 </UniIcon>
diff --git a/src/custom/components/Footer/index.tsx b/src/custom/components/Footer/index.tsx
index ed6cc4d7c9..9c419beb5d 100644
--- a/src/custom/components/Footer/index.tsx
+++ b/src/custom/components/Footer/index.tsx
@@ -20,6 +20,10 @@ const Wrapper = styled.div`
   justify-content: space-evenly;
   margin: auto 16px;
   width: 100%;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin: auto 0 100px;
+  `}
 `
 
 const FooterWrapper = styled.div`
diff --git a/src/custom/components/Header/HeaderMod.tsx b/src/custom/components/Header/HeaderMod.tsx
index 86a5799cf7..185268f147 100644
--- a/src/custom/components/Header/HeaderMod.tsx
+++ b/src/custom/components/Header/HeaderMod.tsx
@@ -88,14 +88,14 @@ export const HeaderElement = styled.div`
   display: flex;
   align-items: center;
 
-  &:not(:first-child) {
+  /* &:not(:first-child) {
     margin-left: 0.5em;
-  }
+  } */
 
   /* addresses safari's lack of support for "gap" */
-  & > *:not(:first-child) {
+  /* & > *:not(:first-child) {
     margin-left: 8px;
-  }
+  } */
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     flex-direction: row-reverse;
diff --git a/src/custom/components/Header/MobileMenuIcon/index.tsx b/src/custom/components/Header/MobileMenuIcon/index.tsx
index 922bc25f59..ea893b9d08 100644
--- a/src/custom/components/Header/MobileMenuIcon/index.tsx
+++ b/src/custom/components/Header/MobileMenuIcon/index.tsx
@@ -1,51 +1,51 @@
 import styled, { css } from 'styled-components/macro'
-import { useState } from 'react'
 
-const Wrapper = styled.div<{ isOpen: boolean }>`
+const Wrapper = styled.div<{ isMobileMenuOpen: boolean; height?: number; width?: number; lineSize?: number }>`
+  z-index: 102;
   display: flex;
   cursor: pointer;
-  height: 50px;
-  margin: 0 auto;
+  margin: 0 6px 0 16px;
   position: relative;
-  width: 60px;
+  width: ${({ width }) => (width ? width + 'px' : '34px')};
+  height: ${({ height }) => (height ? height + 'px' : '18px')};
 
 
   span {
     background-color: ${({ theme }) => theme.text1};
     border-radius: 3px;
-    height: 6px;
+    height: ${({ lineSize }) => (lineSize ? lineSize + 'px' : '2px')};
     position: absolute;
-    transition-duration: 150ms;
-    transition: cubic-bezier(0.8, 0.5, 0.2, 1.4);
+    transition: all 0.15s cubic-bezier(0.8, 0.5, 0.2, 1.4);
     width: 100%;
+    margin: auto;
   }
 
   span:nth-child(1) {
-    left: 0px;
-    top: 0px;
-    transition-duration: 150ms;
+    left: 0;
+    top: 0;
   }
 
   span:nth-child(2) {
-    left: 0px;
+    left: 0;
     opacity: 1;
-    top: 21px;
+    top: 50%;
+    bottom: 50%;
   }
 
   span:nth-child(3) {
-    bottom: 0px;
-    left: 0px;
-    transition-duration: 150ms;
+    bottom: 0;
+    left: 0;
+    width: 75%;
   }
 
 
-  ${({ isOpen }) =>
-    isOpen &&
+  ${({ isMobileMenuOpen }) =>
+    isMobileMenuOpen &&
     css`
       span:nth-child(1) {
-        top: 21px;
         transform: rotate(45deg);
-        transition-duration: 150ms;
+        top: 50%;
+        bottom: 50%;
       }
 
       span:nth-child(2) {
@@ -53,21 +53,27 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
       }
 
       span:nth-child(3) {
-        top: 21px;
         transform: rotate(-45deg);
-        transition-duration: 150ms;
+        top: 50%;
+        bottom: 50%;
+        width: 100%;
       }
     `};
   
 }
 `
 
-export default function MobileMenuIcon() {
-  const [isOpen, setIsOpen] = useState(false)
-  const handleOnClick = () => setIsOpen(!isOpen)
+interface IconProps {
+  isMobileMenuOpen: boolean
+  width?: number
+  height?: number
+  lineSize?: number
+  onClick: () => void
+}
 
+export default function MobileMenuIcon({ isMobileMenuOpen, width, height, lineSize, onClick }: IconProps) {
   return (
-    <Wrapper onClick={handleOnClick} isOpen={isOpen}>
+    <Wrapper isMobileMenuOpen={isMobileMenuOpen} width={width} height={height} lineSize={lineSize} onClick={onClick}>
       <span></span>
       <span></span>
       <span></span>
diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
index 346886d5a2..9685e06aab 100644
--- a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
+++ b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
@@ -67,19 +67,19 @@ const FlyoutHeader = styled.div`
   color: ${({ theme }) => theme.text2};
   font-weight: 400;
 ` */
-const FlyoutMenu = styled.div`
+export const FlyoutMenu = styled.div`
   position: absolute;
   top: 54px;
   width: 272px;
   z-index: 99;
   padding-top: 10px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  /* @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     top: 38px;
-  }
+  } */
 
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  /* ${({ theme }) => theme.mediaWidth.upToExtraSmall`
     right: 20%;
-  `}
+  `} */
 `
 // mod: actually, this is closer to original version but I haven't yet pulled latest from uniswap
 const FlyoutMenuContents = styled.div`
diff --git a/src/custom/components/Header/NetworkSelector/index.tsx b/src/custom/components/Header/NetworkSelector/index.tsx
index 8fa05fba87..10ebf6ec02 100644
--- a/src/custom/components/Header/NetworkSelector/index.tsx
+++ b/src/custom/components/Header/NetworkSelector/index.tsx
@@ -1,10 +1,22 @@
 import styled from 'styled-components/macro'
-import NetworkSelectorMod, { SelectorLabel, SelectorControls } from './NetworkSelectorMod'
+import NetworkSelectorMod, { SelectorLabel, SelectorControls, FlyoutMenu } from './NetworkSelectorMod'
 import { transparentize } from 'polished'
+export { getChainNameFromId, getParsedChainId } from './NetworkSelectorMod'
 
 const Wrapper = styled.div`
   display: flex;
 
+  ${FlyoutMenu} {
+    top: 38px;
+    right: 0;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      width: 100%;
+      left: 0;
+      top: 58px;
+    `};
+  }
+
   ${SelectorLabel} {
     ${({ theme }) => theme.mediaWidth.upToMedium`
       display: none;
@@ -13,12 +25,25 @@ const Wrapper = styled.div`
 
   ${SelectorControls} {
     border-radius: 21px;
-    border: 1px solid transparent;
-    padding: 6px 12px;
+    border: 2px solid transparent;
+    padding: 6px;
     transition: border 0.2s ease-in-out;
 
+    > img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+      margin: 0 6px 0 0;
+    }
+
+    ${SelectorLabel} + svg {
+      width: 18px;
+      height: 18px;
+      stroke-width: 3px;
+    }
+
     &:hover {
-      border: 1px solid ${({ theme }) => transparentize(0.4, theme.text1)};
+      border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
     }
   }
 `
diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
index 105a2efa2e..63c4716798 100644
--- a/src/custom/components/Header/index.tsx
+++ b/src/custom/components/Header/index.tsx
@@ -1,24 +1,21 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
+import { Routes } from 'constants/routes'
 import { useHistory } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useNativeCurrencyBalances } from 'state/wallet/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
-import {
-  AMOUNT_PRECISION,
-  DUNE_DASHBOARD_LINK,
-  CONTRACTS_CODE_LINK,
-  DOCS_LINK,
-  DISCORD_LINK,
-  TWITTER_LINK,
-} from 'constants/index'
+import { useMediaQuery, upToSmall, upToLarge } from 'hooks/useMediaQuery'
+import { AMOUNT_PRECISION } from 'constants/index'
+import { MAIN_MENU, MAIN_MENU_TYPE } from 'constants/mainMenu'
 import { supportedChainId } from 'utils/supportedChainId'
 import { formatSmart } from 'utils/format'
+import { toggleBodyClass } from 'utils/toggleBodyClass'
 import SVG from 'react-inlinesvg'
 
 // Components
 import { ExternalLink } from 'theme/components'
-import { HeaderRow, HeaderElement } from './HeaderMod'
+import { HeaderRow } from './HeaderMod'
 import {
   Wrapper,
   Title,
@@ -30,7 +27,7 @@ import {
   AccountElement,
   BalanceText,
   HeaderControls,
-  VCowWrapper,
+  HeaderElement,
 } from './styled'
 import MobileMenuIcon from './MobileMenuIcon'
 import MenuDropdown from 'components/MenuDropdown'
@@ -41,14 +38,6 @@ import NetworkSelector from 'components/Header/NetworkSelector'
 import CowBalanceButton from 'components/CowBalanceButton'
 
 // Assets
-import IMAGE_DOCS from 'assets/cow-swap/doc.svg'
-import IMAGE_INFO from 'assets/cow-swap/info.svg'
-import IMAGE_CODE from 'assets/cow-swap/code.svg'
-import IMAGE_DISCORD from 'assets/cow-swap/discord.svg'
-import IMAGE_TWITTER from 'assets/cow-swap/twitter.svg'
-import IMAGE_PIE from 'assets/cow-swap/pie.svg'
-import IMAGE_SLICER from 'assets/cow-swap/ninja-cow.png'
-import IMAGE_GAME from 'assets/cow-swap/game.gif'
 import IMAGE_MOON from 'assets/cow-swap/moon.svg'
 import IMAGE_SUN from 'assets/cow-swap/sun.svg'
 
@@ -80,92 +69,109 @@ export default function Header() {
 
   const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false)
   const closeOrdersPanel = () => setIsOrdersPanelOpen(false)
-  const openOrdersPanel = () => setIsOrdersPanelOpen(true)
+  const openOrdersPanel = () => account && setIsOrdersPanelOpen(true)
 
   const history = useHistory()
   const handleBalanceButtonClick = () => history.push('/account')
+  const isUpToLarge = useMediaQuery(upToLarge)
+  const isUpToSmall = useMediaQuery(upToSmall)
+
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const handleMobileMenuOnClick = useCallback(
+    () => isUpToLarge && setIsMobileMenuOpen(!isMobileMenuOpen),
+    [isUpToLarge, isMobileMenuOpen]
+  )
 
   // Toggle the 'noScroll' class on body, whenever the orders panel is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
   useEffect(() => {
-    isOrdersPanelOpen ? document.body.classList.add('noScroll') : document.body.classList.remove('noScroll')
-  }, [isOrdersPanelOpen])
-
-  // const close = useToggleModal(ApplicationModal.MENU)
+    isOrdersPanelOpen ? toggleBodyClass('noScroll', true) : toggleBodyClass('noScroll', false)
+    isUpToLarge && isMobileMenuOpen ? toggleBodyClass('noScroll', true) : toggleBodyClass('noScroll', false)
+  }, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge])
+
+  const getMainMenu = useMemo(
+    () =>
+      MAIN_MENU.map(({ title, url, externalURL, items }: MAIN_MENU_TYPE, index) =>
+        !items && !externalURL && url ? (
+          <StyledNavLink key={index} to={url} onClick={handleMobileMenuOnClick}>
+            {title}
+          </StyledNavLink>
+        ) : !items && externalURL && url ? (
+          <ExternalLink key={index} href={url} onClickOptional={handleMobileMenuOnClick}>
+            {title}
+          </ExternalLink>
+        ) : items ? (
+          <MenuDropdown key={index} title={title}>
+            {items.map(({ sectionTitle, links }, index) => {
+              return (
+                <MenuSection key={index}>
+                  {sectionTitle && <MenuTitle>{sectionTitle}</MenuTitle>}
+                  {links.map(({ title, url, externalURL, icon, iconSVG, action }, index) => {
+                    return action && action === 'setColorMode' ? (
+                      <button
+                        key={index}
+                        onClick={() => {
+                          toggleDarkMode()
+                          handleMobileMenuOnClick()
+                        }}
+                      >
+                        <SVG
+                          src={darkMode ? IMAGE_SUN : IMAGE_MOON}
+                          description={`${darkMode ? 'Sun/light' : 'Moon/dark'} mode icon`}
+                        />{' '}
+                        {darkMode ? 'Light' : 'Dark'} Mode
+                      </button>
+                    ) : !externalURL && url ? (
+                      <StyledNavLink key={index} to={url} onClick={handleMobileMenuOnClick}>
+                        {iconSVG ? (
+                          <SVG src={iconSVG} description={`${title} icon`} />
+                        ) : icon ? (
+                          <img src={icon} alt={`${title} icon`} />
+                        ) : null}{' '}
+                        {title}
+                      </StyledNavLink>
+                    ) : url ? (
+                      <ExternalLink key={index} href={url} onClickOptional={handleMobileMenuOnClick}>
+                        {iconSVG ? (
+                          <SVG src={iconSVG} description={`${title} icon`} />
+                        ) : icon ? (
+                          <img src={icon} alt={`${title} icon`} />
+                        ) : null}{' '}
+                        {title}
+                      </ExternalLink>
+                    ) : null
+                  })}
+                </MenuSection>
+              )
+            })}
+          </MenuDropdown>
+        ) : null
+      ),
+    [darkMode, handleMobileMenuOnClick, toggleDarkMode]
+  )
 
   return (
-    <Wrapper>
+    <Wrapper isMobileMenuOpen={isMobileMenuOpen}>
       <HeaderModWrapper>
         <HeaderRow>
-          <Title href=".">
+          <Title href={Routes.HOME} isMobileMenuOpen={isMobileMenuOpen}>
             <UniIcon>
-              <LogoImage />
+              <LogoImage isMobileMenuOpen={isMobileMenuOpen} />
             </UniIcon>
           </Title>
-          <HeaderLinks>
-            <StyledNavLink to="/swap">Swap</StyledNavLink>
-            <StyledNavLink to="/account">Account</StyledNavLink>
-            <StyledNavLink to="/faq">FAQ</StyledNavLink>
-            <MenuDropdown title="More">
-              <MenuSection>
-                <MenuTitle>Overview</MenuTitle>
-                <ExternalLink href={DOCS_LINK}>
-                  <SVG src={IMAGE_DOCS} description="Docs icon" /> Documentation
-                </ExternalLink>
-                <StyledNavLink to="/about">
-                  <SVG src={IMAGE_INFO} description="About icon" /> About
-                </StyledNavLink>
-                <ExternalLink href={DUNE_DASHBOARD_LINK}>
-                  <SVG src={IMAGE_PIE} description="Pie chart icon" /> Statistics
-                </ExternalLink>
-                <ExternalLink href={CONTRACTS_CODE_LINK}>
-                  <SVG src={IMAGE_CODE} description="Code icon" /> Contract
-                </ExternalLink>
-              </MenuSection>
-
-              <MenuSection>
-                <MenuTitle>Community</MenuTitle>
-                <ExternalLink href={DISCORD_LINK}>
-                  <SVG src={IMAGE_DISCORD} description="Discord icon" /> Discord
-                </ExternalLink>
-                <ExternalLink href={TWITTER_LINK}>
-                  <SVG src={IMAGE_TWITTER} description="Twitter icon" /> Twitter
-                </ExternalLink>
-              </MenuSection>
-
-              <MenuSection>
-                <MenuTitle>Other</MenuTitle>
-                <button onClick={() => toggleDarkMode()}>
-                  {darkMode ? (
-                    <>
-                      <SVG src={IMAGE_SUN} description="Sun light mode icon" /> Light
-                    </>
-                  ) : (
-                    <>
-                      <SVG src={IMAGE_MOON} description="Moon dark mode icon" /> Dark
-                    </>
-                  )}{' '}
-                  Mode
-                </button>
-                <StyledNavLink to="/play/cow-runner">
-                  <img src={IMAGE_GAME} alt="Running COW" /> CoW Runner
-                </StyledNavLink>
-                <StyledNavLink to="/play/mev-slicer">
-                  <img src={IMAGE_SLICER} alt="COW Ninja" /> MEV Slicer
-                </StyledNavLink>
-              </MenuSection>
-            </MenuDropdown>
-          </HeaderLinks>
+          <HeaderLinks isMobileMenuOpen={isMobileMenuOpen}>{getMainMenu}</HeaderLinks>
         </HeaderRow>
 
         <HeaderControls>
+          <NetworkSelector />
+
           <HeaderElement>
-            <NetworkSelector />
-          </HeaderElement>
-          <HeaderElement>
-            <VCowWrapper>
-              <CowBalanceButton onClick={handleBalanceButtonClick} account={account} chainId={chainId} />
-            </VCowWrapper>
+            <CowBalanceButton
+              onClick={handleBalanceButtonClick}
+              account={account}
+              chainId={chainId}
+              isUpToSmall={isUpToSmall}
+            />
 
             <AccountElement active={!!account} onClick={openOrdersPanel}>
               {account && userEthBalance && (
@@ -177,8 +183,9 @@ export default function Header() {
             </AccountElement>
           </HeaderElement>
         </HeaderControls>
+
+        {isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />}
         {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
-        <MobileMenuIcon />
       </HeaderModWrapper>
     </Wrapper>
   )
diff --git a/src/custom/components/Header/styled.ts b/src/custom/components/Header/styled.ts
index 4d4f7b40a1..950f5a2a3f 100644
--- a/src/custom/components/Header/styled.ts
+++ b/src/custom/components/Header/styled.ts
@@ -1,18 +1,17 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { transparentize, darken } from 'polished'
 import HeaderMod, {
   Title as TitleMod,
   HeaderLinks as HeaderLinksMod,
   HeaderControls as HeaderControlsUni,
   BalanceText as BalanceTextUni,
-  HeaderElement,
   AccountElement as AccountElementUni,
   StyledNavLink as StyledNavLinkUni,
   StyledMenuButton,
   HeaderFrame,
-  UNIWrapper,
+  HeaderElement as HeaderElementUni,
 } from './HeaderMod'
-import { MenuFlyout } from 'components/MenuDropdown/styled'
+import { MenuFlyout, MenuSection, Content as MenuContent, MenuTitle } from 'components/MenuDropdown/styled'
 
 export const StyledNavLink = styled(StyledNavLinkUni)`
   transition: color 0.15s ease-in-out;
@@ -45,36 +44,56 @@ export const BalanceText = styled(BalanceTextUni)`
 
 export const HeaderControls = styled(HeaderControlsUni)`
   justify-content: flex-end;
+  gap: 12px;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.mediaWidth.upToLarge`
     max-width: 100%;
+    margin: 0 0 0 auto;
     padding: 0;
     height: auto;
-    width: 100%;
+    width: auto;
   `};
 `
-export const Wrapper = styled.div`
+
+export const HeaderElement = styled(HeaderElementUni)`
+  border-radius: 0;
+  gap: 12px;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    flex-direction: row;
+    justify-content: flex-end;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-radius: 0;
+    height: 64px;
+    background-color: ${({ theme }) => transparentize(0.1, theme.bg3)};
+    border-top: 1px solid ${({ theme }) => transparentize(0.7, theme.border)};
+    backdrop-filter: blur(21px);
+    padding: 10px 16px;
+    gap: 8px;
+  `}
+`
+
+export const Wrapper = styled.div<{ isMobileMenuOpen: boolean }>`
   width: 100%;
 
   ${HeaderFrame} {
     padding: 16px;
-    grid-template-columns: auto auto;
-    grid-gap: 16px;
-
-    ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-      padding: 10px;
-    `}
-  }
+    display: flex;
 
-  ${HeaderElement} {
-    ${({ theme }) => theme.mediaWidth.upToSmall`
-      width: 100%;
-    `};
+    ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
+      grid-template-columns: unset;
 
-    ${({ theme }) => theme.mediaWidth.upToMedium`
-      flex-direction: initial;
-      align-items: inherit;
-    `};
+      ${
+        isMobileMenuOpen &&
+        css`
+          position: absolute;
+          top: 0;
+        `
+      }
+    `}
   }
 
   ${StyledMenuButton} {
@@ -87,14 +106,23 @@ export const Wrapper = styled.div`
 
 export const HeaderModWrapper = styled(HeaderMod)``
 
-export const Title = styled(TitleMod)`
+export const Title = styled(TitleMod)<{ isMobileMenuOpen: boolean }>`
   margin: 0;
   text-decoration: none;
   color: ${({ theme }) => theme.text1};
+
+  ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
+    ${
+      isMobileMenuOpen &&
+      css`
+        z-index: 101;
+      `
+    }
+  `};
 `
 
-export const HeaderLinks = styled(HeaderLinksMod)`
-  margin: 5px 0 0 0;
+export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>`
+  margin: 0;
 
   // Enforce uniform styling of different menu items/components
   > ${StyledNavLink}, > ${MenuFlyout} > button {
@@ -106,8 +134,8 @@ export const HeaderLinks = styled(HeaderLinksMod)`
     font-weight: 500;
     appearance: none;
     outline: 0;
-    margin: 0 6px;
-    padding: 6px 8px;
+    margin: 0 4px;
+    padding: 8px 12px;
     background: 0;
     border: 0;
     cursor: pointer;
@@ -115,6 +143,17 @@ export const HeaderLinks = styled(HeaderLinksMod)`
     transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
     color: ${({ theme }) => transparentize(0.4, theme.text1)};
 
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      width: 100%;
+      border-radius: 0;
+      margin: 0;
+      font-weight: 600;
+      font-size: 17px;
+      padding: 28px 10px;
+      color: ${({ theme }) => theme.text1};
+      border-bottom: 1px solid ${({ theme }) => transparentize(0.9, theme.text1)};
+    `};
+
     > svg > path {
       fill: ${({ theme }) => transparentize(0.4, theme.text1)};
       transition: fill 0.15s ease-in-out;
@@ -124,18 +163,100 @@ export const HeaderLinks = styled(HeaderLinksMod)`
       color: ${({ theme }) => theme.text1};
       background: ${({ theme }) => transparentize(0.95, theme.text1)};
 
+      ${({ theme }) => theme.mediaWidth.upToLarge`
+        background: transparent;
+      `};
+
       > svg > path {
         fill: ${({ theme }) => theme.text1};
       }
     }
 
+    &.expanded {
+      border: 0;
+    }
+
+    &.expanded + ${MenuContent} {
+      ${({ theme }) => theme.mediaWidth.upToLarge`
+        border-bottom: 1px solid ${({ theme }) => transparentize(0.9, theme.text1)};
+      `};
+    }
+
     &.ACTIVE {
       color: ${({ theme }) => theme.text1};
     }
   }
 
-  ${({ theme }) => theme.mediaWidth.upToLarge`
+  ${MenuFlyout} {
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      width: 100%;
+      flex-flow: column wrap;
+
+      > button > svg {
+        margin: 0 0 0 auto;
+        height: 10px;
+      }
+    `};
+  }
+
+  ${MenuContent} {
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      padding: 8px 10px 28px;
+      gap: 36px;
+      margin: 0;
+    `};
+  }
+
+  ${MenuSection} {
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      gap 36px;
+      opacity: 0.7;
+    `};
+  }}
+
+  ${MenuTitle} {
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      display: none;
+    `};
+  }}
+
+  ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
     display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    background: ${({ theme }) => theme.bg4};
+    outline: 0;
+    padding: 60px 8px;
+    overflow-y: auto;
+
+    ${
+      isMobileMenuOpen &&
+      css`
+        display: flex;
+
+        &::before {
+          content: '';
+          width: 100%;
+          display: flex;
+          height: 60px;
+          background: ${({ theme }) => theme.bg4};
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: 1;
+        }
+
+        // transform: translate3d(100%, 0, 0);
+      `
+    }
   `};
 `
 
@@ -170,7 +291,7 @@ export const TwitterLink = styled(StyledMenuButton)`
   }
 `
 
-export const LogoImage = styled.div`
+export const LogoImage = styled.div<{ isMobileMenuOpen?: boolean }>`
   width: 190px;
   height: 48px;
   background: ${({ theme }) => `url(${theme.logo.src}) no-repeat center/contain`};
@@ -182,6 +303,16 @@ export const LogoImage = styled.div`
     height: 34px;
   `}
 
+  ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
+    ${
+      isMobileMenuOpen &&
+      css`
+        background: ${({ theme }) => `url(${theme.logo.srcIcon}) no-repeat left/contain`};
+        height: 34px;
+      `
+    }
+  `}
+
   > svg {
     width: 100%;
     height: 100%;
@@ -199,22 +330,21 @@ export const UniIcon = styled.div`
   }
 `
 
-export const VCowWrapper = styled(UNIWrapper)`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `}
-`
-
 export const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
   background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg4)};
   border-radius: 21px;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   transition: border 0.2s ease-in-out;
   pointer-events: auto;
+  width: auto;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 100%;
+  `}
 
   &:hover,
   &:focus {
-    border: 1px solid ${({ theme }) => transparentize(0.4, theme.text1)};
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
   }
 
   ${BalanceText} {
diff --git a/src/custom/components/MenuDropdown/index.tsx b/src/custom/components/MenuDropdown/index.tsx
index bae8b381f5..f52ab03b3a 100644
--- a/src/custom/components/MenuDropdown/index.tsx
+++ b/src/custom/components/MenuDropdown/index.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { MenuFlyout, Content } from './styled'
 import IMAGE_CARRET_DOWN from 'assets/cow-swap/carret-down.svg'
 import SVG from 'react-inlinesvg'
+import { useMediaQuery, upToLarge } from 'hooks/useMediaQuery'
 
 interface MenuProps {
   title: string
@@ -9,15 +10,21 @@ interface MenuProps {
 }
 
 export function Menu({ title, children }: MenuProps) {
+  const isUpToLarge = useMediaQuery(upToLarge)
   const [showMenu, setShowMenu] = useState(false)
-  const handleOnClick = () => setShowMenu(true)
-  const handleMouseEnter = () => setShowMenu(true)
-  const handleMouseLeave = () => setShowMenu(false)
+  const handleOnClick = () => isUpToLarge && setShowMenu(!showMenu)
+  const handleMouseEnter = () => !isUpToLarge && setShowMenu(true)
+  const handleMouseLeave = () => !isUpToLarge && setShowMenu(false)
 
   return (
     <MenuFlyout>
-      <button onClick={handleOnClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        {title} <SVG src={IMAGE_CARRET_DOWN} description="dropdown icon" />
+      <button
+        onClick={handleOnClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={showMenu ? 'expanded' : ''}
+      >
+        {title} <SVG src={IMAGE_CARRET_DOWN} description="dropdown icon" className={showMenu ? 'expanded' : ''} />
       </button>
       {showMenu && (
         <Content onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
diff --git a/src/custom/components/MenuDropdown/styled.ts b/src/custom/components/MenuDropdown/styled.ts
index 6946c5bc13..e3985c5822 100644
--- a/src/custom/components/MenuDropdown/styled.ts
+++ b/src/custom/components/MenuDropdown/styled.ts
@@ -7,6 +7,10 @@ export const MenuFlyout = styled.ol`
   position: relative;
 
   > button {
+    &.expanded {
+      border: none;
+    }
+
     &:hover {
       &::after {
         content: '';
@@ -17,6 +21,10 @@ export const MenuFlyout = styled.ol`
         bottom: -18px;
         left: 0;
         background: transparent;
+
+        ${({ theme }) => theme.mediaWidth.upToLarge`
+          content: none;
+        `};
       }
     }
 
@@ -26,6 +34,11 @@ export const MenuFlyout = styled.ol`
       height: 6px;
       object-fit: contain;
     }
+
+    > svg.expanded {
+      transition: transform 0.3s ease-in-out;
+      transform: rotate(180deg);
+    }
   }
 `
 
@@ -34,7 +47,6 @@ export const Content = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  background: red;
   border-radius: 16px;
   background: ${({ theme }) => theme.bg4};
   box-shadow: 0 12px 18px ${({ theme }) => theme.bg5};
@@ -42,6 +54,18 @@ export const Content = styled.div`
   gap: 62px;
   margin: 12px 0 0;
 
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+    position: relative;
+    top: initial;
+    left: initial;
+    border-radius: 0;
+    display: flex;
+    flex-flow: column wrap;
+  `};
+
   > div {
     display: flex;
     flex-flow: column wrap;
diff --git a/src/custom/components/OrdersPanel/index.tsx b/src/custom/components/OrdersPanel/index.tsx
index 7a8cf1a66a..a2ae163b71 100644
--- a/src/custom/components/OrdersPanel/index.tsx
+++ b/src/custom/components/OrdersPanel/index.tsx
@@ -23,7 +23,7 @@ const SideBar = styled.div`
   margin: auto;
   bottom: 0;
   left: 0;
-  z-index: 99;
+  z-index: 102;
   padding: 0;
   cursor: default;
   overflow-y: auto; // fallback for 'overlay'
diff --git a/src/custom/components/TransactionConfirmationModal/index.tsx b/src/custom/components/TransactionConfirmationModal/index.tsx
index 9749487aaa..277966daf0 100644
--- a/src/custom/components/TransactionConfirmationModal/index.tsx
+++ b/src/custom/components/TransactionConfirmationModal/index.tsx
@@ -21,6 +21,7 @@ import { ColumnCenter } from 'components/Column'
 import { getStatusIcon } from 'components/AccountDetails'
 import { shortenAddress } from 'utils'
 import { getChainCurrencySymbols } from 'utils/xdai/hack'
+import { Routes } from 'constants/routes'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -550,7 +551,7 @@ export function TransactionSubmittedContent({
           )}
 
           <ButtonCustom>
-            <InternalLink to="/play/cow-runner" onClick={onDismiss}>
+            <InternalLink to={Routes.PLAY_COWRUNNER} onClick={onDismiss}>
               <StyledIcon src={GameIcon} alt="Play CowGame" />
               Play the Cow Runner Game!
             </InternalLink>
diff --git a/src/custom/components/WalletModal/index.tsx b/src/custom/components/WalletModal/index.tsx
index af3cbc021f..3e5be9a00f 100644
--- a/src/custom/components/WalletModal/index.tsx
+++ b/src/custom/components/WalletModal/index.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
 import WalletModalMod, { WalletModalProps } from './WalletModalMod'
 import { ExternalLink } from 'theme'
 import { Trans } from '@lingui/macro'
+import { Routes } from 'constants/routes'
 
 // export * from '@src/components/WalletModal'
 
@@ -15,7 +16,7 @@ function CustomTerms() {
     <TermsWrapper>
       <Trans>
         By connecting a wallet, you agree to GnosisDAO&apos;s{' '}
-        <ExternalLink href="#/terms-and-conditions">Terms &amp; Conditions</ExternalLink> and acknowledge that you have
+        <ExternalLink href={Routes.TERMS_CONDITIONS}>Terms &amp; Conditions</ExternalLink> and acknowledge that you have
         read, understood, and agree to them.{' '}
       </Trans>
     </TermsWrapper>
diff --git a/src/custom/components/Web3Status/index.tsx b/src/custom/components/Web3Status/index.tsx
index 83d72d9756..66acb883d3 100644
--- a/src/custom/components/Web3Status/index.tsx
+++ b/src/custom/components/Web3Status/index.tsx
@@ -11,30 +11,24 @@ import { STORAGE_KEY_LAST_PROVIDER } from 'constants/index'
 
 export const Wrapper = styled.div`
   color: ${({ theme }) => theme.wallet?.color};
-  padding: 1px;
   height: 40px;
-  border: 1px solid transparent;
   width: 100%;
   display: flex;
+  padding: 0;
+  margin: 0;
   justify-content: center;
 
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    width: auto;
+    height: 100%;
+    margin: 0 0 0 auto;
+  `};
+
   button {
     height: auto;
     border-radius: 21px;
     padding: 6px 12px;
     width: max-content;
-
-    ${({ theme }) => theme.mediaWidth.upToVerySmall`
-        max-width: 100%;
-      `};
-
-    > p {
-      margin: 0;
-
-      ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-        font-size: 13px;
-      `};
-    }
   }
 
   ${Web3StatusConnected} {
@@ -42,6 +36,7 @@ export const Wrapper = styled.div`
     color: ${({ theme }) => theme.wallet?.color};
     background: ${({ theme }) => theme.wallet?.background};
     height: 100%;
+    width: 100%;
     border: 0;
     box-shadow: none;
     padding: 6px 8px;
@@ -57,10 +52,6 @@ export const Wrapper = styled.div`
   }
 
   ${Text} {
-    ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-      font-size: 13px;
-      margin: 0 0.5rem 0 0.25rem;
-    `}
   }
 `
 
diff --git a/src/custom/constants/mainMenu.ts b/src/custom/constants/mainMenu.ts
new file mode 100644
index 0000000000..971f0ce8b7
--- /dev/null
+++ b/src/custom/constants/mainMenu.ts
@@ -0,0 +1,77 @@
+import { Routes } from 'constants/routes'
+import { DUNE_DASHBOARD_LINK, CONTRACTS_CODE_LINK, DOCS_LINK, DISCORD_LINK, TWITTER_LINK } from 'constants/index'
+
+// Assets
+import IMAGE_DOCS from 'assets/cow-swap/doc.svg'
+import IMAGE_INFO from 'assets/cow-swap/info.svg'
+import IMAGE_CODE from 'assets/cow-swap/code.svg'
+import IMAGE_DISCORD from 'assets/cow-swap/discord.svg'
+import IMAGE_TWITTER from 'assets/cow-swap/twitter.svg'
+import IMAGE_PIE from 'assets/cow-swap/pie.svg'
+import IMAGE_SLICER from 'assets/cow-swap/ninja-cow.png'
+import IMAGE_GAME from 'assets/cow-swap/game.gif'
+
+export interface MAIN_MENU_TYPE {
+  title: string
+  url?: string
+  externalURL?: boolean
+  items?: {
+    sectionTitle?: string
+    links: {
+      title?: string
+      url?: string // If URL is an internal route
+      externalURL?: boolean // If URL is external
+      icon?: string // If icon uses a regular <img /> tag
+      iconSVG?: string // If icon is a <SVG> inline component
+      action?: string // Special purpose flag for non-regular links
+    }[]
+  }[]
+}
+
+export const MAIN_MENU = [
+  { title: 'Swap', url: Routes.SWAP },
+  { title: 'Account', url: Routes.ACCOUNT },
+  {
+    title: 'FAQ',
+    items: [
+      {
+        links: [
+          { title: 'Overview', url: Routes.FAQ },
+          { title: 'Protocol', url: Routes.FAQ_PROTOCOL },
+          { title: 'Token', url: Routes.FAQ_TOKEN },
+          { title: 'Trading', url: Routes.FAQ_TRADING },
+          { title: 'Affiliate', url: Routes.FAQ_AFFILIATE },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'More',
+    items: [
+      {
+        sectionTitle: 'Overview',
+        links: [
+          { title: 'Documentation', url: DOCS_LINK, externalURL: true, iconSVG: IMAGE_DOCS },
+          { title: 'About', url: Routes.ABOUT, iconSVG: IMAGE_INFO },
+          { title: 'Statistics', url: DUNE_DASHBOARD_LINK, externalURL: true, iconSVG: IMAGE_PIE },
+          { title: 'Contract', url: CONTRACTS_CODE_LINK, externalURL: true, iconSVG: IMAGE_CODE },
+        ],
+      },
+      {
+        sectionTitle: 'Community',
+        links: [
+          { title: 'Discord', url: DISCORD_LINK, externalURL: true, iconSVG: IMAGE_DISCORD },
+          { title: 'Twitter', url: TWITTER_LINK, externalURL: true, iconSVG: IMAGE_TWITTER },
+        ],
+      },
+      {
+        sectionTitle: 'Other',
+        links: [
+          { action: 'setColorMode' },
+          { title: 'CoW Runner', url: Routes.PLAY_COWRUNNER, icon: IMAGE_GAME },
+          { title: 'MEV Slicer', url: Routes.PLAY_MEVSLICER, icon: IMAGE_SLICER },
+        ],
+      },
+    ],
+  },
+]
diff --git a/src/custom/constants/routes.ts b/src/custom/constants/routes.ts
new file mode 100644
index 0000000000..9931890d86
--- /dev/null
+++ b/src/custom/constants/routes.ts
@@ -0,0 +1,24 @@
+// ENUM with routes
+export enum Routes {
+  HOME = '/',
+  SWAP = '/swap',
+  SWAP_OUTPUT_CURRENCY = '/swap/:outputCurrency',
+  SEND = '/send',
+  ACCOUNT = '/account',
+  ABOUT = '/about',
+  PRIVACY_POLICY = '/privacy-policy',
+  COOKIE_POLICY = '/cookie-policy',
+  TERMS_CONDITIONS = '/terms-and-conditions',
+  FAQ = '/faq',
+  FAQ_PROTOCOL = '/faq/protocol',
+  FAQ_TOKEN = '/faq/protocol',
+  FAQ_TRADING = '/faq/trading',
+  FAQ_AFFILIATE = '/faq/affiliate',
+  PLAY_COWRUNNER = '/play/cow-runner',
+  PLAY_MEVSLICER = '/play/mev-slicer',
+  ANYSWAP_AFFECTED = '/anyswap-affected-users',
+  CHAT = '/chat',
+  DOCS = '/docs',
+  STATS = '/stats',
+  TWITTER = '/twitter',
+}
diff --git a/src/custom/hooks/useChangeNetworks.ts b/src/custom/hooks/useChangeNetworks.ts
index de1d2d40b1..1b5baaf19c 100644
--- a/src/custom/hooks/useChangeNetworks.ts
+++ b/src/custom/hooks/useChangeNetworks.ts
@@ -9,7 +9,7 @@ import usePrevious from 'hooks/usePrevious'
 import { addPopup, ApplicationModal } from 'state/application/reducer'
 import { useAppDispatch } from 'state/hooks'
 import { replaceURLParam } from 'utils/routes'
-import { getChainNameFromId, getParsedChainId } from 'components/Header/NetworkSelector/NetworkSelectorMod'
+import { getChainNameFromId, getParsedChainId } from 'components/Header/NetworkSelector'
 import { useHistory } from 'react-router-dom'
 
 type ChangeNetworksParams = Pick<ReturnType<typeof useActiveWeb3React>, 'account' | 'chainId' | 'library'>
diff --git a/src/custom/hooks/useMediaQuery.ts b/src/custom/hooks/useMediaQuery.ts
new file mode 100644
index 0000000000..9b7177010c
--- /dev/null
+++ b/src/custom/hooks/useMediaQuery.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react'
+import { MEDIA_WIDTHS } from 'theme'
+
+export const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => setMatches(media.matches)
+    window.addEventListener('resize', listener)
+    return () => window.removeEventListener('resize', listener)
+  }, [matches, query])
+
+  return matches
+}
+
+export const upToSmall = `(max-width: ${MEDIA_WIDTHS.upToSmall}px)`
+export const upToMedium = `(max-width: ${MEDIA_WIDTHS.upToMedium}px)`
+export const upToLarge = `(max-width: ${MEDIA_WIDTHS.upToLarge}px)`
diff --git a/src/custom/pages/About/index.tsx b/src/custom/pages/About/index.tsx
index ceacdd92ae..35f06c4b32 100644
--- a/src/custom/pages/About/index.tsx
+++ b/src/custom/pages/About/index.tsx
@@ -8,6 +8,7 @@ import { MEV_TOTAL, FLASHBOTS_LINK } from 'constants/index'
 import diagramIMG from 'assets/cow-swap/cowswap-diagram.png'
 import gaslessIMG from 'assets/cow-swap/gasless.png'
 import mevIMG from 'assets/cow-swap/mev.png'
+import { Routes } from 'constants/routes'
 
 const ExternalLink = styled(ExternalLinkTheme)``
 
@@ -103,7 +104,7 @@ export default function About() {
 
         <h3>Do you want to know more?</h3>
         <p>
-          Head over to the <Link to="/faq">FAQ</Link>
+          Head over to the <Link to={Routes.FAQ}>FAQ</Link>
         </p>
       </Content>
     </Wrapper>
diff --git a/src/custom/pages/App/AppMod.tsx b/src/custom/pages/App/AppMod.tsx
index d447f44465..16cbbb8b37 100644
--- a/src/custom/pages/App/AppMod.tsx
+++ b/src/custom/pages/App/AppMod.tsx
@@ -121,7 +121,7 @@ export default function App(props?: { children?: ReactNode }) {
           <HeaderWrapper>
             <Header />
           </HeaderWrapper>
-          <BodyWrapper>
+          <BodyWrapper location={location}>
             <Polling />
             <TopLevelModals />
             <ReferralLinkUpdater />
diff --git a/src/custom/pages/App/index.tsx b/src/custom/pages/App/index.tsx
index bab7d64381..81c131c9aa 100644
--- a/src/custom/pages/App/index.tsx
+++ b/src/custom/pages/App/index.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
 import { RedirectPathToSwapOnly, RedirectToSwap } from 'pages/Swap/redirects'
 import { Suspense, lazy } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
+import { Routes } from 'constants/routes'
 
 import AnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers'
 import * as Sentry from '@sentry/react'
@@ -11,6 +12,7 @@ import { version } from '@src/../package.json'
 import { environmentName } from 'utils/environments'
 import RedirectAnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers/RedirectAnySwapAffectedUsers'
 import { SENTRY_IGNORED_GP_QUOTE_ERRORS } from 'api/gnosisProtocol/errors/QuoteError'
+import { DUNE_DASHBOARD_LINK, DOCS_LINK, DISCORD_LINK, TWITTER_LINK } from 'constants/index'
 
 const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN
 const SENTRY_TRACES_SAMPLE_RATE = process.env.REACT_APP_SENTRY_TRACES_SAMPLE_RATE
@@ -48,7 +50,7 @@ if (SENTRY_DSN) {
 
 export const Wrapper = styled(AppMod)``
 
-export const BodyWrapper = styled.div`
+export const BodyWrapper = styled.div<{ location: { pathname: string } }>`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -58,14 +60,14 @@ export const BodyWrapper = styled.div`
   flex: auto;
   z-index: 1;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    padding: 0 10px 0;
-  `}
-
   ${({ theme }) => theme.mediaWidth.upToExtraLarge`
     padding-top: 5vh;
     align-items: flex-start;
   `}
+
+  ${({ theme, location }) => theme.mediaWidth.upToMedium`
+    padding: ${location.pathname === Routes.SWAP ? '0 0 16px' : '0 16px 16px'};
+  `}
 `
 
 export const LoadingWrapper = styled.div`
@@ -96,38 +98,28 @@ export default function App() {
           <Switch>
             <Redirect from="/claim" to="/account" />
             <Redirect from="/profile" to="/account" />
-            <Route exact strict path="/swap" component={Swap} />
-            <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-            <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
-            <Route exact strict path="/about" component={About} />
-            <Route exact strict path="/account" component={Account} />
-
-            <Route exact path="/faq" component={Faq} />
-            <Route exact strict path="/faq/protocol" component={ProtocolFaq} />
-            <Route exact strict path="/faq/token" component={TokenFaq} />
-            <Route exact strict path="/faq/trading" component={TradingFaq} />
-            <Route exact strict path="/faq/affiliate" component={AffiliateFaq} />
-            <Route exact strict path="/play/cow-runner" component={CowRunner} />
-            <Route exact strict path="/play/mev-slicer" component={MevSlicer} />
-            <Route exact strict path="/anyswap-affected-users" component={AnySwapAffectedUsers} />
-            <Route exact strict path="/privacy-policy" component={PrivacyPolicy} />
-            <Route exact strict path="/cookie-policy" component={CookiePolicy} />
-            <Route exact strict path="/terms-and-conditions" component={TermsAndConditions} />
-            <Route exact strict path="/chat" component={createRedirectExternal('https://chat.cowswap.exchange')} />
-            <Route exact strict path="/docs" component={createRedirectExternal('https://docs.cow.fi')} />
-            <Route
-              exact
-              strict
-              path="/stats"
-              component={createRedirectExternal('https://dune.xyz/gnosis.protocol/Gnosis-Protocol-V2')}
-            />
-            <Route
-              exact
-              strict
-              path="/twitter"
-              component={createRedirectExternal('https://twitter.com/MEVprotection')}
-            />
-            <Route exact strict path="/" component={RedirectPathToSwapOnly} />
+            <Route exact strict path={Routes.SWAP} component={Swap} />
+            <Route exact strict path={Routes.SWAP_OUTPUT_CURRENCY} component={RedirectToSwap} />
+            <Route exact strict path={Routes.SEND} component={RedirectPathToSwapOnly} />
+            <Route exact strict path={Routes.ABOUT} component={About} />
+            <Route exact strict path={Routes.ACCOUNT} component={Account} />
+
+            <Route exact path={Routes.FAQ} component={Faq} />
+            <Route exact strict path={Routes.FAQ} component={ProtocolFaq} />
+            <Route exact strict path={Routes.FAQ_TOKEN} component={TokenFaq} />
+            <Route exact strict path={Routes.FAQ_TRADING} component={TradingFaq} />
+            <Route exact strict path={Routes.FAQ_AFFILIATE} component={AffiliateFaq} />
+            <Route exact strict path={Routes.PLAY_COWRUNNER} component={CowRunner} />
+            <Route exact strict path={Routes.PLAY_MEVSLICER} component={MevSlicer} />
+            <Route exact strict path={Routes.ANYSWAP_AFFECTED} component={AnySwapAffectedUsers} />
+            <Route exact strict path={Routes.PRIVACY_POLICY} component={PrivacyPolicy} />
+            <Route exact strict path={Routes.COOKIE_POLICY} component={CookiePolicy} />
+            <Route exact strict path={Routes.TERMS_CONDITIONS} component={TermsAndConditions} />
+            <Route exact strict path={Routes.CHAT} component={createRedirectExternal(DISCORD_LINK)} />
+            <Route exact strict path={Routes.DOCS} component={createRedirectExternal(DOCS_LINK)} />
+            <Route exact strict path={Routes.STATS} component={createRedirectExternal(DUNE_DASHBOARD_LINK)} />
+            <Route exact strict path={Routes.TWITTER} component={createRedirectExternal(TWITTER_LINK)} />
+            <Route exact strict path={Routes.HOME} component={RedirectPathToSwapOnly} />
             <Route component={NotFound} />
           </Switch>
         </Suspense>
diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx
index ae8c159c78..fdee5501ae 100644
--- a/src/custom/pages/Claim/ClaimingStatus.tsx
+++ b/src/custom/pages/Claim/ClaimingStatus.tsx
@@ -30,6 +30,7 @@ import { shortenAddress } from 'utils'
 import CopyHelper from 'components/Copy'
 import { ButtonSecondary } from 'components/Button'
 import { ClaimCommonTypes } from './types'
+import { Routes } from 'constants/routes'
 
 const COW_TWEET_TEMPLATE =
   'I just joined the 🐮 CoWmunity @MEVprotection and claimed my first vCOW tokens! Join me at https://cowswap.exchange/'
@@ -133,7 +134,7 @@ export default function ClaimingStatus({ handleChangeAccount }: ClaimNavProps) {
               </SuccessBanner>
             </ExternalLink>
             {isSelfClaiming && (
-              <Link to="/account">
+              <Link to={Routes.ACCOUNT}>
                 <SuccessBanner type={'Profile'}>
                   <span>
                     <Trans>View vCOW balance</Trans>
diff --git a/src/custom/pages/Faq/AffiliateFaq.tsx b/src/custom/pages/Faq/AffiliateFaq.tsx
index ba560b85c1..1360dbe4e9 100644
--- a/src/custom/pages/Faq/AffiliateFaq.tsx
+++ b/src/custom/pages/Faq/AffiliateFaq.tsx
@@ -7,6 +7,7 @@ import { Footer } from '.'
 import { useToC } from './hooks'
 import ToC from './ToC'
 import { FaqMenu } from './Menu'
+import { Routes } from 'constants/routes'
 
 export default function AffiliateFaq() {
   const { toc, faqRef } = useToC()
@@ -22,8 +23,8 @@ export default function AffiliateFaq() {
           <h3 id="what-is-the-account-page">What is the Account page?</h3>
 
           <p>
-            The <Link to="/account">account</Link> page is where you can see your number of trades and volume, generated
-            with the wallet you&amp;re connected with.
+            The <Link to={Routes.ACCOUNT}>account</Link> page is where you can see your number of trades and volume,
+            generated with the wallet you&amp;re connected with.
           </p>
 
           <p>
@@ -144,7 +145,8 @@ export default function AffiliateFaq() {
           </h3>
 
           <p>
-            The number of trades on the <Link to="/account">account</Link> page is calculated based on on-chain data.
+            The number of trades on the <Link to={Routes.ACCOUNT}>account</Link> page is calculated based on on-chain
+            data.
           </p>
           <p>We have two publicly facing interfaces where both use the same contracts, which are:</p>
           <ul>
diff --git a/src/custom/pages/Faq/Menu.tsx b/src/custom/pages/Faq/Menu.tsx
index 121c88987d..3ecd22bde7 100644
--- a/src/custom/pages/Faq/Menu.tsx
+++ b/src/custom/pages/Faq/Menu.tsx
@@ -1,12 +1,13 @@
 import { NavLink } from 'react-router-dom'
 import { Menu } from './styled'
+import { Routes } from 'constants/routes'
 
 const LINKS = [
-  { title: 'General', url: '/faq' },
-  { title: 'Protocol', url: '/faq/protocol' },
-  { title: 'Token', url: '/faq/token' },
-  { title: 'Trading', url: '/faq/trading' },
-  { title: 'Affiliate', url: '/faq/affiliate' },
+  { title: 'General', url: Routes.FAQ },
+  { title: 'Protocol', url: Routes.FAQ_PROTOCOL },
+  { title: 'Token', url: Routes.FAQ_TOKEN },
+  { title: 'Trading', url: Routes.FAQ_TRADING },
+  { title: 'Affiliate', url: Routes.FAQ_AFFILIATE },
 ]
 
 export function FaqMenu() {
diff --git a/src/custom/pages/Faq/TokenFaq.tsx b/src/custom/pages/Faq/TokenFaq.tsx
index 9fcbe42bba..69e8c86667 100644
--- a/src/custom/pages/Faq/TokenFaq.tsx
+++ b/src/custom/pages/Faq/TokenFaq.tsx
@@ -6,6 +6,7 @@ import { Footer } from '.'
 import { useToC } from './hooks'
 import ToC from './ToC'
 import { FaqMenu } from './Menu'
+import { Routes } from 'constants/routes'
 
 export default function TokenFaq() {
   const { toc, faqRef } = useToC()
@@ -52,10 +53,10 @@ export default function TokenFaq() {
           </h3>
           <p>
             {' '}
-            Directly in the CowSwap UI. Simply click on the <Link to="/account">account</Link> menu item at the top left
-            of the page (desktop) or in the mobile menu. You then will be redirected to the{' '}
-            <Link to="/account">account</Link> page where you can see your total COW and/or vCOW balance. You will then
-            be able to convert your vCOW to COW (if applicable).
+            Directly in the CowSwap UI. Simply click on the <Link to={Routes.ACCOUNT}>account</Link> menu item at the
+            top left of the page (desktop) or in the mobile menu. You then will be redirected to the{' '}
+            <Link to={Routes.ACCOUNT}>account</Link> page where you can see your total COW and/or vCOW balance. You will
+            then be able to convert your vCOW to COW (if applicable).
           </p>
 
           <h3 id="what-is-the-purpose-of-cow-token">What is the purpose of COW Token?</h3>
diff --git a/src/custom/pages/Faq/index.tsx b/src/custom/pages/Faq/index.tsx
index 08bdb5032b..f8b26b9297 100644
--- a/src/custom/pages/Faq/index.tsx
+++ b/src/custom/pages/Faq/index.tsx
@@ -10,6 +10,7 @@ import {
   FLASHBOTS_LINK,
 } from 'constants/index'
 import Page, { Content } from 'components/Page'
+import { Routes } from 'constants/routes'
 import { ExternalLinkFaq, Wrapper, ButtonNav, FooterWrapper } from './styled'
 import { FaqMenu } from './Menu'
 import { StyledInternalLink } from 'theme'
@@ -37,7 +38,7 @@ export function Footer() {
         </ExternalLinkFaq>{' '}
         <br />
         <br />
-        We really hope you like CowSwap. If you do,&nbsp;<Link to="/">Milk it!</Link>
+        We really hope you like CowSwap. If you do,&nbsp;<Link to={Routes.HOME}>Milk it!</Link>
         <span role="img" aria-label="glass of milk">
           🥛
         </span>
@@ -179,7 +180,7 @@ export default function Faq() {
             protocols or dapps, your use is at your own risk.{' '}
             <strong>
               Please review our{' '}
-              <StyledInternalLink to="/terms-and-conditions">
+              <StyledInternalLink to={Routes.TERMS_CONDITIONS}>
                 <strong>Terms and Conditions</strong>
               </StyledInternalLink>
               .
diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
index 8fa53d33e0..80206e6fd2 100644
--- a/src/custom/pages/Swap/SwapMod.tsx
+++ b/src/custom/pages/Swap/SwapMod.tsx
@@ -19,7 +19,7 @@ import ReactGA from 'react-ga'
 // import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
 // import { TradeState } from 'state/routing/types'
-import styled, { ThemeContext } from 'styled-components/macro'
+import { ThemeContext } from 'styled-components/macro'
 
 import AddressInputPanel from 'components/AddressInputPanel'
 import { ButtonConfirmed /*, ButtonError, ButtonLight, ButtonPrimary*/ } from 'components/Button'
@@ -84,11 +84,12 @@ import { useErrorMessage } from 'hooks/useErrorMessageAndModal'
 import { GpEther } from 'constants/tokens'
 import { SupportedChainId } from 'constants/chains'
 import CowSubsidyModal from 'components/CowSubsidyModal'
+import { AlertWrapper } from './styleds' // mod
 
-const AlertWrapper = styled.div`
-  max-width: 460px;
-  width: 100%;
-`
+// const AlertWrapper = styled.div`
+//   max-width: 460px;
+//   width: 100%;
+// `
 export default function Swap({
   history,
   location,
diff --git a/src/custom/pages/Swap/styleds.tsx b/src/custom/pages/Swap/styleds.tsx
index 427d78f998..54a0374f8e 100644
--- a/src/custom/pages/Swap/styleds.tsx
+++ b/src/custom/pages/Swap/styleds.tsx
@@ -17,4 +17,19 @@ export const StyledAppBody = styled(AppBody)`
   border: ${({ theme }) => theme.appBody.border};
   box-shadow: ${({ theme }) => theme.appBody.boxShadow};
   background: ${({ theme }) => theme.bg1};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    border: ${({ theme }) => theme.appBody.borderMobile};
+    box-shadow: ${({ theme }) => theme.appBody.boxShadowMobile};
+  `};
+`
+
+export const AlertWrapper = styled.div`
+  max-width: 460px;
+  width: 100%;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin: 26px auto 0;
+    padding: 0 16px;
+  `}
 `
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index a1070f2347..76ef947da1 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -150,9 +150,11 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
       }
     `,
     appBody: {
-      boxShadow: `4px 4px 0px ${colorsTheme.black}`,
+      boxShadow: `4px 4px 0 ${colorsTheme.black}`,
+      boxShadowMobile: `0 4px 0 ${colorsTheme.black}`,
       borderRadius: '16px',
       border: `3px solid ${colorsTheme.black}`,
+      borderMobile: 'none',
       padding: '12px 6px',
       maxWidth: {
         normal: '460px',
@@ -280,7 +282,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
     },
     wallet: {
       color: darkMode ? colorsTheme.text1 : colorsTheme.text1,
-      background: darkMode ? colorsTheme.bg3 : colorsTheme.bg2,
+      background: darkMode ? colorsTheme.bg3 : colorsTheme.bg1,
     },
   }
 }
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index 8ac88aab38..cf33e2fbd8 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -77,8 +77,10 @@ declare module 'styled-components' {
     }
     appBody: {
       boxShadow: string
+      boxShadowMobile: string
       borderRadius: string
       border: string
+      borderMobile: string
       padding: string
       maxWidth: {
         normal: string
diff --git a/src/custom/utils/toggleBodyClass.ts b/src/custom/utils/toggleBodyClass.ts
new file mode 100644
index 0000000000..1879f8c345
--- /dev/null
+++ b/src/custom/utils/toggleBodyClass.ts
@@ -0,0 +1,7 @@
+export const toggleBodyClass = (className: string, isAdd: boolean) => {
+  if (isAdd) {
+    document.body.classList.add(className)
+  } else {
+    document.body.classList.remove(className)
+  }
+}