diff --git a/components/Input.tsx b/components/Input.tsx
index c1e5ad1..81d9406 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -41,9 +41,9 @@ const Input = ({
           type={type}
           value={value}
           onChange={onChange}
-          className={`bg-transparent font-light tracking-wider w-full h-full focus:outline-none ${
+          className={`bg-transparent tracking-wider w-full focus:outline-none ${
             disabled ? 'opacity-20 cursor-not-allowed' : ''
-          } ${type === 'number' ? 'text-right' : ''} ${
+          } ${type === 'number' ? 'text-right mr-1' : ''} ${
             value.toString().length > 9 ? 'text-xs' : ''
           }`}
           disabled={disabled}
diff --git a/components/TradeForm.tsx b/components/TradeForm.tsx
index e935369..d1a4f93 100644
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@@ -208,6 +208,9 @@ export default function TradeForm() {
     }
   }
 
+  const disabled =
+    (!price && tradeType === 'Limit') || !baseSize || !connected || submitting
+
   return (
     <FloatingElement>
       <div>
@@ -217,7 +220,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
+              className={`hover:text-th-green pb-1 transition-colors duration-500
                 ${
                   side === 'buy' &&
                   `text-th-green hover:text-th-green border-b-2 border-th-green`
@@ -231,7 +234,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
+              className={`hover:text-th-red pb-1 transition-colors duration-500
                 ${
                   side === 'sell' &&
                   `text-th-red hover:text-th-red border-b-2 border-th-red`
@@ -296,29 +299,27 @@ export default function TradeForm() {
         {ipAllowed ? (
           side === 'buy' ? (
             <Button
-              disabled={
-                (!price && tradeType === 'Limit') ||
-                !baseSize ||
-                !connected ||
-                submitting
-              }
+              disabled={disabled}
               onClick={onSubmit}
-              className="rounded text-lg bg-th-green text-th-bkg-1 hover:bg-th-primary flex-grow"
+              className={`rounded text-lg ${
+                !disabled && 'border-th-green hover:border-th-red-green'
+              } text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark hover:border-th-green-dark flex-grow`}
             >
-              {connected ? `Buy ${baseCurrency}` : 'Connect Wallet'}
+              {connected
+                ? `Buy ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
+                : 'Connect Wallet'}
             </Button>
           ) : (
             <Button
-              disabled={
-                (!price && tradeType === 'Limit') ||
-                !baseSize ||
-                !connected ||
-                submitting
-              }
+              disabled={disabled}
               onClick={onSubmit}
-              className="rounded text-lg bg-th-red text-white hover:bg-th-primary flex-grow"
+              className={`rounded text-lg ${
+                !disabled && 'border-th-red hover:border-th-red-dark'
+              } text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
             >
-              {connected ? `Sell ${baseCurrency}` : 'Connect Wallet'}
+              {connected
+                ? `Sell ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
+                : 'Connect Wallet'}
             </Button>
           )
         ) : (
diff --git a/components/UserInfo.tsx b/components/UserInfo.tsx
index 64a3576..9833516 100644
--- a/components/UserInfo.tsx
+++ b/components/UserInfo.tsx
@@ -42,7 +42,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
                   ${
                     activeTab === tabName
                       ? `border-th-primary text-th-primary`
-                      : `border-transparent text-th-fgd-4 hover:text-th-fgd-2`
+                      : `border-transparent text-th-fgd-4 hover:text-th-primary`
                   }
                 `}
               >
diff --git a/styles/index.css b/styles/index.css
index cc21130..2f3b6cf 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -4,8 +4,10 @@
 
 :root {
   --primary: theme('colors.light-theme.orange');
-  --red: theme('colors.light-theme.red');
-  --green: theme('colors.light-theme.green');
+  --red: theme('colors.light-theme.red.DEFAULT');
+  --red-dark: theme('colors.light-theme.red.dark');
+  --green: theme('colors.light-theme.green.DEFAULT');
+  --green-dark: theme('colors.light-theme.green.dark');
   --bkg-1: theme('colors.light-theme["bkg-1"]');
   --bkg-2: theme('colors.light-theme["bkg-2"]');
   --bkg-3: theme('colors.light-theme["bkg-3"]');
@@ -17,8 +19,10 @@
 
 [data-theme='Dark'] {
   --primary: theme('colors.dark-theme.orange');
-  --red: theme('colors.dark-theme.red');
-  --green: theme('colors.dark-theme.green');
+  --red: theme('colors.dark-theme.red.DEFAULT');
+  --red-dark: theme('colors.dark-theme.red.dark');
+  --green: theme('colors.dark-theme.green.DEFAULT');
+  --green-dark: theme('colors.dark-theme.green.dark');
   --bkg-1: theme('colors.dark-theme["bkg-1"]');
   --bkg-2: theme('colors.dark-theme["bkg-2"]');
   --bkg-3: theme('colors.dark-theme["bkg-3"]');
@@ -30,8 +34,10 @@
 
 [data-theme='Mango'] {
   --primary: theme('colors.mango-theme.yellow');
-  --red: theme('colors.mango-theme.red');
-  --green: theme('colors.mango-theme.green');
+  --red: theme('colors.mango-theme.red.DEFAULT');
+  --red-dark: theme('colors.mango-theme.red.dark');
+  --green: theme('colors.mango-theme.green.DEFAULT');
+  --green-dark: theme('colors.mango-theme.green.dark');
   --bkg-1: theme('colors.mango-theme["bkg-1"]');
   --bkg-2: theme('colors.mango-theme["bkg-2"]');
   --bkg-3: theme('colors.mango-theme["bkg-3"]');
diff --git a/tailwind.config.js b/tailwind.config.js
index 85eecd2..f12de43 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -49,8 +49,8 @@ module.exports = {
         },
         'light-theme': {
           orange: '#FF9C24',
-          red: '#CC2929',
-          green: '#5EBF4D',
+          red: { DEFAULT: '#CC2929', dark: '#AA2222' },
+          green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
           'bkg-1': '#f7f7f7',
           'bkg-2': '#FFFFFF',
           'bkg-3': '#EDEDED',
@@ -61,8 +61,8 @@ module.exports = {
         },
         'dark-theme': {
           orange: '#F2C94C',
-          red: '#CC2929',
-          green: '#5EBF4D',
+          red: { DEFAULT: '#CC2929', dark: '#AA2222' },
+          green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
           'bkg-1': '#1C1C1C',
           'bkg-2': '#2B2B2B',
           'bkg-3': '#424242',
@@ -73,8 +73,8 @@ module.exports = {
         },
         'mango-theme': {
           yellow: '#F2C94C',
-          red: '#E54033',
-          green: '#AFD803',
+          red: { DEFAULT: '#E54033', dark: '#C7251A' },
+          green: { DEFAULT: '#AFD803', dark: '#91B503' },
           'bkg-1': '#141026',
           'bkg-2': '#1D1832',
           'bkg-3': '#322E47',
@@ -92,7 +92,9 @@ module.exports = {
         'th-fgd-4': 'var(--fgd-4)',
         'th-primary': 'var(--primary)',
         'th-red': 'var(--red)',
+        'th-red-dark': 'var(--red-dark)',
         'th-green': 'var(--green)',
+        'th-green-dark': 'var(--green-dark)',
       },
     },
   },