diff --git a/components/MangoAccountsList.tsx b/components/MangoAccountsList.tsx
index 46b1308a..357b0e27 100644
--- a/components/MangoAccountsList.tsx
+++ b/components/MangoAccountsList.tsx
@@ -53,7 +53,7 @@ const MangoAccountsList = ({
       <Popover>
         {({ open }) => (
           <>
-            <Popover.Button className="flex w-full items-center rounded-none text-th-fgd-1 hover:text-th-primary">
+            <Popover.Button className="flex w-full items-center rounded-none text-th-fgd-1 hover:text-th-active">
               <div className="mr-2">
                 <p className="text-right text-xs">{t('accounts')}</p>
                 <p className="text-left text-sm font-bold text-th-fgd-1">
@@ -91,7 +91,7 @@ const MangoAccountsList = ({
                           {acc.name}
                           {acc.publicKey.toString() ===
                           mangoAccount?.publicKey.toString() ? (
-                            <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                            <CheckCircleIcon className="h-5 w-5 text-th-up" />
                           ) : null}
                         </button>
                       </div>
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 26a91bef..d38be172 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -202,8 +202,8 @@ const MenuItem = ({
       <Link
         href={pagePath}
         shallow={true}
-        className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
-          active ? 'text-th-primary' : 'text-th-fgd-1'
+        className={`default-transition flex cursor-pointer px-4 focus:text-th-active focus:outline-none md:hover:text-th-active ${
+          active ? 'text-th-active' : 'text-th-fgd-1'
         } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
       >
         <div className="flex w-full items-center justify-between">
@@ -288,7 +288,7 @@ export const ExpandableMenuItem = ({
         role="button"
       >
         <Popover.Button
-          className="md:hover:text-th-primary"
+          className="md:hover:text-th-active"
           onClick={() => toggleMenu()}
         >
           <div
@@ -309,13 +309,15 @@ export const ExpandableMenuItem = ({
         {showMenu ? (
           <Popover.Panel
             static
-            className={`absolute z-20 w-56 rounded-md rounded-l-none bg-th-bkg-2 py-2 ${
+            className={`absolute z-20 w-56 rounded-md rounded-l-none bg-th-bkg-1  ${
               alignBottom
                 ? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
                 : 'top-1/2 left-[63px] -translate-y-1/2'
             }`}
           >
-            {children}
+            <div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
+              {children}
+            </div>
           </Popover.Panel>
         ) : null}
       </div>
@@ -330,7 +332,7 @@ export const ExpandableMenuItem = ({
         }`}
       >
         <Disclosure.Button
-          className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-primary`}
+          className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-active`}
         >
           <div className="flex items-center">
             <div
diff --git a/components/SolanaTps.tsx b/components/SolanaTps.tsx
index deae4cbd..a178e969 100644
--- a/components/SolanaTps.tsx
+++ b/components/SolanaTps.tsx
@@ -47,19 +47,19 @@ const SolanaTps = () => {
             <div
               className={`absolute top-0.5 left-0.5 h-2 w-2 rounded-full ${
                 tps < tpsWarningThreshold
-                  ? 'bg-th-orange'
+                  ? 'bg-th-warning'
                   : tps < tpsAlertThreshold
-                  ? 'bg-th-red'
-                  : 'bg-th-green'
+                  ? 'bg-th-error'
+                  : 'bg-th-success'
               }`}
             />
             <div
               className={`absolute h-3 w-3 rounded-full opacity-40 ${
                 tps < tpsWarningThreshold
-                  ? 'bg-th-orange'
+                  ? 'bg-th-warning'
                   : tps < tpsAlertThreshold
-                  ? 'bg-th-red'
-                  : 'bg-th-green'
+                  ? 'bg-th-error'
+                  : 'bg-th-success'
               }`}
             />
           </div>
diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index 18c09bf9..88734116 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -224,14 +224,14 @@ const TokenList = () => {
                   </Td>
                   <Td>
                     <div className="flex justify-end space-x-2">
-                      <p className="text-th-green">
+                      <p className="text-th-up">
                         {formatDecimal(bank.getDepositRateUi(), 2, {
                           fixed: true,
                         })}
                         %
                       </p>
                       <span className="text-th-fgd-4">|</span>
-                      <p className="text-th-red">
+                      <p className="text-th-down">
                         {formatDecimal(bank.getBorrowRateUi(), 2, {
                           fixed: true,
                         })}
@@ -397,11 +397,11 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
           <div className="col-span-1">
             <p className="text-xs text-th-fgd-3">{t('rates')}</p>
             <p className="space-x-2 font-mono">
-              <span className="text-th-green">
+              <span className="text-th-up">
                 {formatDecimal(bank.getDepositRate().toNumber(), 2)}%
               </span>
               <span className="font-normal text-th-fgd-4">|</span>
-              <span className="text-th-red">
+              <span className="text-th-down">
                 {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
               </span>
             </p>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index f74106a9..1f18a54b 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -79,7 +79,7 @@ const TopBar = () => {
           ) : null}
         </span>
         {!isOnline ? (
-          <div className="flex items-center rounded-full bg-th-red py-2 px-4">
+          <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!
@@ -111,7 +111,7 @@ const TopBar = () => {
           <ConnectWalletButton />
         ) : (
           <button
-            className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+            className="from-mango-theme-yellow to-mango-theme-red-dark relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
             onClick={handleShowSetup}
           >
             <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
diff --git a/components/UserSetup.tsx b/components/UserSetup.tsx
index 510c249f..a7c2e212 100644
--- a/components/UserSetup.tsx
+++ b/components/UserSetup.tsx
@@ -234,7 +234,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           style={{
             width: `${(showSetupStep / 4) * 100}%`,
           }}
-          className="flex bg-th-primary transition-all duration-700 ease-out"
+          className="flex bg-th-active transition-all duration-700 ease-out"
         />
       </div>
       <div className="absolute top-6 right-6 z-10">
@@ -250,23 +250,23 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           <p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
           <div className="mb-6 space-y-2 py-3">
             <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
               <p className="text-base">{t('onboarding:bullet-1')}</p>
             </div>
             {/* <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
               <p className="text-base">Deeply liquid markets</p>
             </div> */}
             <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
               <p className="text-base">{t('onboarding:bullet-2')}</p>
             </div>
             <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
               <p className="text-base">{t('onboarding:bullet-3')}</p>
             </div>
             <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
               <p className="text-base">{t('onboarding:bullet-4')}</p>
             </div>
           </div>
@@ -289,7 +289,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
                   <button
                     className={`col-span-1 w-full rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
                       w.adapter.name === wallet?.adapter.name
-                        ? 'border-th-primary text-th-fgd-1 md:hover:border-th-primary'
+                        ? 'border-th-active text-th-fgd-1 md:hover:border-th-active'
                         : 'border-th-bkg-4 text-th-fgd-4'
                     }`}
                     onClick={() => {
diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 71d72490..585cef98 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -278,8 +278,8 @@ const AccountPage = () => {
                 <SimpleAreaChart
                   color={
                     accountValueChange >= 0
-                      ? COLORS.GREEN[theme]
-                      : COLORS.RED[theme]
+                      ? COLORS.UP[theme]
+                      : COLORS.DOWN[theme]
                   }
                   data={performanceData.concat(latestAccountData)}
                   height={88}
diff --git a/components/account/ActionTokenItem.tsx b/components/account/ActionTokenItem.tsx
index 30c92d9a..e91c5aa7 100644
--- a/components/account/ActionTokenItem.tsx
+++ b/components/account/ActionTokenItem.tsx
@@ -47,14 +47,14 @@ const ActionTokenItem = ({
       </div>
       {showDepositRates ? (
         <div className="text-right font-mono">
-          <p className="text-th-green">
+          <p className="text-th-up">
             {formatDecimal(bank.getDepositRate().toNumber(), 2)}%
           </p>
         </div>
       ) : null}
       {showBorrowRates ? (
         <div className="text-right font-mono">
-          <p className="text-th-red">
+          <p className="text-th-down">
             {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
           </p>
         </div>
diff --git a/components/account/ActivityFeed.tsx b/components/account/ActivityFeed.tsx
index 1f792e95..5eaa535b 100644
--- a/components/account/ActivityFeed.tsx
+++ b/components/account/ActivityFeed.tsx
@@ -225,7 +225,7 @@ const ActivityFilters = ({
         <div
           onClick={() => setShowMobileFilters(!showMobileFilters)}
           role="button"
-          className={`default-transition w-full border-b border-th-bkg-3 bg-th-bkg-2 p-4 hover:bg-th-bkg-3 md:px-6`}
+          className={`default-transition w-full bg-th-bkg-2 p-4 hover:bg-th-bkg-3 md:px-6`}
         >
           <Disclosure.Button
             className={`flex h-full w-full items-center justify-between rounded-none`}
diff --git a/components/account/ActivityFeedTable.tsx b/components/account/ActivityFeedTable.tsx
index d48e5353..a6578706 100644
--- a/components/account/ActivityFeedTable.tsx
+++ b/components/account/ActivityFeedTable.tsx
@@ -218,7 +218,7 @@ const ActivityFeedTable = ({
                     </Td>
                     <Td
                       className={`text-right font-mono ${
-                        value >= 0 ? 'text-th-green' : 'text-th-red'
+                        value >= 0 ? 'text-th-up' : 'text-th-down'
                       }`}
                     >
                       {value > 0 ? '+' : ''}
@@ -368,8 +368,8 @@ const MobileActivityFeedItem = ({
                   <span
                     className={`mr-1 font-body ${
                       activity.activity_details.taker_side === 'bid'
-                        ? 'text-th-green'
-                        : 'text-th-red'
+                        ? 'text-th-up'
+                        : 'text-th-down'
                     }`}
                   >
                     {activity.activity_details.taker_side === 'bid'
diff --git a/components/account/HealthHeart.tsx b/components/account/HealthHeart.tsx
index 334c0db8..1c199008 100644
--- a/components/account/HealthHeart.tsx
+++ b/components/account/HealthHeart.tsx
@@ -17,10 +17,10 @@ const HealthHeart = ({
       className={
         health
           ? health > 15 && health < 50
-            ? 'text-th-orange'
+            ? 'text-th-warning'
             : health >= 50
-            ? 'text-th-green'
-            : 'text-th-red'
+            ? 'text-th-success'
+            : 'text-th-error'
           : 'text-th-fgd-4'
       }
       style={styles}
diff --git a/components/forms/ButtonGroup.tsx b/components/forms/ButtonGroup.tsx
index 4d6dcf5b..98cb00e4 100644
--- a/components/forms/ButtonGroup.tsx
+++ b/components/forms/ButtonGroup.tsx
@@ -22,11 +22,11 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
   large,
 }) => {
   return (
-    <div className={`rounded-md bg-th-bkg-3 ${disabled ? 'opacity-50' : ''}`}>
+    <div className={`rounded-md bg-th-bkg-2 ${disabled ? 'opacity-50' : ''}`}>
       <div className="relative flex">
         {activeValue && values.includes(activeValue) ? (
           <div
-            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-4`}
+            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
             style={{
               transform: `translateX(${
                 values.findIndex((v) => v === activeValue) * 100
@@ -42,8 +42,8 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
             } font-normal
               ${
                 v === activeValue
-                  ? `text-th-primary`
-                  : `text-th-fgd-2 md:hover:text-th-primary`
+                  ? `text-th-active`
+                  : `text-th-fgd-2 md:hover:text-th-active`
               }
             `}
             disabled={disabled}
diff --git a/components/forms/Checkbox.tsx b/components/forms/Checkbox.tsx
index c6d15b98..10331644 100644
--- a/components/forms/Checkbox.tsx
+++ b/components/forms/Checkbox.tsx
@@ -39,7 +39,7 @@ const Checkbox = ({
     />
     <div
       className={`${
-        checked && !disabled && !halfState ? 'bg-th-primary' : 'bg-th-bkg-4'
+        checked && !disabled && !halfState ? 'bg-th-active' : 'bg-th-bkg-4'
       } default-transition flex h-4 w-4 flex-shrink-0 cursor-pointer items-center justify-center rounded`}
     >
       {halfState ? (
diff --git a/components/forms/Input.tsx b/components/forms/Input.tsx
index a751c37e..819e81ce 100644
--- a/components/forms/Input.tsx
+++ b/components/forms/Input.tsx
@@ -43,7 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         <input
           className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
           text-th-fgd-1 ${
-            error ? 'border-th-red' : 'border-th-bkg-4'
+            error ? 'border-th-down' : 'border-th-bkg-4'
           } hover:border-th-fgd-4 
           focus:outline-none 
           ${
@@ -69,7 +69,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         {charLimit ? (
           <p
             className={`absolute -top-7 right-0 mt-1 flex justify-end text-xs ${
-              value.length === charLimit ? 'text-th-red' : 'text-th-fgd-4'
+              value.length === charLimit ? 'text-th-down' : 'text-th-fgd-4'
             }`}
           >
             {`${value.length}/${charLimit}`}
diff --git a/components/forms/Select.tsx b/components/forms/Select.tsx
index aa710745..81531020 100644
--- a/components/forms/Select.tsx
+++ b/components/forms/Select.tsx
@@ -27,10 +27,10 @@ const Select = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`h-full w-full rounded-md bg-th-bkg-1 font-normal ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-3 focus:border-th-fgd-3 focus:outline-none`}
+              className={`default-transition h-full w-full rounded-md bg-th-bkg-1 py-2.5 font-normal ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 focus:border-th-fgd-3 focus:outline-none`}
             >
               <div
-                className={`flex h-12 items-center justify-between space-x-2 px-3 text-base text-th-fgd-1`}
+                className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
               >
                 {value ? (
                   value
@@ -70,8 +70,8 @@ const Option = ({ value, children, className }: OptionProps) => {
     <Listbox.Option className="mb-0" value={value}>
       {({ selected }) => (
         <div
-          className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary ${
-            selected ? 'text-th-primary' : ''
+          className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-active ${
+            selected ? 'text-th-active' : ''
           } ${className}`}
         >
           {children}
diff --git a/components/forms/Switch.tsx b/components/forms/Switch.tsx
index 9f7197c9..73fa8b4a 100644
--- a/components/forms/Switch.tsx
+++ b/components/forms/Switch.tsx
@@ -25,7 +25,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
       <button
         type="button"
         className={`${
-          checked ? 'bg-th-primary' : 'bg-th-button'
+          checked ? 'bg-th-success' : 'bg-th-bkg-4'
         } relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full 
         border-2 border-transparent transition-colors duration-200 ease-in-out 
         focus:outline-none ${disabled ? 'opacity-60' : ''}`}
diff --git a/components/icons/OrderbookIcon.tsx b/components/icons/OrderbookIcon.tsx
index ea797b52..e2dd4313 100644
--- a/components/icons/OrderbookIcon.tsx
+++ b/components/icons/OrderbookIcon.tsx
@@ -9,10 +9,8 @@ const OrderbookIcon = ({
   className?: string
 }) => {
   const { theme } = useTheme()
-  const oppositeSideColor =
-    theme === 'Light' ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.2)'
-  const buyColor = side === 'buy' ? COLORS.GREEN[theme] : oppositeSideColor
-  const sellColor = side === 'sell' ? COLORS.RED[theme] : oppositeSideColor
+  const buyColor = side === 'buy' ? COLORS.UP[theme] : COLORS.FGD4[theme]
+  const sellColor = side === 'sell' ? COLORS.DOWN[theme] : COLORS.FGD4[theme]
   return (
     <svg
       className={`${className}`}
diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx
index d5006cda..59dc51f8 100644
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@@ -40,7 +40,7 @@ const BottomBar = () => {
             pathname: '/',
           }}
           className={`${
-            asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
+            asPath === '/' ? 'text-th-active' : 'text-th-fgd-3'
           } col-span-1 flex cursor-pointer flex-col items-center`}
         >
           <HomeIcon className="mb-1 h-4 w-4" />
@@ -52,7 +52,7 @@ const BottomBar = () => {
           }}
           shallow={true}
           className={`${
-            asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
+            asPath === '/swap' ? 'text-th-active' : 'text-th-fgd-3'
           } col-span-1 flex cursor-pointer flex-col items-center`}
         >
           <ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
@@ -62,7 +62,7 @@ const BottomBar = () => {
           href="/trade"
           shallow={true}
           className={`${
-            asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
+            asPath === '/trade' ? 'text-th-active' : 'text-th-fgd-3'
           } col-span-1 flex cursor-pointer flex-col items-center`}
         >
           <TradeIcon className="mb-1 h-4 w-4" />
@@ -70,7 +70,7 @@ const BottomBar = () => {
         </Link>
         <a
           className={`${
-            showPanel ? 'text-th-primary' : 'text-th-fgd-3'
+            showPanel ? 'text-th-active' : 'text-th-fgd-3'
           } col-span-1 flex cursor-pointer flex-col items-center`}
           onClick={() => setShowPanel(!showPanel)}
         >
diff --git a/components/modals/MangoAccountsListModal.tsx b/components/modals/MangoAccountsListModal.tsx
index eb539d9b..2275e231 100644
--- a/components/modals/MangoAccountsListModal.tsx
+++ b/components/modals/MangoAccountsListModal.tsx
@@ -106,10 +106,10 @@ const MangoAccountsListModal = ({
                                 className={`flex items-center ${
                                   maintHealth
                                     ? maintHealth > 15 && maintHealth < 50
-                                      ? 'text-th-orange'
+                                      ? 'text-th-warning'
                                       : maintHealth >= 50
-                                      ? 'text-th-green'
-                                      : 'text-th-red'
+                                      ? 'text-th-success'
+                                      : 'text-th-error'
                                     : 'text-th-fgd-4'
                                 }`}
                               >
@@ -120,7 +120,7 @@ const MangoAccountsListModal = ({
                           </div>
                           {acc.publicKey.toString() ===
                           mangoAccount?.publicKey.toString() ? (
-                            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
+                            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-success">
                               <CheckIcon className="h-4 w-4 text-th-bkg-1" />
                             </div>
                           ) : (
diff --git a/components/profile/EditNftProfilePic.tsx b/components/profile/EditNftProfilePic.tsx
index 747cf983..e8a83c39 100644
--- a/components/profile/EditNftProfilePic.tsx
+++ b/components/profile/EditNftProfilePic.tsx
@@ -138,7 +138,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
       <div className="mb-3 flex w-full flex-col items-center sm:mt-3 sm:flex-row sm:justify-between">
         <button
           onClick={onClose}
-          className={`absolute left-2 top-3 z-50 text-th-fgd-4 focus:outline-none md:hover:text-th-primary`}
+          className={`absolute left-2 top-3 z-50 text-th-fgd-4 focus:outline-none md:hover:text-th-active`}
         >
           <ArrowLeftIcon className={`h-5 w-5`} />
         </button>
@@ -161,7 +161,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
               <button
                 className={`default-transition col-span-1 flex items-center justify-center rounded-md border bg-th-bkg-2 py-3 sm:py-4 md:hover:bg-th-bkg-3 ${
                   selectedProfile === n.image
-                    ? 'border-th-primary'
+                    ? 'border-th-active'
                     : 'border-th-bkg-3'
                 }`}
                 key={n.image}
diff --git a/components/profile/EditProfileForm.tsx b/components/profile/EditProfileForm.tsx
index 63d0f03e..212b56b8 100644
--- a/components/profile/EditProfileForm.tsx
+++ b/components/profile/EditProfileForm.tsx
@@ -158,8 +158,8 @@ const EditProfileForm = ({
         />
         {inputError ? (
           <div className="mt-1.5 flex items-center space-x-1">
-            <ExclamationCircleIcon className="h-4 w-4 text-th-red" />
-            <p className="mb-0 text-xs text-th-red">{inputError}</p>
+            <ExclamationCircleIcon className="h-4 w-4 text-th-down" />
+            <p className="mb-0 text-xs text-th-down">{inputError}</p>
           </div>
         ) : null}
       </div>
diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx
index bfcbd5db..ff9e9618 100644
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@@ -1,4 +1,5 @@
 import ButtonGroup from '@components/forms/ButtonGroup'
+import Select from '@components/forms/Select'
 import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
@@ -41,7 +42,15 @@ const DisplaySettings = () => {
     'Slider'
   )
   const themes = useMemo(() => {
-    return [t('settings:light'), t('settings:mango'), t('settings:dark')]
+    return [
+      t('settings:light'),
+      'Medium',
+      t('settings:dark'),
+      'Jungle',
+      t('settings:mango'),
+      'Ocean',
+      // 'Smoothy',
+    ]
   }, [t])
 
   const handleLangChange = useCallback(
@@ -58,12 +67,25 @@ const DisplaySettings = () => {
       <h2 className="mb-4 text-base">{t('settings:display')}</h2>
       <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
         <p className="mb-2 lg:mb-0">{t('settings:theme')}</p>
-        <div className="w-full min-w-[220px] md:w-auto">
-          <ButtonGroup
+        <div className="w-full min-w-[140px] md:w-auto">
+          <Select
+            value={theme}
+            onChange={(t) => setTheme(t)}
+            className="w-full"
+          >
+            {themes.map((t) => (
+              <Select.Option key={t} value={t}>
+                <div className="flex w-full items-center justify-between">
+                  {t}
+                </div>
+              </Select.Option>
+            ))}
+          </Select>
+          {/* <ButtonGroup
             activeValue={theme}
             onChange={(t) => setTheme(t)}
             values={themes}
-          />
+          /> */}
         </div>
       </div>
       <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
diff --git a/components/settings/PreferredExplorerSettings.tsx b/components/settings/PreferredExplorerSettings.tsx
index bd148ee1..996ed1c0 100644
--- a/components/settings/PreferredExplorerSettings.tsx
+++ b/components/settings/PreferredExplorerSettings.tsx
@@ -37,7 +37,7 @@ const PreferredExplorerSettings = () => {
               <p>{t(`settings:${ex.name}`)}</p>
             </div>
             {preferredExplorer.url === ex.url ? (
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
+              <CheckCircleIcon className="h-5 w-5 text-th-success" />
             ) : null}
           </button>
         ))}
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index 4a9ff6d3..0f786b67 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from 'next-themes'
 import { FunctionComponent, ReactNode } from 'react'
 
 interface AllButtonProps {
@@ -24,19 +23,14 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
   size = 'medium',
   ...props
 }) => {
-  const { theme } = useTheme()
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       className={`whitespace-nowrap rounded-md ${
         secondary
-          ? `border border-th-fgd-4 md:hover:border-th-bkg-4 ${
-              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
-            }`
-          : `bg-th-button md:hover:bg-th-button-hover ${
-              theme === 'Light' ? 'text-th-bkg-1' : 'text-th-fgd-1'
-            }`
+          ? 'border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4'
+          : 'bg-th-button text-white md:hover:bg-th-button-hover'
       } ${
         size === 'medium'
           ? 'h-10 px-4'
@@ -78,7 +72,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
           ? 'h-8 w-8'
           : 'h-10 w-10'
       } default-transition items-center justify-center rounded-full ${
-        hideBg ? 'md:hover:text-th-primary' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3'
+        hideBg ? 'md:hover:text-th-active' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3'
       } text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 
       disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className}`}
       {...props}
@@ -107,7 +101,7 @@ export const LinkButton: FunctionComponent<LinkButtonCombinedProps> = ({
       onClick={onClick}
       disabled={disabled}
       className={`flex items-center border-0 font-bold ${
-        secondary ? 'text-th-primary' : 'text-th-fgd-2'
+        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/Change.tsx b/components/shared/Change.tsx
index efde9142..c0717430 100644
--- a/components/shared/Change.tsx
+++ b/components/shared/Change.tsx
@@ -33,9 +33,9 @@ const Change = ({
           size === 'small' ? 'text-xs' : 'text-sm'
         } ${
           change > 0
-            ? 'text-th-green'
+            ? 'text-th-up'
             : change < 0
-            ? 'text-th-red'
+            ? 'text-th-down'
             : 'text-th-fgd-4'
         }`}
       >
diff --git a/components/shared/ChartRangeButtons.tsx b/components/shared/ChartRangeButtons.tsx
index c06a3228..f05aa399 100644
--- a/components/shared/ChartRangeButtons.tsx
+++ b/components/shared/ChartRangeButtons.tsx
@@ -34,8 +34,8 @@ const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
             className={`${className} default-transition relative h-6 w-1/2 cursor-pointer rounded-md px-3 text-center text-xs
               ${
                 v === activeValue
-                  ? `text-th-primary`
-                  : `text-th-fgd-3 md:hover:text-th-primary`
+                  ? `text-th-active`
+                  : `text-th-fgd-3 md:hover:text-th-active`
               }
             `}
             key={`${v}${i}`}
diff --git a/components/shared/DailyRange.tsx b/components/shared/DailyRange.tsx
index a0ddc164..2ab24e56 100644
--- a/components/shared/DailyRange.tsx
+++ b/components/shared/DailyRange.tsx
@@ -23,7 +23,7 @@ const DailyRange = ({ high, low, price }: DailyRangeProps) => {
             style={{
               width: `${rangePercent}%`,
             }}
-            className="flex rounded-sm bg-th-primary"
+            className="flex rounded-sm bg-th-active"
           ></div>
         </div>
         <span className={`pl-2 font-mono text-th-fgd-2`}>
diff --git a/components/shared/DetailedAreaChart.tsx b/components/shared/DetailedAreaChart.tsx
index 5b658f9b..63e3d386 100644
--- a/components/shared/DetailedAreaChart.tsx
+++ b/components/shared/DetailedAreaChart.tsx
@@ -212,8 +212,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                           offset="0%"
                           stopColor={
                             calculateChartChange() >= 0
-                              ? COLORS.GREEN[theme]
-                              : COLORS.RED[theme]
+                              ? COLORS.UP[theme]
+                              : COLORS.DOWN[theme]
                           }
                           stopOpacity={0.15}
                         />
@@ -221,8 +221,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                           offset="99%"
                           stopColor={
                             calculateChartChange() >= 0
-                              ? COLORS.GREEN[theme]
-                              : COLORS.RED[theme]
+                              ? COLORS.UP[theme]
+                              : COLORS.DOWN[theme]
                           }
                           stopOpacity={0}
                         />
@@ -234,8 +234,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                       dataKey={yKey}
                       stroke={
                         calculateChartChange() >= 0
-                          ? COLORS.GREEN[theme]
-                          : COLORS.RED[theme]
+                          ? COLORS.UP[theme]
+                          : COLORS.DOWN[theme]
                       }
                       strokeWidth={1.5}
                       fill="url(#gradientArea)"
diff --git a/components/shared/DirectionTriangles.tsx b/components/shared/DirectionTriangles.tsx
index 7c2c91d5..2488b9ec 100644
--- a/components/shared/DirectionTriangles.tsx
+++ b/components/shared/DirectionTriangles.tsx
@@ -4,7 +4,7 @@ export const UpTriangle = ({ size }: { size?: 'small' }) => (
       size === 'small'
         ? 'border-l-[4px] border-r-[4px] border-b-[6.92px]'
         : 'border-l-[6px] border-r-[6px] border-b-[10.39px]'
-    } border-l-transparent border-r-transparent border-b-th-green`}
+    } border-b-th-up border-l-transparent border-r-transparent`}
   />
 )
 
@@ -14,6 +14,6 @@ export const DownTriangle = ({ size }: { size?: 'small' }) => (
       size === 'small'
         ? 'border-l-[4px] border-r-[4px] border-t-[6.92px]'
         : 'border-l-[6px] border-r-[6px] border-t-[10.39px]'
-    } border-l-transparent border-r-transparent border-t-th-red`}
+    } border-l-transparent border-r-transparent border-t-th-down`}
   />
 )
diff --git a/components/shared/FavoriteMarketButton.tsx b/components/shared/FavoriteMarketButton.tsx
index f4cb1beb..565cc530 100644
--- a/components/shared/FavoriteMarketButton.tsx
+++ b/components/shared/FavoriteMarketButton.tsx
@@ -27,14 +27,14 @@ const FavoriteMarketButton = ({
     (marketName: string) => marketName === market.name
   ) ? (
     <button
-      className="default-transition flex items-center justify-center text-th-primary md:hover:text-th-fgd-3"
+      className="default-transition flex items-center justify-center text-th-active md:hover:text-th-fgd-3"
       onClick={() => removeFromFavorites(market.name)}
     >
       <FilledStarIcon className="h-5 w-5" />
     </button>
   ) : (
     <button
-      className="default-transition flex items-center justify-center text-th-fgd-4 md:hover:text-th-primary"
+      className="default-transition flex items-center justify-center text-th-fgd-4 md:hover:text-th-active"
       onClick={() => addToFavorites(market.name)}
     >
       <StarIcon className="h-5 w-5" />
diff --git a/components/shared/HealthImpact.tsx b/components/shared/HealthImpact.tsx
index 6aa2378a..522cd6c0 100644
--- a/components/shared/HealthImpact.tsx
+++ b/components/shared/HealthImpact.tsx
@@ -43,10 +43,10 @@ const HealthImpact = ({
         <p
           className={`${
             maintProjectedHealth < 50 && maintProjectedHealth > 15
-              ? 'text-th-orange'
+              ? 'text-th-warning'
               : maintProjectedHealth <= 15
-              ? 'text-th-red'
-              : 'text-th-green'
+              ? 'text-th-down'
+              : 'text-th-up'
           } ${responsive ? 'text-xs lg:text-sm' : ''}`}
         >
           {maintProjectedHealth}%
@@ -54,8 +54,8 @@ const HealthImpact = ({
         <span
           className={`text-xs ${
             maintProjectedHealth >= currentMaintHealth!
-              ? 'text-th-green'
-              : 'text-th-red'
+              ? 'text-th-up'
+              : 'text-th-down'
           }`}
         >
           ({maintProjectedHealth >= currentMaintHealth! ? '+' : ''}
diff --git a/components/shared/IconDropMenu.tsx b/components/shared/IconDropMenu.tsx
index 618ab1f7..996adce6 100644
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@@ -1,6 +1,5 @@
 import { Popover, Transition } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/20/solid'
-import { useTheme } from 'next-themes'
 import { Fragment, ReactNode } from 'react'
 
 const IconDropMenu = ({
@@ -34,7 +33,6 @@ const IconDropMenu = ({
     rightBottom: size === 'large' ? 'left-14 bottom-0' : 'left-12 bottom-0',
     rightTop: size === 'large' ? 'left-14 top-0' : 'left-12 top-0',
   }
-  const { theme } = useTheme()
   return (
     <Popover>
       {({ open }) => (
@@ -46,9 +44,7 @@ const IconDropMenu = ({
                 : size === 'medium'
                 ? 'h-10 w-10'
                 : 'h-8 w-8'
-            } default-transition items-center justify-center rounded-full border border-th-fgd-4 md:hover:border-th-bkg-4 ${
-              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
-            } md:hover:text-th-fgd-1 ${
+            } default-transition items-center justify-center rounded-full border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:text-th-fgd-1 ${
               disabled ? 'cursor-not-allowed opacity-60' : ''
             }`}
             disabled={disabled}
diff --git a/components/shared/InlineNotification.tsx b/components/shared/InlineNotification.tsx
index 4ed97bb6..d49b5b4a 100644
--- a/components/shared/InlineNotification.tsx
+++ b/components/shared/InlineNotification.tsx
@@ -26,30 +26,30 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
       !hideBorder
         ? `border text-th-fgd-3 ${
             type === 'error'
-              ? 'border-th-red'
+              ? 'border-th-error'
               : type === 'success'
-              ? 'border-th-green'
+              ? 'border-th-success'
               : type === 'info'
               ? 'border-th-bkg-4'
-              : 'border-th-orange'
+              : 'border-th-warning'
           }`
         : type === 'error'
-        ? 'text-th-red'
+        ? 'text-th-error'
         : type === 'success'
-        ? 'text-th-green'
+        ? 'text-th-success'
         : type === 'info'
         ? 'text-th-bkg-4'
-        : 'text-th-orange'
+        : 'text-th-warning'
     } flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`}
   >
     {type === 'error' ? (
-      <ExclamationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-red" />
+      <ExclamationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-error" />
     ) : null}
     {type === 'success' ? (
-      <CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-green" />
+      <CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-success" />
     ) : null}
     {type === 'warning' ? (
-      <ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-orange" />
+      <ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-warning" />
     ) : null}
     {type === 'info' ? (
       <InformationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
diff --git a/components/shared/MenuItem.tsx b/components/shared/MenuItem.tsx
index c11e4e07..28f92629 100644
--- a/components/shared/MenuItem.tsx
+++ b/components/shared/MenuItem.tsx
@@ -12,20 +12,19 @@ const MenuItem = ({ href, children, newWindow = false }: MenuItemProps) => {
   const { asPath } = useRouter()
 
   return (
-    (<Link
+    <Link
       href={href}
       shallow={true}
       className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
-        ${asPath === href ? `text-th-primary` : `border-transparent`}
+        ${asPath === href ? `text-th-active` : `border-transparent`}
       `}
       target={newWindow ? '_blank' : ''}
-      rel={newWindow ? 'noopener noreferrer' : ''}>
-
+      rel={newWindow ? 'noopener noreferrer' : ''}
+    >
       {children}
       <ChevronRightIcon className="h-5 w-5 md:hidden" />
-
-    </Link>)
-  );
+    </Link>
+  )
 }
 
 export default MenuItem
diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx
index 1ec67e17..3860e72d 100644
--- a/components/shared/Modal.tsx
+++ b/components/shared/Modal.tsx
@@ -33,7 +33,7 @@ function Modal({
           {!hideClose ? (
             <button
               onClick={onClose}
-              className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
+              className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-active`}
             >
               <XMarkIcon className={`h-6 w-6`} />
             </button>
diff --git a/components/shared/Notification.tsx b/components/shared/Notification.tsx
index 74c15f90..78ed1976 100644
--- a/components/shared/Notification.tsx
+++ b/components/shared/Notification.tsx
@@ -224,25 +224,25 @@ const Notification = ({ notification }: { notification: Notification }) => {
       <div
         className={`pointer-events-auto w-full rounded-md border bg-th-bkg-2 shadow-lg md:w-auto ${
           type === 'success'
-            ? 'border-th-green'
+            ? 'border-th-success'
             : type === 'error'
-            ? 'border-th-red'
+            ? 'border-th-error'
             : 'border-th-bkg-4'
         }`}
       >
         <div className={`relative flex w-full items-center p-3.5 md:w-96`}>
           <div className={`mr-1 flex-shrink-0`}>
             {type === 'success' ? (
-              <CheckCircleIcon className={`h-6 w-6 text-th-green`} />
+              <CheckCircleIcon className={`h-6 w-6 text-th-success`} />
             ) : null}
             {type === 'info' && (
               <InformationCircleIcon className={`h-6 w-6 text-th-fgd-3`} />
             )}
             {type === 'error' && (
-              <XCircleIcon className={`h-6 w-6 text-th-red`} />
+              <XCircleIcon className={`h-6 w-6 text-th-error`} />
             )}
             {type === 'confirm' && (
-              <Loading className="mr-0.5 h-5 w-5 text-th-primary" />
+              <Loading className="mr-0.5 h-5 w-5 text-th-active" />
             )}
           </div>
           <div className={`ml-2 flex-1`}>
@@ -257,7 +257,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
             {txid ? (
               <a
                 href={preferredExplorer.url + txid + '?cluster=' + CLUSTER}
-                className="default-transition mt-1 flex items-center text-xs text-th-primary underline hover:text-th-fgd-2"
+                className="default-transition mt-1 flex items-center text-xs text-th-active underline hover:text-th-fgd-2"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -266,7 +266,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
                     ? txid
                     : `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`}
                 </div>
-                <ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5" />
+                <ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5 flex-shrink-0" />
               </a>
             ) : null}
           </div>
diff --git a/components/shared/SideBadge.tsx b/components/shared/SideBadge.tsx
index 2717907f..72ead780 100644
--- a/components/shared/SideBadge.tsx
+++ b/components/shared/SideBadge.tsx
@@ -13,8 +13,8 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
     <div
       className={`inline-block rounded uppercase ${
         side === 'buy' || side === 'long' || side === PerpOrderSide.bid
-          ? 'border border-th-green text-th-green'
-          : 'border border-th-red text-th-red'
+          ? 'border border-th-up text-th-up'
+          : 'border border-th-down text-th-down'
       }
        -my-0.5 px-1 text-xs uppercase md:px-1.5 md:py-0.5`}
     >
diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx
index a904fe4c..a59e1479 100644
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@@ -39,7 +39,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
                 : ''
             } ${
               label === activeValue
-                ? 'bg-th-bkg-2 text-th-primary'
+                ? 'bg-th-bkg-2 text-th-active'
                 : 'hover:cursor-pointer hover:text-th-fgd-2'
             }`}
             key={`${label}${i}`}
diff --git a/components/shared/TabUnderline.tsx b/components/shared/TabUnderline.tsx
index 50a6493a..26d2d6cf 100644
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@@ -19,10 +19,10 @@ const TabUnderline = ({
       <div
         className={`default-transition absolute bottom-[-1px] left-0 h-0.5 ${
           activeValue === 'buy'
-            ? 'bg-th-green'
+            ? 'bg-th-up'
             : activeValue === 'sell'
-            ? 'bg-th-red'
-            : 'bg-th-primary'
+            ? 'bg-th-down'
+            : 'bg-th-active'
         }`}
         style={{
           // maxWidth: '176px',
@@ -43,10 +43,10 @@ const TabUnderline = ({
             ${
               activeValue === value
                 ? activeValue === 'buy'
-                  ? 'text-th-green'
+                  ? 'text-th-up'
                   : activeValue === 'sell'
-                  ? 'text-th-red'
-                  : 'text-th-primary'
+                  ? 'text-th-down'
+                  : 'text-th-active'
                 : 'text-th-fgd-4 hover:text-th-fgd-3'
             }
           `}
diff --git a/components/stats/SpotMarketsTable.tsx b/components/stats/SpotMarketsTable.tsx
index 897b0935..b51d6e64 100644
--- a/components/stats/SpotMarketsTable.tsx
+++ b/components/stats/SpotMarketsTable.tsx
@@ -80,9 +80,7 @@ const SpotMarketsTable = () => {
                       chartData !== undefined ? (
                         <SimpleAreaChart
                           color={
-                            change >= 0
-                              ? COLORS.GREEN[theme]
-                              : COLORS.RED[theme]
+                            change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
                           }
                           data={chartData}
                           height={40}
@@ -178,7 +176,7 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
         {!loadingPrices ? (
           chartData !== undefined ? (
             <SimpleAreaChart
-              color={change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]}
+              color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
               data={chartData}
               height={40}
               name={bank!.name}
diff --git a/components/stats/TokenStats.tsx b/components/stats/TokenStats.tsx
index 40852245..60c2e7d0 100644
--- a/components/stats/TokenStats.tsx
+++ b/components/stats/TokenStats.tsx
@@ -190,14 +190,14 @@ const TokenStats = () => {
                   </Td>
                   <Td>
                     <div className="flex justify-end space-x-2">
-                      <p className="text-th-green">
+                      <p className="text-th-up">
                         {formatDecimal(bank.getDepositRateUi(), 2, {
                           fixed: true,
                         })}
                         %
                       </p>
                       <span className="text-th-fgd-4">|</span>
-                      <p className="text-th-red">
+                      <p className="text-th-down">
                         {formatDecimal(bank.getBorrowRateUi(), 2, {
                           fixed: true,
                         })}
@@ -310,11 +310,11 @@ const TokenStats = () => {
                     <div className="col-span-1">
                       <p className="text-xs text-th-fgd-3">{t('rates')}</p>
                       <p className="space-x-2">
-                        <span className="font-mono text-th-green">
+                        <span className="font-mono text-th-up">
                           {formatDecimal(bank.getDepositRate().toNumber(), 2)}%
                         </span>
                         <span className="font-normal text-th-fgd-4">|</span>
-                        <span className="font-mono text-th-red">
+                        <span className="font-mono text-th-down">
                           {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
                         </span>
                       </p>
diff --git a/components/swap/JupiterRouteInfo.tsx b/components/swap/JupiterRouteInfo.tsx
index 75207595..626d3a26 100644
--- a/components/swap/JupiterRouteInfo.tsx
+++ b/components/swap/JupiterRouteInfo.tsx
@@ -315,7 +315,7 @@ const JupiterRouteInfo = ({
                   )}
                 </p>
                 <ArrowsRightLeftIcon
-                  className="default-transition ml-1 h-4 w-4 cursor-pointer text-th-fgd-1 hover:text-th-primary"
+                  className="default-transition ml-1 h-4 w-4 cursor-pointer text-th-fgd-1 hover:text-th-active"
                   onClick={() => setSwapRate(!swapRate)}
                 />
               </div>
@@ -325,8 +325,8 @@ const JupiterRouteInfo = ({
                   <div
                     className={`text-right font-mono ${
                       coinGeckoPriceDifference.gt(0)
-                        ? 'text-th-red'
-                        : 'text-th-green'
+                        ? 'text-th-down'
+                        : 'text-th-up'
                     }`}
                   >
                     {Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
@@ -415,7 +415,7 @@ const JupiterRouteInfo = ({
                   )
                 })}
               </span>
-              <PencilIcon className="ml-2 h-4 w-4 hover:text-th-primary" />
+              <PencilIcon className="ml-2 h-4 w-4 hover:text-th-active" />
             </div>
           </div>
           {typeof feeValue === 'number' ? (
@@ -492,7 +492,7 @@ const JupiterRouteInfo = ({
                   }
                   placement={'left'}
                 >
-                  <InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-primary" />
+                  <InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-active" />
                 </Tooltip>
               </div>
               <div>
diff --git a/components/swap/RoutesModal.tsx b/components/swap/RoutesModal.tsx
index d0ec171e..fb3c5fcf 100644
--- a/components/swap/RoutesModal.tsx
+++ b/components/swap/RoutesModal.tsx
@@ -44,7 +44,7 @@ const RoutesModal = ({
               key={index}
               className={`default-transition mb-2 rounded border bg-th-bkg-3 hover:bg-th-bkg-4 ${
                 selected
-                  ? 'border-th-primary text-th-primary hover:border-th-primary'
+                  ? 'border-th-active text-th-active hover:border-th-active'
                   : 'border-transparent text-th-fgd-1'
               }`}
             >
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 795fc7b0..d0222eb6 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -277,7 +277,7 @@ const SwapForm = () => {
         </div>
         <div className="-mb-2 flex justify-center">
           <button
-            className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-primary"
+            className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-active"
             onClick={handleSwitchTokens}
           >
             <ArrowDownIcon
diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index 7fab1d3a..42218d2b 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -24,7 +24,7 @@ import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
 import Tooltip from '@components/shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
 import useJupiterMints from 'hooks/useJupiterMints'
-import { Table, Td, Th, TrBody } from '@components/shared/TableElements'
+import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 
@@ -56,13 +56,13 @@ const SwapHistoryTable = ({
         showTableView ? (
           <Table>
             <thead>
-              <TrBody>
+              <TrHead>
                 <Th className="text-left">{t('date')}</Th>
                 <Th className="w-1/3 text-left">{t('swap')}</Th>
                 <Th className="text-right">{t('borrow')}</Th>
                 <Th className="text-right">{t('borrow-fee')}</Th>
                 <Th />
-              </TrBody>
+              </TrHead>
             </thead>
             <tbody>
               {swapHistory.map((h) => {
diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index b807d0c1..3c8aa6ec 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -176,7 +176,7 @@ const SwapTokenChart = () => {
                         )}`}
                   </p>
                   {/* <div
-                    className="px-2 hover:cursor-pointer hover:text-th-primary"
+                    className="px-2 hover:cursor-pointer hover:text-th-active"
                     onClick={handleFlipChart}
                   >
                     <SwitchHorizontalIcon className="h-4 w-4" />
@@ -275,8 +275,8 @@ const SwapTokenChart = () => {
                         offset="0%"
                         stopColor={
                           calculateChartChange() >= 0
-                            ? COLORS.GREEN[theme]
-                            : COLORS.RED[theme]
+                            ? COLORS.UP[theme]
+                            : COLORS.DOWN[theme]
                         }
                         stopOpacity={0.25}
                       />
@@ -284,8 +284,8 @@ const SwapTokenChart = () => {
                         offset="99%"
                         stopColor={
                           calculateChartChange() >= 0
-                            ? COLORS.GREEN[theme]
-                            : COLORS.RED[theme]
+                            ? COLORS.UP[theme]
+                            : COLORS.DOWN[theme]
                         }
                         stopOpacity={0}
                       />
@@ -297,8 +297,8 @@ const SwapTokenChart = () => {
                     dataKey="price"
                     stroke={
                       calculateChartChange() >= 0
-                        ? COLORS.GREEN[theme]
-                        : COLORS.RED[theme]
+                        ? COLORS.UP[theme]
+                        : COLORS.DOWN[theme]
                     }
                     strokeWidth={1.5}
                     fill="url(#gradientArea)"
diff --git a/components/token/PriceChart.tsx b/components/token/PriceChart.tsx
index e3105d4e..f20123d2 100644
--- a/components/token/PriceChart.tsx
+++ b/components/token/PriceChart.tsx
@@ -27,14 +27,14 @@ const PriceChart = ({
                 <stop
                   offset="0%"
                   stopColor={
-                    change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]
+                    change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
                   }
                   stopOpacity={0.15}
                 />
                 <stop
                   offset="99%"
                   stopColor={
-                    change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]
+                    change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
                   }
                   stopOpacity={0}
                 />
@@ -44,7 +44,7 @@ const PriceChart = ({
               isAnimationActive={false}
               type="monotone"
               dataKey="1"
-              stroke={change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]}
+              stroke={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
               strokeWidth={1.5}
               fill="url(#gradientArea)"
             />
diff --git a/components/tours/CustomTooltip.tsx b/components/tours/CustomTooltip.tsx
index a1a7bfb8..e9d43fe5 100644
--- a/components/tours/CustomTooltip.tsx
+++ b/components/tours/CustomTooltip.tsx
@@ -61,7 +61,7 @@ const CustomTooltip = ({
         <>
           <button
             onClick={onClose}
-            className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
+            className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-active`}
           >
             <XMarkIcon className={`h-5 w-5`} />
           </button>
@@ -82,7 +82,7 @@ const CustomTooltip = ({
               {allSteps.map((s, i) => (
                 <div
                   className={`h-1 w-1 rounded-full ${
-                    i === stepIndex ? 'bg-th-primary' : 'bg-th-bkg-4'
+                    i === stepIndex ? 'bg-th-active' : 'bg-th-bkg-4'
                   }`}
                   key={s.title}
                 />
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 79f79427..13b5716b 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -529,8 +529,8 @@ const AdvancedTradeForm = () => {
           onClick={handlePlaceOrder}
           className={`flex w-full items-center justify-center text-white ${
             tradeForm.side === 'buy'
-              ? 'bg-th-green-dark md:hover:bg-th-green'
-              : 'bg-th-red-dark md:hover:bg-th-red'
+              ? 'bg-th-up-dark md:hover:bg-th-up'
+              : 'bg-th-down-dark md:hover:bg-th-down'
           }`}
           disabled={false}
           size="large"
diff --git a/components/trade/FavoriteMarketsBar.tsx b/components/trade/FavoriteMarketsBar.tsx
index c412bd5f..87839228 100644
--- a/components/trade/FavoriteMarketsBar.tsx
+++ b/components/trade/FavoriteMarketsBar.tsx
@@ -20,7 +20,7 @@ const FavoriteMarketsBar = () => {
 
   return !isMobile ? (
     <Transition
-      className="flex items-center space-x-4 overflow-hidden border-b border-th-bkg-3 px-6"
+      className="flex items-center space-x-4 overflow-hidden border-b border-th-bkg-3 py-1 px-6"
       show={!!favoriteMarkets.length}
       enter="transition-all ease-in duration-200"
       enterFrom="opacity-0 h-0"
@@ -42,12 +42,12 @@ const FavoriteMarketsBar = () => {
         return (
           <Link href={`/trade?name=${mkt}`} key={mkt} shallow={true}>
             <div
-              className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-primary hover:opacity-100 ${
+              className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-active hover:opacity-100 ${
                 asPath.includes(mkt) ||
                 (asPath === '/trade' &&
                   selectedMarket &&
                   selectedMarket.name === mkt)
-                  ? 'text-th-primary'
+                  ? 'text-th-active'
                   : 'text-th-fgd-1 opacity-60'
               }`}
             >
@@ -58,8 +58,8 @@ const FavoriteMarketsBar = () => {
                   className={`text-xs ${
                     change24h
                       ? change24h >= 0
-                        ? 'text-th-green'
-                        : 'text-th-red'
+                        ? 'text-th-up'
+                        : 'text-th-down'
                       : 'text-th-fgd-4'
                   }`}
                 >
diff --git a/components/trade/GroupSize.tsx b/components/trade/GroupSize.tsx
index deef6a60..daead4ce 100644
--- a/components/trade/GroupSize.tsx
+++ b/components/trade/GroupSize.tsx
@@ -30,7 +30,7 @@ const GroupSize = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`default-transition flex h-6 items-center rounded bg-th-bkg-1 py-1 font-normal text-th-fgd-2 hover:text-th-primary focus:border-th-bkg-4 focus:outline-none`}
+              className={`default-transition flex h-6 items-center rounded bg-th-bkg-1 py-1 font-normal text-th-fgd-2 hover:text-th-active focus:border-th-bkg-4 focus:outline-none`}
             >
               <div
                 className={`flex items-center justify-between font-mono text-xs leading-none`}
@@ -53,8 +53,8 @@ const GroupSize = ({
                   <Listbox.Option key={size} value={size}>
                     {({ selected }) => (
                       <div
-                        className={`default-transition text-right font-mono text-xs text-th-fgd-2 hover:cursor-pointer hover:text-th-primary ${
-                          selected && `text-th-primary`
+                        className={`default-transition text-right font-mono text-xs text-th-fgd-2 hover:cursor-pointer hover:text-th-active ${
+                          selected && `text-th-active`
                         }`}
                       >
                         {size}
diff --git a/components/trade/MarketSelectDropdown.tsx b/components/trade/MarketSelectDropdown.tsx
index 6a6839ac..cd92362c 100644
--- a/components/trade/MarketSelectDropdown.tsx
+++ b/components/trade/MarketSelectDropdown.tsx
@@ -38,7 +38,7 @@ const MarketSelectDropdown = () => {
           className="relative flex flex-col overflow-visible"
           id="trade-step-one"
         >
-          <Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-primary">
+          <Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-active">
             <>
               {selectedMarket ? <MarketLogos market={selectedMarket} /> : null}
             </>
@@ -89,12 +89,12 @@ const MarketSelectDropdown = () => {
                             }}
                             shallow={true}
                           >
-                            <div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
+                            <div className="default-transition flex items-center hover:cursor-pointer hover:text-th-active">
                               <MarketLogos market={m} />
                               <span
                                 className={
                                   m.name === selectedMarket?.name
-                                    ? 'text-th-primary'
+                                    ? 'text-th-active'
                                     : ''
                                 }
                               >
@@ -129,7 +129,7 @@ const MarketSelectDropdown = () => {
                             <span
                               className={
                                 m.name === selectedMarket?.name
-                                  ? 'text-th-primary'
+                                  ? 'text-th-active'
                                   : ''
                               }
                             >
diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx
index f6aa54fa..d0016de2 100644
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@@ -637,7 +637,7 @@ const OrderbookRow = ({
             <div
               style={{ fontFeatureSettings: 'zero 1' }}
               className={`z-10 w-full text-right font-mono text-xs ${
-                hasOpenOrder ? 'text-th-primary' : ''
+                hasOpenOrder ? 'text-th-active' : ''
               }`}
               // onClick={handleSizeClick}
             >
@@ -651,13 +651,13 @@ const OrderbookRow = ({
 
         <Line
           className={`absolute left-0 opacity-40 brightness-125 ${
-            side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted`
+            side === 'buy' ? `bg-th-up-muted` : `bg-th-down-muted`
           }`}
           data-width={Math.max(sizePercent, 0.5) + '%'}
         />
         <Line
           className={`absolute left-0 opacity-70 ${
-            side === 'buy' ? `bg-th-green` : `bg-th-red`
+            side === 'buy' ? `bg-th-up` : `bg-th-down`
           }`}
           data-width={
             Math.max((cumulativeSizePercent / 100) * sizePercent, 0.1) + '%'
diff --git a/components/trade/RecentTrades.tsx b/components/trade/RecentTrades.tsx
index 590b4e9a..24605697 100644
--- a/components/trade/RecentTrades.tsx
+++ b/components/trade/RecentTrades.tsx
@@ -175,8 +175,8 @@ const RecentTrades = () => {
                     <td
                       className={`pb-1.5 text-right ${
                         ['buy', 'bid'].includes(side)
-                          ? `text-th-green`
-                          : `text-th-red`
+                          ? `text-th-up`
+                          : `text-th-down`
                       }`}
                     >
                       {formattedPrice.toFixed()}
diff --git a/components/trade/TradingViewChart.tsx b/components/trade/TradingViewChart.tsx
index 948017bd..91427ce9 100644
--- a/components/trade/TradingViewChart.tsx
+++ b/components/trade/TradingViewChart.tsx
@@ -47,8 +47,8 @@ const TradingViewChart = () => {
       fullscreen: false,
       autosize: true,
       studiesOverrides: {
-        'volume.volume.color.0': COLORS.RED[theme],
-        'volume.volume.color.1': COLORS.GREEN[theme],
+        'volume.volume.color.0': COLORS.DOWN[theme],
+        'volume.volume.color.1': COLORS.UP[theme],
         'volume.precision': 4,
       },
     }),
@@ -81,13 +81,13 @@ const TradingViewChart = () => {
       [`mainSeriesProperties.${prop}.barColorsOnPrevClose`]: true,
       [`mainSeriesProperties.${prop}.drawWick`]: true,
       [`mainSeriesProperties.${prop}.drawBorder`]: true,
-      [`mainSeriesProperties.${prop}.upColor`]: COLORS.GREEN[theme],
-      [`mainSeriesProperties.${prop}.downColor`]: COLORS.RED[theme],
-      [`mainSeriesProperties.${prop}.borderColor`]: COLORS.GREEN[theme],
-      [`mainSeriesProperties.${prop}.borderUpColor`]: COLORS.GREEN[theme],
-      [`mainSeriesProperties.${prop}.borderDownColor`]: COLORS.RED[theme],
-      [`mainSeriesProperties.${prop}.wickUpColor`]: COLORS.GREEN[theme],
-      [`mainSeriesProperties.${prop}.wickDownColor`]: COLORS.RED[theme],
+      [`mainSeriesProperties.${prop}.upColor`]: COLORS.UP[theme],
+      [`mainSeriesProperties.${prop}.downColor`]: COLORS.DOWN[theme],
+      [`mainSeriesProperties.${prop}.borderColor`]: COLORS.UP[theme],
+      [`mainSeriesProperties.${prop}.borderUpColor`]: COLORS.UP[theme],
+      [`mainSeriesProperties.${prop}.borderDownColor`]: COLORS.DOWN[theme],
+      [`mainSeriesProperties.${prop}.wickUpColor`]: COLORS.UP[theme],
+      [`mainSeriesProperties.${prop}.wickDownColor`]: COLORS.DOWN[theme],
     }
   })
 
diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index 010d7dec..34a727ea 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -19,7 +19,7 @@ export const ConnectWalletButton: React.FC = () => {
         disabled={!groupLoaded}
         className={` text-white focus:outline-none disabled:cursor-wait disabled:opacity-25`}
       >
-        <div className="relative flex h-16 w-44 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
+        <div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
           <div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
             <div
               className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
@@ -37,11 +37,11 @@ export const ConnectWalletButton: React.FC = () => {
               />
             </div>
             <div className="text-left">
-              <div className="mb-1.5 flex justify-center text-base font-bold leading-none">
+              <div className="mb-1.5 flex justify-center text-base font-bold leading-none text-th-fgd-1">
                 {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
               </div>
 
-              <div className="text-xxs font-normal leading-3 tracking-wider text-white">
+              <div className="text-xxs font-normal leading-3 tracking-wider text-th-fgd-3">
                 {preselectedWalletName}
               </div>
             </div>
diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx
index 9e012701..b0049c74 100644
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@@ -118,7 +118,7 @@ const ConnectedMenu = () => {
               <Menu.Items className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 md:rounded-r-none">
                 <Menu.Item>
                   <button
-                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
+                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
                     onClick={() => setShowEditProfileModal(true)}
                   >
                     <UserCircleIcon className="h-4 w-4" />
@@ -130,7 +130,7 @@ const ConnectedMenu = () => {
                 {isMobile ? (
                   <Menu.Item>
                     <button
-                      className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
+                      className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
                       onClick={() => setShowMangoAccountsModal(true)}
                     >
                       <CurrencyDollarIcon className="h-4 w-4" />
@@ -140,7 +140,7 @@ const ConnectedMenu = () => {
                 ) : null}
                 {/* <Menu.Item>
                   <button
-                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
+                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
                     onClick={() => setShowProfileImageModal(true)}
                   >
                     <ProfileIcon className="h-4 w-4" />
@@ -151,7 +151,7 @@ const ConnectedMenu = () => {
                 </Menu.Item> */}
                 <Menu.Item>
                   <button
-                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer focus:outline-none md:hover:text-th-primary"
+                    className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer focus:outline-none md:hover:text-th-active"
                     onClick={handleDisconnect}
                   >
                     <ArrowRightOnRectangleIcon className="h-4 w-4" />
diff --git a/components/wallet/WalletSelect.tsx b/components/wallet/WalletSelect.tsx
index 21abbbed..f6aa1b63 100644
--- a/components/wallet/WalletSelect.tsx
+++ b/components/wallet/WalletSelect.tsx
@@ -13,7 +13,7 @@ const WalletSelect = () => {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
+            className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-th-fgd-3 hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
             disabled={!group}
           >
             <ChevronDownIcon
@@ -37,7 +37,7 @@ const WalletSelect = () => {
               {displayedWallets?.map((wallet, index) => (
                 <Menu.Item key={index}>
                   <button
-                    className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"
+                    className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-active"
                     onClick={() => {
                       handleSelect(wallet.adapter.name)
                     }}
diff --git a/pages/404.tsx b/pages/404.tsx
index d4fd5042..18d0fa6f 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -19,7 +19,7 @@ export default function Custom404() {
       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-red" />
+      <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')}
       </h1>
diff --git a/pages/token/[token].tsx b/pages/token/[token].tsx
index e9ee3e85..753e3d8c 100644
--- a/pages/token/[token].tsx
+++ b/pages/token/[token].tsx
@@ -323,7 +323,7 @@ const Token: NextPage = () => {
               </div>
               <div className="flex justify-between border-t border-th-bkg-3 pt-4">
                 <p>{t('deposit-rate')}</p>
-                <p className="font-mono text-th-green">
+                <p className="font-mono text-th-up">
                   {formatDecimal(bank.getDepositRateUi(), 2, {
                     fixed: true,
                   })}
@@ -347,7 +347,7 @@ const Token: NextPage = () => {
               </div>
               <div className="flex justify-between border-t border-th-bkg-3 pt-4">
                 <p>{t('borrow-rate')}</p>
-                <p className="font-mono text-th-red">
+                <p className="font-mono text-th-down">
                   {formatDecimal(bank.getBorrowRateUi(), 2, {
                     fixed: true,
                   })}
diff --git a/styles/colors.ts b/styles/colors.ts
index d5c49398..77b3686f 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -1,7 +1,74 @@
 export const COLORS: any = {
-  BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
-  BKG2: { Mango: '#242132', Dark: '#201F27', Light: '#f0f0f0' },
-  GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
-  PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
-  RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
+  BKG1: {
+    Mango: 'hsl(256, 18%, 12%)',
+    Dark: 'hsl(240, 6%, 7%)',
+    Light: 'hsl(0, 0%, 99%)',
+    // Smoothy: 'hsl(45, 100%, 96%)',
+    Jungle: 'hsl(120, 18%, 12%)',
+    Medium: 'hsl(240, 6%, 12%)',
+    Ocean: 'hsl(222, 74%, 21%)',
+  },
+  BKG2: {
+    Mango: 'hsl(256, 18%, 17%)',
+    Dark: 'hsl(240, 6%, 12%)',
+    Light: 'hsl(0, 0%, 94%)',
+    // Smoothy: 'hsl(45, 100%, 91%)',
+    Jungle: 'hsl(120, 18%, 17%)',
+    Medium: 'hsl(240, 6%, 17%)',
+    Ocean: 'hsl(222, 74%, 26%)',
+  },
+  BKG3: {
+    Mango: 'hsl(256, 18%, 22%)',
+    Dark: 'hsl(240, 6%, 17%)',
+    Light: 'hsl(0, 0%, 89%)',
+    // Smoothy: 'hsl(45, 100%, 86%)',
+    Jungle: 'hsl(120, 18%, 22%)',
+    Medium: 'hsl(240, 6%, 22%)',
+    Ocean: 'hsl(222, 74%, 31%)',
+  },
+  BKG4: {
+    Mango: 'hsl(256, 18%, 27%)',
+    Dark: 'hsl(240, 6%, 22%)',
+    Light: 'hsl(0, 0%, 84%)',
+    // Smoothy: 'hsl(45, 100%, 81%)',
+    Jungle: 'hsl(120, 18%, 27%)',
+    Medium: 'hsl(240, 6%, 27%)',
+    Ocean: 'hsl(222, 74%, 36%)',
+  },
+  FGD4: {
+    Mango: 'hsl(253, 19%, 61%)',
+    Dark: 'hsl(0, 0%, 52%)',
+    Light: 'hsl(188, 71%, 38%)',
+    // Smoothy: 'hsl(45, 100%, 34%)',
+    Jungle: 'hsl(120, 20%, 63%)',
+    Medium: 'hsl(0, 0%, 50%)',
+    Ocean: 'hsl(220, 71%, 66%)',
+  },
+  UP: {
+    Mango: 'hsl(72, 97%, 41%)',
+    Dark: 'hsl(111, 47%, 53%)',
+    Light: 'hsl(111, 47%, 53%)',
+    // Smoothy: 'hsl(110, 73%, 40%)',
+    Jungle: 'hsl(120, 50%, 53%)',
+    Medium: 'hsl(111, 47%, 53%)',
+    Ocean: 'hsl(165, 82%, 45%)',
+  },
+  ACTIVE: {
+    Mango: 'hsl(45, 86%, 62%)',
+    Dark: 'hsl(45, 86%, 62%)',
+    Light: 'hsl(33, 100%, 57%)',
+    // Smoothy: 'hsl(321, 100%, 48%)',
+    Jungle: 'hsl(120, 100%, 73%)',
+    Medium: 'hsl(45, 86%, 62%)',
+    Ocean: 'hsl(45, 86%, 62%)',
+  },
+  DOWN: {
+    Mango: 'hsl(4, 93%, 60%)',
+    Dark: 'hsl(0, 67%, 48%)',
+    Light: 'hsl(0, 67%, 48%)',
+    // Smoothy: 'hsl(0, 100%, 56%)',
+    Jungle: 'hsl(0, 100%, 73%)',
+    Medium: 'hsl(0, 67%, 48%)',
+    Ocean: 'hsl(3, 59%, 56%)',
+  },
 }
diff --git a/styles/datepicker.css b/styles/datepicker.css
index bb1e92d0..34cd1bb0 100644
--- a/styles/datepicker.css
+++ b/styles/datepicker.css
@@ -9,19 +9,19 @@
 }
 
 .nice-dates .nice-dates-navigation_next:before {
-  @apply border-th-fgd-2 hover:border-th-primary;
+  @apply border-th-fgd-2 hover:border-th-active;
 }
 
 .nice-dates .nice-dates-navigation_next:hover:before {
-  @apply border-th-primary;
+  @apply border-th-active;
 }
 
 .nice-dates .nice-dates-navigation_previous:before {
-  @apply border-th-fgd-2 hover:border-th-primary;
+  @apply border-th-fgd-2 hover:border-th-active;
 }
 
 .nice-dates .nice-dates-navigation_previous:hover:before {
-  @apply border-th-primary;
+  @apply border-th-active;
 }
 
 .nice-dates .nice-dates-week-header_day {
diff --git a/styles/globals.css b/styles/globals.css
index 685014cc..934e870d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -80,15 +80,16 @@ th {
 /* Theme */
 
 :root {
-  --primary: theme('colors.light-theme.orange.DEFAULT');
-  --primary-dark: theme('colors.light-theme.orange.dark');
-  --red: theme('colors.light-theme.red.DEFAULT');
-  --red-dark: theme('colors.light-theme.red.dark');
-  --red-muted: theme('colors.light-theme.red.muted');
-  --green: theme('colors.light-theme.green.DEFAULT');
-  --green-dark: theme('colors.light-theme.green.dark');
-  --green-muted: theme('colors.light-theme.green.muted');
-  --orange: theme('colors.light-theme.orange.DEFAULT');
+  --active: theme('colors.light-theme.active.DEFAULT');
+  --active-dark: theme('colors.light-theme.active.dark');
+  --down: theme('colors.light-theme.down.DEFAULT');
+  --down-dark: theme('colors.light-theme.down.dark');
+  --down-muted: theme('colors.light-theme.down.muted');
+  --up: theme('colors.light-theme.up.DEFAULT');
+  --up-dark: theme('colors.light-theme.up.dark');
+  --up-muted: theme('colors.light-theme.up.muted');
+  --link: theme('colors.light-theme.link.DEFAULT');
+  --link-hover: theme('colors.light-theme.link.hover');
   --bkg-1: theme('colors.light-theme.bkg-1');
   --bkg-2: theme('colors.light-theme.bkg-2');
   --bkg-3: theme('colors.light-theme.bkg-3');
@@ -97,20 +98,24 @@ th {
   --fgd-2: theme('colors.light-theme.fgd-2');
   --fgd-3: theme('colors.light-theme.fgd-3');
   --fgd-4: theme('colors.light-theme.fgd-4');
-  --button: theme('colors.light-theme.button');
-  --button-hover: theme('colors.light-theme.button-hover');
+  --button: theme('colors.light-theme.button.DEFAULT');
+  --button-hover: theme('colors.light-theme.button.hover');
+  --error: theme('colors.light-theme.error');
+  --success: theme('colors.light-theme.success');
+  --warning: theme('colors.light-theme.warning');
 }
 
 [data-theme='Dark'] {
-  --primary: theme('colors.dark-theme.yellow.DEFAULT');
-  --primary-dark: theme('colors.dark-theme.yellow.dark');
-  --red: theme('colors.dark-theme.red.DEFAULT');
-  --red-dark: theme('colors.dark-theme.red.dark');
-  --red-muted: theme('colors.dark-theme.red.muted');
-  --green: theme('colors.dark-theme.green.DEFAULT');
-  --green-dark: theme('colors.dark-theme.green.dark');
-  --green-muted: theme('colors.dark-theme.green.muted');
-  --orange: theme('colors.dark-theme.orange.DEFAULT');
+  --active: theme('colors.dark-theme.active.DEFAULT');
+  --active-dark: theme('colors.dark-theme.active.dark');
+  --down: theme('colors.dark-theme.down.DEFAULT');
+  --down-dark: theme('colors.dark-theme.down.dark');
+  --down-muted: theme('colors.dark-theme.down.muted');
+  --up: theme('colors.dark-theme.up.DEFAULT');
+  --up-dark: theme('colors.dark-theme.up.dark');
+  --up-muted: theme('colors.dark-theme.up.muted');
+  --link: theme('colors.dark-theme.link.DEFAULT');
+  --link-hover: theme('colors.dark-theme.link.hover');
   --bkg-1: theme('colors.dark-theme.bkg-1');
   --bkg-2: theme('colors.dark-theme.bkg-2');
   --bkg-3: theme('colors.dark-theme.bkg-3');
@@ -119,20 +124,24 @@ th {
   --fgd-2: theme('colors.dark-theme.fgd-2');
   --fgd-3: theme('colors.dark-theme.fgd-3');
   --fgd-4: theme('colors.dark-theme.fgd-4');
-  --button: theme('colors.dark-theme.button');
-  --button-hover: theme('colors.dark-theme.button-hover');
+  --button: theme('colors.dark-theme.button.DEFAULT');
+  --button-hover: theme('colors.dark-theme.button.hover');
+  --error: theme('colors.dark-theme.error');
+  --success: theme('colors.dark-theme.success');
+  --warning: theme('colors.dark-theme.warning');
 }
 
 [data-theme='Mango'] {
-  --primary: theme('colors.mango-theme.yellow.DEFAULT');
-  --primary-dark: theme('colors.mango-theme.yellow.dark');
-  --red: theme('colors.mango-theme.red.DEFAULT');
-  --red-dark: theme('colors.mango-theme.red.dark');
-  --red-muted: theme('colors.mango-theme.red.muted');
-  --green: theme('colors.mango-theme.green.DEFAULT');
-  --green-dark: theme('colors.mango-theme.green.dark');
-  --green-muted: theme('colors.mango-theme.green.muted');
-  --orange: theme('colors.mango-theme.orange.DEFAULT');
+  --active: theme('colors.mango-theme.active.DEFAULT');
+  --active-dark: theme('colors.mango-theme.active.dark');
+  --down: theme('colors.mango-theme.down.DEFAULT');
+  --down-dark: theme('colors.mango-theme.down.dark');
+  --down-muted: theme('colors.mango-theme.down.muted');
+  --up: theme('colors.mango-theme.up.DEFAULT');
+  --up-dark: theme('colors.mango-theme.up.dark');
+  --up-muted: theme('colors.mango-theme.up.muted');
+  --link: theme('colors.mango-theme.link.DEFAULT');
+  --link-hover: theme('colors.mango-theme.link.hover');
   --bkg-1: theme('colors.mango-theme.bkg-1');
   --bkg-2: theme('colors.mango-theme.bkg-2');
   --bkg-3: theme('colors.mango-theme.bkg-3');
@@ -141,8 +150,115 @@ th {
   --fgd-2: theme('colors.mango-theme.fgd-2');
   --fgd-3: theme('colors.mango-theme.fgd-3');
   --fgd-4: theme('colors.mango-theme.fgd-4');
-  --button: theme('colors.mango-theme.button');
-  --button-hover: theme('colors.mango-theme.button-hover');
+  --button: theme('colors.mango-theme.button.DEFAULT');
+  --button-hover: theme('colors.mango-theme.button.hover');
+  --error: theme('colors.mango-theme.error');
+  --success: theme('colors.mango-theme.success');
+  --warning: theme('colors.mango-theme.warning');
+}
+
+[data-theme='Medium'] {
+  --active: theme('colors.medium-theme.active.DEFAULT');
+  --active-dark: theme('colors.medium-theme.active.dark');
+  --down: theme('colors.medium-theme.down.DEFAULT');
+  --down-dark: theme('colors.medium-theme.down.dark');
+  --down-muted: theme('colors.medium-theme.down.muted');
+  --up: theme('colors.medium-theme.up.DEFAULT');
+  --up-dark: theme('colors.medium-theme.up.dark');
+  --up-muted: theme('colors.medium-theme.up.muted');
+  --link: theme('colors.medium-theme.link.DEFAULT');
+  --link-hover: theme('colors.medium-theme.link.hover');
+  --bkg-1: theme('colors.medium-theme.bkg-1');
+  --bkg-2: theme('colors.medium-theme.bkg-2');
+  --bkg-3: theme('colors.medium-theme.bkg-3');
+  --bkg-4: theme('colors.medium-theme.bkg-4');
+  --fgd-1: theme('colors.medium-theme.fgd-1');
+  --fgd-2: theme('colors.medium-theme.fgd-2');
+  --fgd-3: theme('colors.medium-theme.fgd-3');
+  --fgd-4: theme('colors.medium-theme.fgd-4');
+  --button: theme('colors.medium-theme.button.DEFAULT');
+  --button-hover: theme('colors.medium-theme.button.hover');
+  --error: theme('colors.medium-theme.error');
+  --success: theme('colors.medium-theme.success');
+  --warning: theme('colors.medium-theme.warning');
+}
+
+[data-theme='Ocean'] {
+  --active: theme('colors.ocean-theme.active.DEFAULT');
+  --active-dark: theme('colors.ocean-theme.active.dark');
+  --down: theme('colors.ocean-theme.down.DEFAULT');
+  --down-dark: theme('colors.ocean-theme.down.dark');
+  --down-muted: theme('colors.ocean-theme.down.muted');
+  --up: theme('colors.ocean-theme.up.DEFAULT');
+  --up-dark: theme('colors.ocean-theme.up.dark');
+  --up-muted: theme('colors.ocean-theme.up.muted');
+  --link: theme('colors.ocean-theme.link.DEFAULT');
+  --link-hover: theme('colors.ocean-theme.link.hover');
+  --bkg-1: theme('colors.ocean-theme.bkg-1');
+  --bkg-2: theme('colors.ocean-theme.bkg-2');
+  --bkg-3: theme('colors.ocean-theme.bkg-3');
+  --bkg-4: theme('colors.ocean-theme.bkg-4');
+  --fgd-1: theme('colors.ocean-theme.fgd-1');
+  --fgd-2: theme('colors.ocean-theme.fgd-2');
+  --fgd-3: theme('colors.ocean-theme.fgd-3');
+  --fgd-4: theme('colors.ocean-theme.fgd-4');
+  --button: theme('colors.ocean-theme.button.DEFAULT');
+  --button-hover: theme('colors.ocean-theme.button.hover');
+  --error: theme('colors.ocean-theme.error');
+  --success: theme('colors.ocean-theme.success');
+  --warning: theme('colors.ocean-theme.warning');
+}
+
+/* [data-theme='Smoothy'] {
+  --active: theme('colors.smoothy-theme.active.DEFAULT');
+  --active-dark: theme('colors.smoothy-theme.active.dark');
+  --down: theme('colors.smoothy-theme.down.DEFAULT');
+  --down-dark: theme('colors.smoothy-theme.down.dark');
+  --down-muted: theme('colors.smoothy-theme.down.muted');
+  --up: theme('colors.smoothy-theme.up.DEFAULT');
+  --up-dark: theme('colors.smoothy-theme.up.dark');
+  --up-muted: theme('colors.smoothy-theme.up.muted');
+  --link: theme('colors.smoothy-theme.link.DEFAULT');
+  --link-hover: theme('colors.smoothy-theme.link.hover');
+  --bkg-1: theme('colors.smoothy-theme.bkg-1');
+  --bkg-2: theme('colors.smoothy-theme.bkg-2');
+  --bkg-3: theme('colors.smoothy-theme.bkg-3');
+  --bkg-4: theme('colors.smoothy-theme.bkg-4');
+  --fgd-1: theme('colors.smoothy-theme.fgd-1');
+  --fgd-2: theme('colors.smoothy-theme.fgd-2');
+  --fgd-3: theme('colors.smoothy-theme.fgd-3');
+  --fgd-4: theme('colors.smoothy-theme.fgd-4');
+  --button: theme('colors.smoothy-theme.button.DEFAULT');
+  --button-hover: theme('colors.smoothy-theme.button.hover');
+  --error: theme('colors.smoothy-theme.error');
+  --success: theme('colors.smoothy-theme.success');
+  --warning: theme('colors.smoothy-theme.warning');
+} */
+
+[data-theme='Jungle'] {
+  --active: theme('colors.jungle-theme.active.DEFAULT');
+  --active-dark: theme('colors.jungle-theme.active.dark');
+  --down: theme('colors.jungle-theme.down.DEFAULT');
+  --down-dark: theme('colors.jungle-theme.down.dark');
+  --down-muted: theme('colors.jungle-theme.down.muted');
+  --up: theme('colors.jungle-theme.up.DEFAULT');
+  --up-dark: theme('colors.jungle-theme.up.dark');
+  --up-muted: theme('colors.jungle-theme.up.muted');
+  --link: theme('colors.jungle-theme.link.DEFAULT');
+  --link-hover: theme('colors.jungle-theme.link.hover');
+  --bkg-1: theme('colors.jungle-theme.bkg-1');
+  --bkg-2: theme('colors.jungle-theme.bkg-2');
+  --bkg-3: theme('colors.jungle-theme.bkg-3');
+  --bkg-4: theme('colors.jungle-theme.bkg-4');
+  --fgd-1: theme('colors.jungle-theme.fgd-1');
+  --fgd-2: theme('colors.jungle-theme.fgd-2');
+  --fgd-3: theme('colors.jungle-theme.fgd-3');
+  --fgd-4: theme('colors.jungle-theme.fgd-4');
+  --button: theme('colors.jungle-theme.button.DEFAULT');
+  --button-hover: theme('colors.jungle-theme.button.hover');
+  --error: theme('colors.jungle-theme.error');
+  --success: theme('colors.jungle-theme.success');
+  --warning: theme('colors.jungle-theme.warning');
 }
 
 /* Base */
@@ -191,6 +307,12 @@ li {
   @apply text-sm text-th-fgd-3;
 }
 
+/* Forms */
+
+input::placeholder {
+  @apply text-th-fgd-4;
+}
+
 /* Slider */
 
 input[type='range']::-webkit-slider-thumb {
@@ -198,7 +320,7 @@ input[type='range']::-webkit-slider-thumb {
   height: 16px;
   width: 16px;
   border-radius: 100%;
-  background: var(--primary);
+  background: var(--active);
   cursor: pointer;
   margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
 }
@@ -208,7 +330,7 @@ input[type='range']::-moz-range-thumb {
   height: 16px;
   width: 16px;
   border-radius: 100%;
-  background: var(--primary);
+  background: var(--active);
   cursor: pointer;
 }
 
@@ -217,7 +339,7 @@ input[type='range']::-ms-thumb {
   height: 16px;
   width: 16px;
   border-radius: 100%;
-  background: var(--primary);
+  background: var(--active);
   cursor: pointer;
 }
 
@@ -311,7 +433,7 @@ input[type='range'] {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  @apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-primary;
+  @apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-active;
 }
 
 input[type='range']::-webkit-slider-runnable-track {
@@ -328,7 +450,7 @@ input[type='range']::-webkit-slider-runnable-track {
 
 @keyframes green-flash {
   from {
-    background-color: var(--green-muted);
+    background-color: var(--up-muted);
   }
   to {
     background-color: transparent;
@@ -337,7 +459,7 @@ input[type='range']::-webkit-slider-runnable-track {
 
 @-webkit-keyframes green-flash {
   from {
-    background-color: var(--green-muted);
+    background-color: var(--up-muted);
   }
   to {
     background-color: transparent;
@@ -345,7 +467,7 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 @-moz-keyframes green-flash {
   from {
-    background-color: var(--green-muted);
+    background-color: var(--up-muted);
   }
   to {
     background-color: transparent;
@@ -354,7 +476,7 @@ input[type='range']::-webkit-slider-runnable-track {
 
 @keyframes red-flash {
   from {
-    background-color: var(--red-muted);
+    background-color: var(--down-muted);
   }
   to {
     background-color: transparent;
@@ -363,7 +485,7 @@ input[type='range']::-webkit-slider-runnable-track {
 
 @-webkit-keyframes red-flash {
   from {
-    background-color: var(--red-muted);
+    background-color: var(--down-muted);
   }
   to {
     background-color: transparent;
@@ -371,7 +493,7 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 @-moz-keyframes red-flash {
   from {
-    background-color: var(--red-muted);
+    background-color: var(--down-muted);
   }
   to {
     background-color: transparent;
diff --git a/tailwind.config.js b/tailwind.config.js
index f408259d..a6835955 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,65 +17,234 @@ module.exports = {
       cursor: {
         help: 'help',
       },
+      // each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
       colors: {
         'gradient-start': '#AFD803',
         'gradient-mid': '#F2C94C',
         'gradient-end': '#E54033',
-        'light-theme': {
-          orange: {
-            DEFAULT: '#FF9C24',
-            dark: '#F58700',
+        'mango-theme': {
+          active: {
+            DEFAULT: 'hsl(45, 86%, 62%)',
+            dark: 'hsl(45, 86%, 52%)',
           },
-          red: { DEFAULT: '#CC2929', dark: '#CC2929', muted: '#eba9a9' },
-          green: { DEFAULT: '#5EBF4D', dark: '#5EBF4D', muted: '#bfe5b8' },
-          'bkg-1': '#FDFDFD',
-          'bkg-2': '#f7f7f7',
-          'bkg-3': '#F0F0F0',
-          'bkg-4': '#E6E6E6',
-          'fgd-1': '#061f23',
-          'fgd-2': '#0C3F45',
-          'fgd-3': '#446065',
-          'fgd-4': '#B0B0B0',
-          button: '#7261BD',
-          'button-hover': '#5B48AD',
+          button: {
+            DEFAULT: 'hsl(251, 41%, 48%)',
+            hover: 'hsl(251, 41%, 38%)',
+          },
+          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
+          down: {
+            DEFAULT: 'hsl(4, 93%, 60%)',
+            dark: 'hsl(4, 93%, 50%)',
+            muted: 'hsl(4, 53%, 50%)',
+          },
+          up: {
+            DEFAULT: 'hsl(72, 97%, 41%)',
+            dark: 'hsl(72, 97%, 31%)',
+            muted: 'hsl(72, 57%, 31%)',
+          },
+          error: 'hsl(4, 93%, 60%)',
+          success: 'hsl(72, 97%, 41%)',
+          warning: 'hsl(33, 100%, 57%)',
+          'bkg-1': 'hsl(256, 18%, 12%)',
+          'bkg-2': 'hsl(256, 18%, 17%)',
+          'bkg-3': 'hsl(256, 18%, 22%)',
+          'bkg-4': 'hsl(256, 18%, 27%)',
+          'fgd-1': 'hsl(253, 19%, 91%)',
+          'fgd-2': 'hsl(253, 19%, 81%)',
+          'fgd-3': 'hsl(253, 19%, 71%)',
+          'fgd-4': 'hsl(253, 19%, 61%)',
+        },
+        'light-theme': {
+          active: {
+            DEFAULT: 'hsl(33, 100%, 57%)',
+            dark: 'hsl(33, 100%, 47%)',
+          },
+          button: {
+            DEFAULT: 'hsl(251, 41%, 56%)',
+            hover: 'hsl(251, 41%, 46%)',
+          },
+          link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
+          down: {
+            DEFAULT: 'hsl(0, 67%, 48%)',
+            dark: 'hsl(0, 67%, 38%)',
+            muted: 'hsl(0, 27%, 38%)',
+          },
+          up: {
+            DEFAULT: 'hsl(111, 47%, 53%)',
+            dark: 'hsl(111, 47%, 43%)',
+            muted: 'hsl(111, 7%, 43%)',
+          },
+          error: 'hsl(0, 67%, 48%)',
+          success: 'hsl(111, 47%, 53%)',
+          warning: 'hsl(33, 100%, 57%)',
+          'bkg-1': 'hsl(0, 0%, 99%)',
+          'bkg-2': 'hsl(0, 0%, 94%)',
+          'bkg-3': 'hsl(0, 0%, 89%)',
+          'bkg-4': 'hsl(0, 0%, 84%)',
+          'fgd-1': 'hsl(188, 71%, 8%)',
+          'fgd-2': 'hsl(188, 71%, 18%)',
+          'fgd-3': 'hsl(188, 71%, 28%)',
+          'fgd-4': 'hsl(188, 71%, 38%)',
         },
         'dark-theme': {
-          yellow: {
-            DEFAULT: '#F2C94C',
-            dark: '#E4AF11',
+          active: {
+            DEFAULT: 'hsl(45, 86%, 62%)',
+            dark: 'hsl(45, 86%, 52%)',
           },
-          red: { DEFAULT: '#CC2929', dark: '#AA2222', muted: '#571e20' },
-          green: { DEFAULT: '#5EBF4D', dark: '#4BA53B', muted: '#365D31' },
-          orange: { DEFAULT: '#FF9C24' },
-          'bkg-1': '#101012',
-          'bkg-2': '#1B1B1F',
-          'bkg-3': '#27272B',
-          'bkg-4': '#38383D',
-          'fgd-1': '#D1D1D1',
-          'fgd-2': '#C8C8C8',
-          'fgd-3': '#B3B3B3',
-          'fgd-4': '#878787',
-          button: '#5B48AD',
-          'button-hover': '#443681',
+          button: {
+            DEFAULT: 'hsl(251, 41%, 48%)',
+            hover: 'hsl(251, 41%, 38%)',
+          },
+          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
+          down: {
+            DEFAULT: 'hsl(0, 67%, 48%)',
+            dark: 'hsl(0, 67%, 38%)',
+            muted: 'hsl(0, 27%, 38%)',
+          },
+          up: {
+            DEFAULT: 'hsl(111, 47%, 53%)',
+            dark: 'hsl(111, 47%, 43%)',
+            muted: 'hsl(111, 7%, 43%)',
+          },
+          error: 'hsl(0, 67%, 48%)',
+          success: 'hsl(111, 47%, 53%)',
+          warning: 'hsl(45, 86%, 62%)',
+          'bkg-1': 'hsl(240, 6%, 7%)',
+          'bkg-2': 'hsl(240, 6%, 12%)',
+          'bkg-3': 'hsl(240, 6%, 17%)',
+          'bkg-4': 'hsl(240, 6%, 22%)',
+          'fgd-1': 'hsl(0, 0%, 82%)',
+          'fgd-2': 'hsl(0, 0%, 72%)',
+          'fgd-3': 'hsl(0, 0%, 62%)',
+          'fgd-4': 'hsl(0, 0%, 52%)',
         },
-        'mango-theme': {
-          yellow: {
-            DEFAULT: '#F2C94C',
-            dark: '#E4AF11',
+        'medium-theme': {
+          active: {
+            DEFAULT: 'hsl(45, 86%, 62%)',
+            dark: 'hsl(45, 86%, 52%)',
           },
-          red: { DEFAULT: '#F84638', dark: '#C7251A', muted: '#6d2832' },
-          green: { DEFAULT: '#A6CD03', dark: '#84A21C', muted: '#49601b' },
-          orange: { DEFAULT: '#FF9C24' },
-          'bkg-1': '#1C1924', // '#141026',
-          'bkg-2': '#252232', // '#1D1832',
-          'bkg-3': '#302B40', // '#2A2440',
-          'bkg-4': '#383544', // '#37324D',
-          'fgd-1': '#E5E3EC',
-          'fgd-2': '#D2CEDE',
-          'fgd-3': '#C1BED3',
-          'fgd-4': '#7E7A90',
-          button: '#5B48AD',
-          'button-hover': '#443681',
+          button: {
+            DEFAULT: 'hsl(251, 35%, 38%)',
+            hover: 'hsl(251, 35%, 28%)',
+          },
+          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
+          down: {
+            DEFAULT: 'hsl(0, 67%, 48%)',
+            dark: 'hsl(0, 67%, 38%)',
+            muted: 'hsl(0, 27%, 38%)',
+          },
+          up: {
+            DEFAULT: 'hsl(111, 47%, 53%)',
+            dark: 'hsl(111, 47%, 43%)',
+            muted: 'hsl(111, 7%, 43%)',
+          },
+          error: 'hsl(0, 67%, 48%)',
+          success: 'hsl(111, 47%, 53%)',
+          warning: 'hsl(45, 86%, 62%)',
+          'bkg-1': 'hsl(240, 6%, 12%)',
+          'bkg-2': 'hsl(240, 6%, 17%)',
+          'bkg-3': 'hsl(240, 6%, 22%)',
+          'bkg-4': 'hsl(240, 6%, 27%)',
+          'fgd-1': 'hsl(0, 0%, 80%)',
+          'fgd-2': 'hsl(0, 0%, 70%)',
+          'fgd-3': 'hsl(0, 0%, 60%)',
+          'fgd-4': 'hsl(0, 0%, 50%)',
+        },
+        'ocean-theme': {
+          active: {
+            DEFAULT: 'hsl(45, 86%, 62%)',
+            dark: 'hsl(45, 86%, 52%)',
+          },
+          button: {
+            DEFAULT: 'hsl(222, 74%, 36%)',
+            hover: 'hsl(222, 74%, 26%)',
+          },
+          link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
+          down: {
+            DEFAULT: 'hsl(3, 59%, 56%)',
+            dark: 'hsl(3, 59%, 46%)',
+            muted: 'hsl(3, 19%, 46%)',
+          },
+          up: {
+            DEFAULT: 'hsl(165, 82%, 45%)',
+            dark: 'hsl(165, 82%, 35%)',
+            muted: 'hsl(165, 42%, 35%)',
+          },
+          error: 'hsl(3, 59%, 56%)',
+          success: 'hsl(165, 82%, 45%)',
+          warning: 'hsl(45, 86%, 62%)',
+          'bkg-1': 'hsl(222, 74%, 21%)',
+          'bkg-2': 'hsl(222, 74%, 26%)',
+          'bkg-3': 'hsl(222, 74%, 31%)',
+          'bkg-4': 'hsl(222, 74%, 36%)',
+          'fgd-1': 'hsl(220, 71%, 96%)',
+          'fgd-2': 'hsl(220, 71%, 86%)',
+          'fgd-3': 'hsl(220, 71%, 76%)',
+          'fgd-4': 'hsl(220, 71%, 66%)',
+        },
+        'smoothy-theme': {
+          active: {
+            DEFAULT: 'hsl(321, 100%, 48%)',
+            dark: 'hsl(321, 100%, 38%)',
+          },
+          button: {
+            DEFAULT: 'hsl(284, 100%, 56%)',
+            hover: 'hsl(284, 100%, 46%)',
+          },
+          link: { DEFAULT: 'hsl(21, 100%, 56%)', hover: 'hsl(21, 100%, 46%)' },
+          down: {
+            DEFAULT: 'hsl(0, 100%, 56%)',
+            dark: 'hsl(0, 100%, 46%)',
+            muted: 'hsl(0, 60%, 46%)',
+          },
+          up: {
+            DEFAULT: 'hsl(110, 73%, 40%)',
+            dark: 'hsl(110, 73%, 30%)',
+            muted: 'hsl(110, 33%, 30%)',
+          },
+          error: 'hsl(0, 100%, 56%)',
+          success: 'hsl(110, 73%, 40%)',
+          warning: 'hsl(21, 100%, 56%)',
+          'bkg-1': 'hsl(45, 100%, 96%)',
+          'bkg-2': 'hsl(45, 100%, 91%)',
+          'bkg-3': 'hsl(45, 100%, 86%)',
+          'bkg-4': 'hsl(45, 100%, 81%)',
+          'fgd-1': 'hsl(45, 100%, 4%)',
+          'fgd-2': 'hsl(45, 100%, 14%)',
+          'fgd-3': 'hsl(45, 100%, 24%)',
+          'fgd-4': 'hsl(45, 100%, 34%)',
+        },
+        'jungle-theme': {
+          active: {
+            DEFAULT: 'hsl(120, 100%, 73%)',
+            dark: 'hsl(120, 100%, 63%)',
+          },
+          button: {
+            DEFAULT: 'hsl(21, 15%, 38%)',
+            hover: 'hsl(21, 15%, 28%)',
+          },
+          link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 47%)' },
+          down: {
+            DEFAULT: 'hsl(0, 100%, 73%)',
+            dark: 'hsl(0, 100%, 63%)',
+            muted: 'hsl(0, 60%, 63%)',
+          },
+          up: {
+            DEFAULT: 'hsl(120, 50%, 53%)',
+            dark: 'hsl(120, 50%, 43%)',
+            muted: 'hsl(120, 10%, 43%)',
+          },
+          error: 'hsl(0, 100%, 73%)',
+          success: 'hsl(120, 50%, 53%)',
+          warning: 'hsl(31, 80%, 57%)',
+          'bkg-1': 'hsl(120, 18%, 12%)',
+          'bkg-2': 'hsl(120, 18%, 17%)',
+          'bkg-3': 'hsl(120, 18%, 22%)',
+          'bkg-4': 'hsl(120, 18%, 27%)',
+          'fgd-1': 'hsl(120, 20%, 93%)',
+          'fgd-2': 'hsl(120, 20%, 83%)',
+          'fgd-3': 'hsl(120, 20%, 73%)',
+          'fgd-4': 'hsl(120, 20%, 63%)',
         },
         'th-bkg-1': 'var(--bkg-1)',
         'th-bkg-2': 'var(--bkg-2)',
@@ -85,17 +254,22 @@ module.exports = {
         'th-fgd-2': 'var(--fgd-2)',
         'th-fgd-3': 'var(--fgd-3)',
         'th-fgd-4': 'var(--fgd-4)',
-        'th-primary': 'var(--primary)',
-        'th-primary-dark': 'var(--primary-dark)',
-        'th-red': 'var(--red)',
-        'th-red-dark': 'var(--red-dark)',
-        'th-red-muted': 'var(--red-muted)',
-        'th-green': 'var(--green)',
-        'th-green-dark': 'var(--green-dark)',
-        'th-green-muted': 'var(--green-muted)',
-        'th-orange': 'var(--orange)',
+        'th-active': 'var(--active)',
+        'th-active-dark': 'var(--active-dark)',
+        'th-error': 'var(--error)',
+        'th-success': 'var(--success)',
+        'th-warning': 'var(--warning)',
+        'th-down': 'var(--down)',
+        'th-down-dark': 'var(--down-dark)',
+        'th-down-muted': 'var(--down-muted)',
+        'th-up': 'var(--up)',
+        'th-up-dark': 'var(--up-dark)',
+        'th-up-muted': 'var(--up-muted)',
+        'th-link': 'var(--link)',
+        'th-link-hover': 'var(--link-hover)',
         'th-button': 'var(--button)',
         'th-button-hover': 'var(--button-hover)',
+        'th-warning': 'var(--warning)',
       },
       fontSize: {
         xxs: '.65rem',