diff --git a/components/Button.tsx b/components/Button.tsx
index a1d87e9..46d036b 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -17,7 +17,7 @@ const Button: FunctionComponent<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`${className} px-8 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md 
+      className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md 
       active:border-mango-yellow hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2 
       disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
       {...props}
diff --git a/components/FeeDiscountsTable.tsx b/components/FeeDiscountsTable.tsx
index 0d4a543..0c88948 100644
--- a/components/FeeDiscountsTable.tsx
+++ b/components/FeeDiscountsTable.tsx
@@ -59,7 +59,7 @@ const FeeDiscountsTable = () => {
             </div>
           </div>
         ) : (
-          <Button disabled>Connect wallet to deposit SRM</Button>
+          <Button disabled>Connect Wallet</Button>
         )}
       </div>
       {showDeposit && (
diff --git a/components/Input.tsx b/components/Input.tsx
index 7fbfbfb..abb5f79 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -24,7 +24,7 @@ const Input = ({
       } ${className}`}
     >
       {prefix ? (
-        <div className="border-r border-th-fgd-4 bg-th-bkg-2 p-2 rounded rounded-r-none">
+        <div className="border-r border-th-fgd-4 bg-th-bkg-2 p-2 rounded rounded-r-none w-14 text-right">
           {prefix}
         </div>
       ) : null}
@@ -33,7 +33,7 @@ const Input = ({
           type={type}
           value={value}
           onChange={onChange}
-          className={`bg-transparent w-full font-light focus:outline-none ${
+          className={`bg-transparent w-full focus:outline-none ${
             disabled && 'opacity-20 cursor-not-allowed'
           } ${type === 'number' ? 'text-right' : ''}`}
           disabled={disabled}
diff --git a/components/MangoIcon.jsx b/components/MangoIcon.jsx
new file mode 100644
index 0000000..3326118
--- /dev/null
+++ b/components/MangoIcon.jsx
@@ -0,0 +1,29 @@
+const MangoIcon = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="14"
+      height="20"
+      viewBox="0 0 22 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.3612 4.7088L19.3624 4.70878L19.3954 4.68752C15.1331 -2.5831 9.55993 3.14112 9.55993 3.14112L9.5679 3.15513L9.56692 3.15538C12.7718 8.77426 18.8625 5.02924 19.3612 4.7088Z"
+        stroke-width="2.5"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.4268 8.60034C11.4416 9.12103 12.5521 9.29944 13.6147 9.29636C14.2321 9.86347 14.7458 10.5296 15.2285 11.2136C15.4286 11.4993 15.6091 11.7982 15.7688 12.1084C16.1378 12.8191 16.4093 13.5711 16.6839 14.332C16.7644 14.555 16.8454 14.7792 16.929 15.003C16.9552 15.0988 16.9826 15.1946 17.0111 15.2905L17.0126 15.2902C17.4368 16.7451 18.0562 18.2994 18.8862 19.5826C19.1607 20.0042 19.4674 20.4037 19.8051 20.7767C19.8715 20.8486 19.9395 20.9198 20.0076 20.9911C20.3255 21.3241 20.6457 21.6596 20.8272 22.0792C21.0531 22.6022 21.0358 23.2037 20.8999 23.7571C20.2586 26.3656 17.7466 27.0509 15.3459 27.1141L15.3471 27.1111C14.447 27.1291 13.5531 27.062 12.7604 26.9808C12.7604 26.9808 8.93745 26.5851 5.69698 24.216L5.59239 24.1382C5.21415 23.8564 4.85332 23.5518 4.51186 23.2263C3.6036 22.3594 2.79544 21.3762 2.17743 20.2968C2.1801 20.2941 2.18277 20.2915 2.18543 20.2888L2.18982 20.2844C2.11668 20.1527 2.04656 20.0198 1.97946 19.8855C1.38159 18.6889 1.01722 17.3863 1.00072 16.0018C0.9726 13.6787 1.76736 11.2996 3.27803 9.57468L3.27642 9.57041C4.09436 8.67445 5.11672 7.97059 6.327 7.56987C7.08575 7.31635 7.8823 7.19462 8.68213 7.20997C9.16883 7.78148 9.76147 8.25316 10.4268 8.60034Z"
+        stroke-width="2.5"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default MangoIcon
diff --git a/components/MarginBalances.tsx b/components/MarginBalances.tsx
index 61bdea0..d09cdff 100644
--- a/components/MarginBalances.tsx
+++ b/components/MarginBalances.tsx
@@ -58,16 +58,16 @@ export default function MarginStats() {
           <table className={`min-w-full`}>
             <thead>
               <tr className={`text-center text-th-fgd-4 mb-2`}>
-                <th scope="col" className={`flex-auto font-light`}>
+                <th scope="col" className={`flex-auto font-normal`}>
                   Assets
                 </th>
-                <th scope="col" className={`flex-auto font-light`}>
+                <th scope="col" className={`flex-auto font-normal`}>
                   Deposits
                 </th>
-                <th scope="col" className={`flex-auto font-light`}>
+                <th scope="col" className={`flex-auto font-normal`}>
                   Borrows
                 </th>
-                <th scope="col" className={`flex-auto font-light`}>
+                <th scope="col" className={`flex-auto font-normal`}>
                   Interest (APY)
                 </th>
               </tr>
@@ -104,7 +104,7 @@ export default function MarginStats() {
                       +{(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}
                       %
                     </span>
-                    <span>{'  /  '}</span>
+                    <span className={`text-th-fgd-4`}>{'  /  '}</span>
                     <span className={`text-th-red`}>
                       -{(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}%
                     </span>
@@ -114,24 +114,21 @@ export default function MarginStats() {
             </tbody>
           </table>
         ) : null}
-        <div className={`flex justify-around items-center mt-4`}>
-          <div>
-            <Button
-              onClick={() => setShowDepositModal(true)}
-              disabled={!connected}
-            >
-              <span>Deposit</span>
-            </Button>
-          </div>
-          <div>
-            <Button
-              onClick={() => setShowWithdrawModal(true)}
-              className="ml-4"
-              disabled={!connected}
-            >
-              <span>Withdraw</span>
-            </Button>
-          </div>
+        <div className={`flex justify-center items-center mt-4`}>
+          <Button
+            onClick={() => setShowDepositModal(true)}
+            className="w-1/2"
+            disabled={!connected}
+          >
+            <span>Deposit</span>
+          </Button>
+          <Button
+            onClick={() => setShowWithdrawModal(true)}
+            className="ml-4 w-1/2"
+            disabled={!connected}
+          >
+            <span>Withdraw</span>
+          </Button>
         </div>
         <div className={`text-center mt-4 text-th-fgd-4 tracking-wider`}>
           Settle funds in the Balances tab
diff --git a/components/MarginStats.tsx b/components/MarginStats.tsx
index 5066143..a95852c 100644
--- a/components/MarginStats.tsx
+++ b/components/MarginStats.tsx
@@ -156,7 +156,7 @@ export default function MarginStats() {
                     {entry.label}
                   </div>
                 </Popover>
-                <div className={`text-th-fgd-1 font-light`}>
+                <div className={`text-th-fgd-1`}>
                   {entry.currency + entry.value}
                   {entry.unit}
                 </div>
diff --git a/components/MenuItem.tsx b/components/MenuItem.tsx
index fc08e9f..584e254 100644
--- a/components/MenuItem.tsx
+++ b/components/MenuItem.tsx
@@ -8,7 +8,7 @@ const MenuItem = ({ href, children }) => {
     <Link href={href} passHref>
       <a
         className={`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2 
-          sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base tracking-wider
+          sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base tracking-wider hover:text-th-primary
           ${
             asPath === href
               ? `border-th-primary`
diff --git a/components/Orderbook.tsx b/components/Orderbook.tsx
index eb0a261..a0e84a0 100644
--- a/components/Orderbook.tsx
+++ b/components/Orderbook.tsx
@@ -13,7 +13,7 @@ const Line = styled.div<any>`
   text-align: ${(props) => (props.invert ? 'left' : 'right')};
   float: ${(props) => (props.invert ? 'left' : 'right')};
   height: 100%;
-  filter: opacity(70%);
+  filter: opacity(80%);
   ${(props) => props['data-width'] && `width: ${props['data-width']};`}
 `
 
@@ -156,7 +156,7 @@ const OrderbookRow = React.memo<any>(
 
     return (
       <div
-        className={`flex mb-0.5 justify-between font-light`}
+        className={`flex mb-0.5 justify-between`}
         ref={element}
         onClick={onSizeClick}
       >
diff --git a/components/RecentMarketTrades.tsx b/components/RecentMarketTrades.tsx
index d99e357..43e39cf 100644
--- a/components/RecentMarketTrades.tsx
+++ b/components/RecentMarketTrades.tsx
@@ -34,7 +34,7 @@ export default function PublicTrades() {
 
   return (
     <FloatingElement>
-      <ElementTitle>Recent Market Trades</ElementTitle>
+      <ElementTitle>Recent Trades</ElementTitle>
       <div className={`grid grid-cols-3 text-th-fgd-4 mb-2`}>
         <div>Price ({quoteCurrency}) </div>
         <div className={`text-right`}>Size ({baseCurrency})</div>
@@ -43,11 +43,11 @@ export default function PublicTrades() {
       {!!trades.length && (
         <div>
           {trades.map((trade: ChartTradeType, i: number) => (
-            <div key={i} className={`mb-2 font-light grid grid-cols-3`}>
+            <div key={i} className={`mb-2 grid grid-cols-3`}>
               <div
-                style={{
-                  color: trade.side === 'buy' ? '#AFD803' : '#E54033',
-                }}
+                className={`${
+                  trade.side === 'buy' ? `text-th-green` : `text-th-red`
+                }`}
               >
                 {market?.tickSize && !isNaN(trade.price)
                   ? Number(trade.price).toFixed(
diff --git a/components/Select.jsx b/components/Select.jsx
new file mode 100644
index 0000000..bf94766
--- /dev/null
+++ b/components/Select.jsx
@@ -0,0 +1,51 @@
+import { Listbox } from '@headlessui/react'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
+
+const Select = ({ value, onChange, options, className = '' }) => {
+  return (
+    <div className={`relative`}>
+      <Listbox value={value} onChange={onChange}>
+        {({ open }) => (
+          <>
+            <Listbox.Button
+              className={`h-full w-full bg-th-bkg-1 border border-th-fgd-4 rounded focus:outline-none focus:ring-1 focus:ring-th-primary ${className}`}
+            >
+              <div
+                className={`flex items-center justify-between space-x-4 pl-2 pr-1`}
+              >
+                <span>{value}</span>
+                {open ? (
+                  <ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
+                ) : (
+                  <ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
+                )}
+              </div>
+            </Listbox.Button>
+            {open ? (
+              <Listbox.Options
+                static
+                className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
+              >
+                {options.map((option) => (
+                  <Listbox.Option key={option} value={option}>
+                    {({ selected }) => (
+                      <div
+                        className={`p-2 hover:bg-th-bkg-3 hover:cursor-pointer tracking-wider ${
+                          selected && `text-th-primary`
+                        }`}
+                      >
+                        {option}
+                      </div>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            ) : null}
+          </>
+        )}
+      </Listbox>
+    </div>
+  )
+}
+
+export default Select
diff --git a/components/Switch.tsx b/components/Switch.tsx
index c838983..d603af9 100644
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -22,7 +22,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
       <button
         type="button"
         className={`${
-          checked ? 'bg-th-primary' : 'bg-th-fgd-4'
+          checked ? 'bg-th-primary' : 'bg-th-bkg-3'
         } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent 
         rounded-full cursor-pointer transition-colors ease-in-out duration-200 
         focus:outline-none`}
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 8eec380..add54e6 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
+import { Listbox } from '@headlessui/react'
+import { MoonIcon, SunIcon } from '@heroicons/react/outline'
+import MangoIcon from './MangoIcon'
 
 const THEMES = [
-  { name: 'light', display: 'Light' },
-  { name: 'dark', display: 'Dark' },
-  { name: 'mango', display: 'Mango' },
+  { name: 'Light', icon: <SunIcon /> },
+  { name: 'Dark', icon: <MoonIcon /> },
+  { name: 'Mango', icon: <MangoIcon className="stroke-current" /> },
 ]
 
 const ThemeChanger = () => {
@@ -17,20 +20,39 @@ const ThemeChanger = () => {
   if (!mounted) return null
 
   return (
-    <select
-      name="theme"
-      id="theme-select"
-      className={`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-th-primary focus:border-th-primary rounded-md`}
-      onChange={(e) => setTheme(e.currentTarget.value)}
-      value={theme}
-    >
-      <option value="">Select Theme</option>
-      {THEMES.map((t) => (
-        <option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
-          {t.display}
-        </option>
-      ))}
-    </select>
+    <div className={`flex relative`}>
+      <Listbox value={theme} onChange={(theme) => setTheme(theme)}>
+        {({ open }) => (
+          <>
+            <Listbox.Button
+              className={`bg-transparent rounded w-5 h-5 hover:text-th-primary focus:outline-none`}
+            >
+              {THEMES.filter((t) => t.name === theme).map((th) => th.icon)}
+            </Listbox.Button>
+            {open ? (
+              <Listbox.Options
+                static
+                className={`z-20 p-1 absolute right-0 mt-7 bg-th-bkg-3 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
+              >
+                {THEMES.map((option) => (
+                  <Listbox.Option key={option.name} value={option.name}>
+                    {({ selected }) => (
+                      <div
+                        className={`p-2 hover:bg-th-bkg-1 hover:cursor-pointer tracking-wider ${
+                          selected && `text-th-primary`
+                        }`}
+                      >
+                        {option.name}
+                      </div>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            ) : null}
+          </>
+        )}
+      </Listbox>
+    </div>
   )
 }
 
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index b6444df..e61ad27 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -54,7 +54,7 @@ const TopBar = () => {
               <div className={`hidden sm:ml-4 sm:flex sm:items-center`}>
                 <button
                   onClick={handleConnectDisconnect}
-                  className={`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-base text-th-primary hover:text-th-fgd-1 font-semibold`}
+                  className={`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-th-primary hover:text-th-fgd-1 font-semibold text-base`}
                 >
                   <div>
                     {connected ? (
diff --git a/components/TradeForm.tsx b/components/TradeForm.tsx
index a865438..13d5569 100644
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@@ -213,7 +213,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-primary pb-1
+              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
                 ${
                   side === 'buy' &&
                   `text-th-green hover:text-th-green border-b-2 border-th-green`
@@ -227,7 +227,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-primary pb-1
+              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
                 ${
                   side === 'sell' &&
                   `text-th-red hover:text-th-red border-b-2 border-th-red`
@@ -247,7 +247,7 @@ export default function TradeForm() {
             disabled={tradeType === 'Market'}
             prefix={'Price'}
             suffix={quoteCurrency}
-            className="w-3/5"
+            className="w-3/5 rounded-r-none"
           />
           <TradeType
             onChange={handleTradeTypeChange}
@@ -262,7 +262,7 @@ export default function TradeForm() {
             step={market?.minOrderSize || 1}
             onChange={(e) => onSetBaseSize(parseFloat(e.target.value))}
             value={baseSize}
-            className="text-right flex-grow w-3/5"
+            className="text-right flex-grow w-3/5 rounded-r-none"
             prefix={'Size'}
             suffix={baseCurrency}
           />
@@ -301,7 +301,7 @@ export default function TradeForm() {
               onClick={onSubmit}
               className="rounded text-lg bg-th-green text-th-bkg-1 hover:bg-th-primary flex-grow"
             >
-              {connected ? `Buy ${baseCurrency}` : 'Connect Wallet To Trade'}
+              {connected ? `Buy ${baseCurrency}` : 'Connect Wallet'}
             </Button>
           ) : (
             <Button
@@ -314,7 +314,7 @@ export default function TradeForm() {
               onClick={onSubmit}
               className="rounded text-lg bg-th-red text-white hover:bg-th-primary flex-grow"
             >
-              {connected ? `Sell ${baseCurrency}` : 'Connect Wallet To Trade'}
+              {connected ? `Sell ${baseCurrency}` : 'Connect Wallet'}
             </Button>
           )
         ) : (
diff --git a/components/TradeType.jsx b/components/TradeType.jsx
index 60e619a..a1c7c59 100644
--- a/components/TradeType.jsx
+++ b/components/TradeType.jsx
@@ -10,29 +10,29 @@ const TradeType = ({ value, onChange, className = '' }) => {
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`h-full w-full border-l border-th-fgd-4 focus:outline-none focus:ring-1 focus:ring-th-primary`}
+              className={`h-full w-full bg-th-bkg-1 border-l border-th-fgd-4 rounded rounded-l-none focus:outline-none focus:ring-1 focus:ring-th-primary`}
             >
               <div
-                className={`flex items-center justify-between space-x-4 font-light pl-2`}
+                className={`flex items-center justify-between space-x-4 pl-2 pr-1`}
               >
                 <span>{value}</span>
                 {open ? (
-                  <ChevronUpIcon className={`h-5 w-5 mr-1`} />
+                  <ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
                 ) : (
-                  <ChevronDownIcon className={`h-5 w-5 mr-1`} />
+                  <ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
                 )}
               </div>
             </Listbox.Button>
             {open ? (
               <Listbox.Options
                 static
-                className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-3 origin-top-left divide-y divide-th-fgd-4 shadow-lg outline-none`}
+                className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
               >
                 {TRADE_TYPES.map((type) => (
                   <Listbox.Option key={type} value={type}>
                     {({ selected }) => (
                       <div
-                        className={`p-2 text-base hover:bg-th-fgd-4 hover:cursor-pointer tracking-wider font-light ${
+                        className={`p-2 hover:bg-th-bkg-3 hover:cursor-pointer tracking-wider ${
                           selected && `text-th-primary`
                         }`}
                       >
diff --git a/components/TradingView/index.tsx b/components/TradingView/index.tsx
index 5d93b1e..f9c0a55 100755
--- a/components/TradingView/index.tsx
+++ b/components/TradingView/index.tsx
@@ -34,13 +34,6 @@ export interface ChartContainerProps {
 const TVChartContainer = () => {
   const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
   const { theme } = useTheme()
-  const [currentTheme, setCurrentTheme] = useState(theme)
-
-  console.log(currentTheme)
-
-  useEffect(() => {
-    setCurrentTheme(theme)
-  }, [theme])
 
   // @ts-ignore
   const defaultProps: ChartContainerProps = {
@@ -53,8 +46,8 @@ const TVChartContainer = () => {
     fullscreen: false,
     autosize: true,
     studiesOverrides: {
-      'volume.volume.color.0': '#E54033',
-      'volume.volume.color.1': '#AFD803',
+      'volume.volume.color.0': theme === 'Mango' ? '#E54033' : '#CC2929',
+      'volume.volume.color.1': theme === 'Mango' ? '#AFD803' : '#5EBF4D',
     },
   }
 
@@ -102,19 +95,26 @@ const TVChartContainer = () => {
       fullscreen: defaultProps.fullscreen,
       autosize: defaultProps.autosize,
       studies_overrides: defaultProps.studiesOverrides,
-      theme: theme === 'light' ? 'Light' : 'Dark',
+      theme: theme === 'Light' ? 'Light' : 'Dark',
       overrides: {
         'paneProperties.background':
-          theme === 'dark' ? '#0F282D' : theme === 'light' ? '#fff' : '#1D1832',
-        'mainSeriesProperties.candleStyle.upColor': '#AFD803',
-        'mainSeriesProperties.candleStyle.downColor': '#E54033',
+          theme === 'Dark' ? '#2B2B2B' : theme === 'Light' ? '#fff' : '#1D1832',
+        'mainSeriesProperties.candleStyle.upColor':
+          theme === 'Mango' ? '#AFD803' : '#5EBF4D',
+        'mainSeriesProperties.candleStyle.downColor':
+          theme === 'Mango' ? '#E54033' : '#CC2929',
         'mainSeriesProperties.candleStyle.drawWick': true,
         'mainSeriesProperties.candleStyle.drawBorder': true,
-        'mainSeriesProperties.candleStyle.borderColor': '#AFD803',
-        'mainSeriesProperties.candleStyle.borderUpColor': '#AFD803',
-        'mainSeriesProperties.candleStyle.borderDownColor': '#E54033',
-        'mainSeriesProperties.candleStyle.wickUpColor': '#AFD803',
-        'mainSeriesProperties.candleStyle.wickDownColor': '#E54033',
+        'mainSeriesProperties.candleStyle.borderColor':
+          theme === 'Mango' ? '#AFD803' : '#5EBF4D',
+        'mainSeriesProperties.candleStyle.borderUpColor':
+          theme === 'Mango' ? '#AFD803' : '#5EBF4D',
+        'mainSeriesProperties.candleStyle.borderDownColor':
+          theme === 'Mango' ? '#E54033' : '#CC2929',
+        'mainSeriesProperties.candleStyle.wickUpColor':
+          theme === 'Mango' ? '#AFD803' : '#5EBF4D',
+        'mainSeriesProperties.candleStyle.wickDownColor':
+          theme === 'Mango' ? '#E54033' : '#CC2929',
       },
     }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 43d7884..2da18fc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ const Index = () => {
   useHydrateStore()
 
   return (
-    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
       <TopBar />
       <MarketSelect />
       <div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>
diff --git a/styles/global.css b/styles/global.css
deleted file mode 100644
index 16d50fe..0000000
--- a/styles/global.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --primary: theme('colors.light-theme.orange');
-  --red: theme('colors.light-theme.red');
-  --green: theme('colors.light-theme.green');
-  --bkg-1: theme('colors.light-theme["bkg-1"]');
-  --bkg-2: theme('colors.light-theme["bkg-2"]');
-  --bkg-3: theme('colors.light-theme["bkg-3"]');
-  --fgd-1: theme('colors.light-theme["fgd-1"]');
-  --fgd-2: theme('colors.light-theme["fgd-2"]');
-  --fgd-3: theme('colors.light-theme["fgd-3"]');
-}
-
-[data-theme='dark'] {
-  --primary: theme('colors.dark-theme.orange');
-  --red: theme('colors.dark-theme.red');
-  --green: theme('colors.dark-theme.green');
-  --bkg-1: theme('colors.dark-theme["bkg-1"]');
-  --bkg-2: theme('colors.dark-theme["bkg-2"]');
-  --bkg-3: theme('colors.dark-theme["bkg-3"]');
-  --fgd-1: theme('colors.dark-theme["fgd-1"]');
-  --fgd-2: theme('colors.dark-theme["fgd-2"]');
-  --fgd-3: theme('colors.dark-theme["fgd-3"]');
-}
-
-[data-theme='mango'] {
-  --primary: theme('colors.mango-theme.yellow');
-  --red: theme('colors.mango-theme.red');
-  --green: theme('colors.mango-theme.green');
-  --bkg-1: theme('colors.mango-theme["bkg-1"]');
-  --bkg-2: theme('colors.mango-theme["bkg-2"]');
-  --bkg-3: theme('colors.mango-theme["bkg-3"]');
-  --fgd-1: theme('colors.mango-theme["fgd-1"]');
-  --fgd-2: theme('colors.mango-theme["fgd-2"]');
-  --fgd-3: theme('colors.mango-theme["fgd-3"]');
-}
diff --git a/styles/index.css b/styles/index.css
index 7f1f2df..4883316 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -15,7 +15,7 @@
   --fgd-4: theme('colors.light-theme["fgd-4"]');
 }
 
-[data-theme='dark'] {
+[data-theme='Dark'] {
   --primary: theme('colors.dark-theme.orange');
   --red: theme('colors.dark-theme.red');
   --green: theme('colors.dark-theme.green');
@@ -28,7 +28,7 @@
   --fgd-4: theme('colors.dark-theme["fgd-4"]');
 }
 
-[data-theme='mango'] {
+[data-theme='Mango'] {
   --primary: theme('colors.mango-theme.yellow');
   --red: theme('colors.mango-theme.red');
   --green: theme('colors.mango-theme.green');
diff --git a/tailwind.config.js b/tailwind.config.js
index 9d5ac45..cf2ca40 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,28 +47,28 @@ module.exports = {
           darkest: '#061f23',
         },
         'light-theme': {
-          orange: '#DFAB01',
-          red: '#E54033',
-          green: '#AFD803',
-          'bkg-1': '#F7F7F7',
+          orange: '#FF9C24',
+          red: '#CC2929',
+          green: '#5EBF4D',
+          'bkg-1': '#f7f7f7',
           'bkg-2': '#FFFFFF',
-          'bkg-3': '#E7E7E7',
+          'bkg-3': '#EDEDED',
           'fgd-1': '#061f23',
           'fgd-2': '#0C3F45',
           'fgd-3': '#446065',
-          'fgd-4': '#A0AFB1',
+          'fgd-4': '#B0B0B0',
         },
         'dark-theme': {
-          orange: '#DFAB01',
-          red: '#E54033',
-          green: '#AFD803',
-          'bkg-1': '#061f23',
-          'bkg-2': '#0F282D',
-          'bkg-3': '#0F3339',
+          orange: '#F2C94C',
+          red: '#CC2929',
+          green: '#5EBF4D',
+          'bkg-1': '#1C1C1C',
+          'bkg-2': '#2B2B2B',
+          'bkg-3': '#424242',
           'fgd-1': '#FFFFFF',
           'fgd-2': '#F7F7F7',
           'fgd-3': '#E7E7E7',
-          'fgd-4': '#A0AFB1',
+          'fgd-4': '#878787',
         },
         'mango-theme': {
           yellow: '#F2C94C',
@@ -76,7 +76,7 @@ module.exports = {
           green: '#AFD803',
           'bkg-1': '#141026',
           'bkg-2': '#1D1832',
-          'bkg-3': '#262337',
+          'bkg-3': '#322E47',
           'fgd-1': '#F0EDFF',
           'fgd-2': '#FCFCFF',
           'fgd-3': '#B9B5CE',