diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
new file mode 100644
index 00000000..03d5bdad
--- /dev/null
+++ b/components/ThemeSwitcher.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next'
+import { useTheme } from 'next-themes'
+import ThemesIcon from './icons/ThemesIcon'
+import { THEMES } from './settings/DisplaySettings'
+import { LinkButton } from './shared/Button'
+import IconDropMenu from './shared/IconDropMenu'
+
+const ThemeSwitcher = () => {
+  const { t } = useTranslation('settings')
+  const { theme, setTheme } = useTheme()
+  return (
+    <IconDropMenu
+      icon={<ThemesIcon className="h-5 w-5" />}
+      panelClassName="rounded-t-none"
+    >
+      {THEMES.map((value) => (
+        <LinkButton
+          className={`whitespace-nowrap font-normal no-underline md:hover:text-th-fgd-1 ${
+            t(value) === theme ? 'text-th-active' : ''
+          }`}
+          onClick={() => setTheme(t(value))}
+          key={value}
+        >
+          {t(value)}
+        </LinkButton>
+      ))}
+    </IconDropMenu>
+  )
+}
+
+export default ThemeSwitcher
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 21565cb2..cfec318c 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -23,6 +23,7 @@ import useOnlineStatus from 'hooks/useOnlineStatus'
 import { DEFAULT_DELEGATE } from './modals/DelegateModal'
 import Tooltip from './shared/Tooltip'
 import { abbreviateAddress } from 'utils/formatting'
+import ThemeSwitcher from './ThemeSwitcher'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -83,58 +84,63 @@ const TopBar = () => {
           ) : null}
         </span>
         {!isOnline ? (
-          <div className="flex items-center rounded-full bg-th-down py-2 px-4">
-            <ExclamationTriangleIcon className="h-5 w-5" />
-            <div className="ml-2">
-              Your network connection appears to be offline!
-            </div>
+          <div className="absolute left-1/2 z-10 flex -translate-x-1/2 items-center rounded-full bg-th-down py-2 px-4">
+            <ExclamationTriangleIcon className="h-5 w-5 text-th-fgd-1" />
+            <p className="ml-2 text-th-fgd-1">
+              Your connection appears to be offline
+            </p>
           </div>
         ) : null}
-        {connected ? (
-          <div className="flex items-center space-x-4 pr-4 md:pr-0">
-            <button
-              className="mr-2 hidden md:block"
-              id="account-step-two"
-              onClick={handleShowAccounts}
-            >
-              <p className="text-right text-xs">{t('accounts')}</p>
-              <p className="text-left text-sm font-bold text-th-fgd-1">
-                {mangoAccount ? (
-                  <div className="flex items-center">
-                    {mangoAccount.name}
-                    {mangoAccount.delegate.toString() !== DEFAULT_DELEGATE ? (
-                      <Tooltip
-                        content={t('delegate-account-info', {
-                          address: abbreviateAddress(mangoAccount.delegate),
-                        })}
-                      >
-                        <UsersIcon className="ml-1.5 h-4 w-4 text-th-fgd-3" />
-                      </Tooltip>
-                    ) : null}
-                  </div>
-                ) : (
-                  <span>
-                    <span className="mr-1.5">🥭</span>
-                    {t('create-account')}
-                  </span>
-                )}
-              </p>
-            </button>
-            <ConnectedMenu />
+        <div className="flex items-center">
+          <div className="px-3 md:px-4">
+            <ThemeSwitcher />
           </div>
-        ) : isOnboarded ? (
-          <ConnectWalletButton />
-        ) : (
-          <button
-            className="relative h-16 rounded-none bg-th-bkg-2 bg-gradient-to-bl px-6 text-base font-bold text-th-fgd-1 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
-            onClick={handleShowSetup}
-          >
-            <div className="relative z-10 flex items-center justify-center">
-              <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-              {t('connect')}
+          {connected ? (
+            <div className="flex items-center pr-4 md:pr-0">
+              <button
+                className="hidden h-16 border-l border-th-bkg-3 px-4 md:block"
+                id="account-step-two"
+                onClick={handleShowAccounts}
+              >
+                <p className="text-right text-xs">{t('accounts')}</p>
+                <p className="text-left text-sm font-bold text-th-fgd-1">
+                  {mangoAccount ? (
+                    <div className="flex items-center">
+                      {mangoAccount.name}
+                      {mangoAccount.delegate.toString() !== DEFAULT_DELEGATE ? (
+                        <Tooltip
+                          content={t('delegate-account-info', {
+                            address: abbreviateAddress(mangoAccount.delegate),
+                          })}
+                        >
+                          <UsersIcon className="ml-1.5 h-4 w-4 text-th-fgd-3" />
+                        </Tooltip>
+                      ) : null}
+                    </div>
+                  ) : (
+                    <span>
+                      <span className="mr-1.5">🥭</span>
+                      {t('create-account')}
+                    </span>
+                  )}
+                </p>
+              </button>
+              <ConnectedMenu />
             </div>
-          </button>
-        )}
+          ) : isOnboarded ? (
+            <ConnectWalletButton />
+          ) : (
+            <button
+              className="relative h-16 rounded-none bg-th-bkg-2 bg-gradient-to-bl px-6 text-base font-bold text-th-fgd-1 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+              onClick={handleShowSetup}
+            >
+              <div className="relative z-10 flex items-center justify-center">
+                <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                {t('connect')}
+              </div>
+            </button>
+          )}
+        </div>
       </div>
       {showMangoAccountsModal ? (
         <MangoAccountsListModal
diff --git a/components/icons/ThemesIcon.tsx b/components/icons/ThemesIcon.tsx
new file mode 100644
index 00000000..7a0ee22c
--- /dev/null
+++ b/components/icons/ThemesIcon.tsx
@@ -0,0 +1,45 @@
+const ThemesIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M6.15479 12.2139H6.18078C6.17324 12.2168 6.16359 12.2168 6.15479 12.2139Z"
+        fill="#308D8A"
+      />
+      <path
+        d="M20.6969 3C18.8692 3 17.1697 3.56287 15.7612 4.5228C18.1064 6.12314 19.6446 8.83184 19.6446 11.903C19.6446 12.1185 19.6345 12.3295 19.6196 12.5412C22.3771 13.898 24.3264 16.6644 24.5553 19.9088C27.4928 18.4634 29.5223 15.4219 29.5223 11.903C29.5223 6.98617 25.5709 3 20.6969 3Z"
+        fill="#00FF00"
+      />
+      <path
+        d="M15.7546 19.2832C14.3461 20.2431 12.6466 20.806 10.8189 20.806C9.43314 20.806 8.12123 20.483 6.95425 19.9088C6.93962 20.1184 6.9292 20.3272 6.9292 20.5406C6.9292 25.4575 10.8806 29.4436 15.7546 29.4436C20.6285 29.4436 24.5799 25.4575 24.5799 20.5406C24.5799 20.3272 24.5695 20.1184 24.5549 19.9088C23.3879 20.483 22.076 20.806 20.6903 20.806C18.8625 20.806 17.1631 20.2431 15.7546 19.2832Z"
+        fill="#0000FF"
+      />
+      <path
+        d="M10.8254 3C5.95141 3 2 6.98617 2 11.903C2 15.4219 4.02327 18.4634 6.96075 19.9088C7.18964 16.6645 9.13922 13.8981 11.8964 12.5412C11.8817 12.3308 11.8714 12.1172 11.8714 11.903C11.8714 8.82998 13.4135 6.12277 15.7611 4.5228C14.3526 3.56287 12.6531 3 10.8254 3Z"
+        fill="#FF0000"
+      />
+      <path
+        d="M15.7548 11.644C14.369 11.644 13.0571 11.9671 11.8901 12.5413C12.0881 15.3479 13.5719 17.7956 15.7548 19.2833C17.9377 17.7956 19.4215 15.348 19.6194 12.5413C18.4523 11.967 17.1407 11.644 15.7548 11.644Z"
+        fill="white"
+      />
+      <path
+        d="M15.755 19.2767C13.5738 17.7902 12.0901 15.345 11.8904 12.541C9.13715 13.8992 7.18961 16.661 6.96094 19.9023C8.12662 20.4749 9.43558 20.7995 10.8193 20.7995C12.647 20.7995 14.3465 20.2366 15.755 19.2767Z"
+        fill="#FF00FF"
+      />
+      <path
+        d="M15.7549 4.52275C13.4073 6.12272 11.8652 8.82993 11.8652 11.903C11.8652 12.1171 11.8755 12.3307 11.8903 12.5411C13.0559 11.9685 14.3649 11.6439 15.7487 11.6439C17.1346 11.6439 18.4462 11.9668 19.6133 12.5411C19.6283 12.3294 19.6383 12.1185 19.6383 11.903C19.6383 8.83362 18.104 6.12346 15.7612 4.52275C15.7592 4.52174 15.7564 4.52376 15.755 4.52275H15.7549Z"
+        fill="#FFFF00"
+      />
+      <path
+        d="M19.6131 12.541C19.4153 15.3477 17.9314 17.7953 15.7485 19.283C17.157 20.243 18.8565 20.8058 20.6842 20.8058C22.07 20.8058 23.3819 20.4828 24.5488 19.9086C24.32 16.6642 22.3706 13.8978 19.6131 12.541ZM24.5551 19.9086C24.5531 19.9094 24.5505 19.9078 24.5489 19.9086V19.9086"
+        fill="#00FFFF"
+      />
+    </svg>
+  )
+}
+
+export default ThemesIcon
diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx
index 302df67d..a64855f8 100644
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@@ -5,7 +5,7 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { NOTIFICATION_POSITION_KEY, SIZE_INPUT_UI_KEY } from 'utils/constants'
 
 const NOTIFICATION_POSITIONS = [
@@ -27,6 +27,19 @@ const LANGS = [
   { locale: 'zh', name: 'chinese', description: 'simplified chinese' },
 ]
 
+export const THEMES = [
+  'light',
+  'medium',
+  'dark',
+  'high-contrast',
+  'mango-classic',
+  'avocado',
+  'banana',
+  'blueberry',
+  'lychee',
+  'olive',
+]
+
 const DisplaySettings = () => {
   const { t } = useTranslation(['common', 'settings'])
   const { theme, setTheme } = useTheme()
@@ -41,20 +54,6 @@ const DisplaySettings = () => {
     SIZE_INPUT_UI_KEY,
     'Slider'
   )
-  const themes = useMemo(() => {
-    return [
-      t('settings:light'),
-      t('settings:medium'),
-      t('settings:dark'),
-      t('settings:high-contrast'),
-      t('settings:mango-classic'),
-      t('settings:avocado'),
-      t('settings:banana'),
-      t('settings:blueberry'),
-      t('settings:lychee'),
-      t('settings:olive'),
-    ]
-  }, [t])
 
   const handleLangChange = useCallback(
     (l: string) => {
@@ -76,10 +75,10 @@ const DisplaySettings = () => {
             onChange={(t) => setTheme(t)}
             className="w-full"
           >
-            {themes.map((t) => (
-              <Select.Option key={t} value={t}>
+            {THEMES.map((theme) => (
+              <Select.Option key={theme} value={t(`settings:${theme}`)}>
                 <div className="flex w-full items-center justify-between">
-                  {t}
+                  {t(`settings:${theme}`)}
                 </div>
               </Select.Option>
             ))}
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index 563bc87c..3c78c9fb 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -108,7 +108,7 @@ export const LinkButton: FunctionComponent<LinkButtonCombinedProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center border-0 font-bold ${
+      className={`default-transition flex items-center border-0 font-bold ${
         secondary ? 'text-th-active' : 'text-th-fgd-2'
       } underline focus:outline-none disabled:cursor-not-allowed  disabled:opacity-50 md:hover:no-underline  ${className}`}
       {...props}
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index 17786fb5..b87b6929 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -8,6 +8,7 @@ const IconDropMenu = ({
   disabled,
   size,
   postion = 'bottomRight',
+  panelClassName,
 }: {
   icon: ReactNode
   children: ReactNode
@@ -22,6 +23,7 @@ const IconDropMenu = ({
     | 'leftTop'
     | 'rightBottom'
     | 'rightTop'
+  panelClassName?: string
 }) => {
   const panelPosition = {
     bottomLeft: size === 'large' ? 'left-0 top-14' : 'left-0 top-12',
@@ -63,7 +65,7 @@ const IconDropMenu = ({
             leaveTo="opacity-0"
           >
             <Popover.Panel
-              className={`absolute ${panelPosition[postion]} z-20 w-48 space-y-3 rounded-md bg-th-bkg-2 p-4`}
+              className={`absolute ${panelPosition[postion]} thin-scroll z-20 max-h-60 space-y-2 overflow-auto rounded-md bg-th-bkg-2 p-4 ${panelClassName}`}
             >
               {children}
             </Popover.Panel>
diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx
index b0049c74..8f447265 100644
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@@ -81,7 +81,7 @@ const ConnectedMenu = () => {
           <div className="relative">
             <Menu.Button
               className={`default-transition h-16 ${
-                !isMobile ? 'w-48 border-l border-th-bkg-3 px-3' : ''
+                !isMobile ? 'w-48 border-l border-th-bkg-3 px-4' : ''
               } hover:bg-th-bkg-2 focus:outline-none`}
             >
               <div className="flex items-center" id="account-step-one">
diff --git a/pages/404.tsx b/pages/404.tsx
index 18d0fa6f..e1f9ca4c 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -5,7 +5,11 @@ import { RektIcon } from '@components/icons/RektIcon'
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['common', 'delegate'])),
+      ...(await serverSideTranslations(locale, [
+        'common',
+        'profile',
+        'settings',
+      ])),
       // Will be passed to the page component as props
     },
   }
@@ -18,7 +22,6 @@ export default function Custom404() {
       className="mx-auto flex max-w-xl flex-col items-center justify-center text-center"
       style={{ height: 'calc(100vh - 80px)' }}
     >
-      {/* <span className="mb-4 text-lg font-bold text-th-fgd-3">404</span> */}
       <RektIcon className="mb-4 h-14 w-auto -rotate-6 transform text-th-down" />
       <h1 className="mt-1 text-3xl text-th-fgd-1 sm:text-4xl">
         404: {t('404-heading')}
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 25c450cf..f174aaa5 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -18,7 +18,7 @@ import MarketLogos from '@components/trade/MarketLogos'
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['common'])),
+      ...(await serverSideTranslations(locale, ['common, profile, settings'])),
     },
   }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 01a9833a..c1871627 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'onboarding',
         'onboarding-tours',
         'profile',
+        'settings',
         'swap',
         'trade',
         'activity',
diff --git a/pages/stats.tsx b/pages/stats.tsx
index da202b32..de1a29f8 100644
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@@ -9,6 +9,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'common',
         'onboarding',
         'profile',
+        'settings',
         'token',
         'trade',
       ])),
diff --git a/pages/swap.tsx b/pages/swap.tsx
index 5f3e2d45..ce461e5b 100644
--- a/pages/swap.tsx
+++ b/pages/swap.tsx
@@ -10,6 +10,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'onboarding',
         'onboarding-tours',
         'profile',
+        'settings',
         'swap',
         'settings',
         'trade',
diff --git a/pages/token/[token].tsx b/pages/token/[token].tsx
index 0bc7eda1..255f5125 100644
--- a/pages/token/[token].tsx
+++ b/pages/token/[token].tsx
@@ -6,7 +6,12 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['common', 'profile', 'token'])),
+      ...(await serverSideTranslations(locale, [
+        'common',
+        'profile',
+        'settings',
+        'token',
+      ])),
     },
   }
 }
diff --git a/pages/trade.tsx b/pages/trade.tsx
index 6619ae8d..6082bdc5 100644
--- a/pages/trade.tsx
+++ b/pages/trade.tsx
@@ -20,6 +20,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'onboarding',
         'onboarding-tours',
         'profile',
+        'settings',
         'trade',
       ])),
     },