diff --git a/components/Layout.tsx b/components/Layout.tsx
index 2ce4377a..2734f638 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -24,14 +24,13 @@ import useInterval from './shared/useInterval'
 import { Transition } from '@headlessui/react'
 import { useTranslation } from 'next-i18next'
 import TermsOfUseModal from './modals/TermsOfUseModal'
-import { useTheme } from 'next-themes'
 
 const sideBarAnimationDuration = 300
 const termsLastUpdated = 1679441610978
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const { connected } = useWallet()
-  const { theme } = useTheme()
+  const themeData = mangoStore((s) => s.themeData)
   const loadingMangoAccount = mangoStore((s) => s.mangoAccount.initialLoad)
   const [isCollapsed, setIsCollapsed] = useLocalStorageState(
     SIDEBAR_COLLAPSE_KEY,
@@ -87,7 +86,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
       ) : null}
       <div
         className={`min-h-screen flex-grow ${
-          theme !== 'Bonk'
+          !themeData.useGradientBg
             ? 'bg-th-bkg-1'
             : 'bg-gradient-to-b from-th-bkg-1 to-th-bkg-2'
         } text-th-fgd-2 transition-all`}
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 7c15458f..92b5a4b9 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -34,10 +34,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation(['common', 'search'])
   const { connected } = useWallet()
   const group = mangoStore.getState().group
+  const themeData = mangoStore((s) => s.themeData)
   const { mangoAccount } = useMangoAccount()
   const router = useRouter()
   const { pathname } = router
-  const { theme } = useTheme()
 
   const playAnimation = () => {
     const set = mangoStore.getState().set
@@ -50,17 +50,14 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     <div
       className={`transition-all duration-300 ${
         collapsed ? 'w-[64px]' : 'w-[200px]'
-      } border-r border-th-bkg-3 ${
-        theme === 'Bonk'
-          ? `bg-th-bkg-1 bg-[url('/images/themes/bonk/bonk-tile.png')] bg-repeat`
-          : 'bg-th-bkg-1'
-      }`}
+      } border-r border-th-bkg-3 bg-th-bkg-1 bg-repeat`}
+      style={{ backgroundImage: `url(${themeData.sideTilePath})` }}
     >
-      {theme === 'Bonk' && !collapsed ? (
+      {themeData.sideImagePath && !collapsed ? (
         <img
           className={`absolute bottom-16 h-auto w-full flex-shrink-0`}
           onClick={() => playAnimation()}
-          src="/images/themes/bonk/sidenav-image.png"
+          src={themeData.sideImagePath}
           alt="next"
         />
       ) : null}
@@ -70,24 +67,16 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
             <div
               className={`items-center transition-all duration-300 ease-in-out ${
                 collapsed ? '' : 'justify-start'
-              } pb-1 ${theme === 'Bonk' ? 'pl-3' : 'pl-4'}`}
+              } pb-1 pl-3`}
             >
               <div
                 className={`flex h-16 flex-shrink-0 cursor-pointer items-center bg-th-bkg-1`}
               >
-                {theme !== 'Bonk' ? (
-                  <img
-                    className={`h-8 w-8 flex-shrink-0`}
-                    src="/logos/logo-mark.svg"
-                    alt="next"
-                  />
-                ) : (
-                  <img
-                    className={`h-10 w-10 flex-shrink-0`}
-                    src="/images/themes/bonk/bonk-logo.png"
-                    alt="next"
-                  />
-                )}
+                <img
+                  className={`h-9 w-9 flex-shrink-0`}
+                  src={themeData.logoPath}
+                  alt="logo"
+                />
                 <Transition
                   show={!collapsed}
                   as={Fragment}
@@ -98,12 +87,8 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                   leaveFrom="opacity-100"
                   leaveTo="opacity-0"
                 >
-                  <span
-                    className={`${
-                      theme !== 'Bonk' ? 'ml-3' : 'ml-2'
-                    } font-display text-lg text-th-fgd-1`}
-                  >
-                    {theme !== 'Bonk' ? 'Mango' : 'Bongo'}
+                  <span className={`ml-3 font-display text-lg text-th-fgd-1`}>
+                    {themeData.platformName}
                   </span>
                 </Transition>
               </div>
@@ -309,11 +294,7 @@ const MenuItem = ({
                   hideIconBg
                     ? ''
                     : `flex h-8 w-8 items-center justify-center rounded-full ${
-                        theme === 'Light'
-                          ? 'bg-th-bkg-2'
-                          : theme === 'Bonk'
-                          ? 'bg-th-button'
-                          : 'bg-th-bkg-3'
+                        theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
                       }`
                 }
               >
@@ -375,11 +356,7 @@ export const ExpandableMenuItem = ({
             hideIconBg
               ? ''
               : `flex h-8 w-8 items-center justify-center rounded-full ${
-                  theme === 'Light'
-                    ? 'bg-th-bkg-2'
-                    : theme === 'Bonk'
-                    ? 'bg-th-button'
-                    : 'bg-th-bkg-3'
+                  theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
                 }`
           } ${
             alignBottom
@@ -427,9 +404,7 @@ export const ExpandableMenuItem = ({
                 className={
                   hideIconBg
                     ? ''
-                    : `flex h-8 w-8 items-center justify-center rounded-full ${
-                        theme === 'Bonk' ? 'bg-th-button' : 'bg-th-bkg-3'
-                      }`
+                    : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
                 }
               >
                 {icon}
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 60a293fa..c7281c23 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -30,12 +30,13 @@ import useUnownedAccount from 'hooks/useUnownedAccount'
 import NotificationsButton from './notifications/NotificationsButton'
 import Tooltip from './shared/Tooltip'
 import { copyToClipboard } from 'utils'
-import { useTheme } from 'next-themes'
+import mangoStore from '@store/mangoStore'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
   const { mangoAccount } = useMangoAccount()
   const { connected } = useWallet()
+  const themeData = mangoStore((s) => s.themeData)
   const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
   const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit')
   const [showUserSetup, setShowUserSetup] = useState(false)
@@ -49,7 +50,6 @@ const TopBar = () => {
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.sm : false
   const { isUnownedAccount } = useUnownedAccount()
-  const { theme } = useTheme()
 
   const handleCloseSetup = useCallback(() => {
     setShowUserSetup(false)
@@ -80,11 +80,8 @@ const TopBar = () => {
 
   return (
     <div
-      className={`flex h-16 items-center justify-between border-b border-th-bkg-3 ${
-        theme === 'Bonk'
-          ? `bg-th-bkg-1 bg-[url('/images/themes/bonk/bonk-tile.png')]`
-          : 'bg-th-bkg-1'
-      }`}
+      className={`flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1`}
+      style={{ backgroundImage: `url(${themeData.topTilePath})` }}
     >
       <div className="flex w-full items-center justify-between md:space-x-4">
         <span className="mb-0 flex items-center">
@@ -101,19 +98,11 @@ const TopBar = () => {
               <SolanaTps />
             </div>
           ) : null}
-          {theme !== 'Bonk' ? (
-            <img
-              className="mr-4 h-8 w-8 flex-shrink-0 md:hidden"
-              src="/logos/logo-mark.svg"
-              alt="next"
-            />
-          ) : (
-            <img
-              className="mr-4 h-10 w-10 flex-shrink-0 md:hidden"
-              src="/images/themes/bonk/bonk-logo.png"
-              alt="next"
-            />
-          )}
+          <img
+            className="mr-4 h-9 w-9 flex-shrink-0 md:hidden"
+            src={themeData.logoPath}
+            alt="logo"
+          />
           {!connected ? (
             mangoAccount ? (
               <span className="hidden items-center md:flex md:pl-6">
diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx
index 3aa64130..fade53c8 100644
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@@ -22,8 +22,9 @@ import {
   TRADE_CHART_UI_KEY,
   TRADE_LAYOUT_KEY,
 } from 'utils/constants'
-import mangoStore from '@store/mangoStore'
+import mangoStore, { DEFAULT_THEME_DATA } from '@store/mangoStore'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { ThemeData } from 'types'
 
 const NOTIFICATION_POSITIONS = [
   'bottom-left',
@@ -61,6 +62,19 @@ export const THEMES = [
   'olive',
 ]
 
+const BONK_META_DATA: ThemeData = {
+  buttonStyle: 'raised',
+  logoPath: '/images/themes/bonk/bonk-logo.png',
+  platformName: 'Bongo',
+  rainAnimationImagePath: '/images/themes/bonk/bonk-animation-logo.png',
+  sideImagePath: '/images/themes/bonk/sidenav-image.png',
+  sideTilePath: '/images/themes/bonk/bonk-tile.png',
+  topTilePath: '/images/themes/bonk/bonk-tile.png',
+  tvChartTheme: 'Light',
+  tvImagePath: '',
+  useGradientBg: true,
+}
+
 const DisplaySettings = () => {
   const { t } = useTranslation(['common', 'settings'])
   const { theme, setTheme } = useTheme()
@@ -96,6 +110,20 @@ const DisplaySettings = () => {
     }
   }, [connection, publicKey])
 
+  // set nft skin data to store and localStorage (move this to theme selection). will need to use localStorage for page reloads
+  useEffect(() => {
+    const set = mangoStore.getState().set
+    if (theme === 'Bonk') {
+      set((s) => {
+        s.themeData = BONK_META_DATA
+      })
+    } else {
+      set((s) => {
+        s.themeData = DEFAULT_THEME_DATA
+      })
+    }
+  }, [theme])
+
   // use collectionAddress to enable nft skins?
   console.log(nfts)
 
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index f4bff783..dfaaa738 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -1,3 +1,4 @@
+import mangoStore from '@store/mangoStore'
 import { useTheme } from 'next-themes'
 import { forwardRef, FunctionComponent, ReactNode, Ref } from 'react'
 
@@ -27,13 +28,14 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
   ...props
 }) => {
   const { theme } = useTheme()
+  const themeData = mangoStore((s) => s.themeData)
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       className={`rounded-md ${
-        theme === 'Bonk'
-          ? 'bonk-button'
+        themeData.buttonStyle === 'raised'
+          ? 'raised-button'
           : secondary
           ? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
           : 'bg-th-button focus-visible:border focus-visible:border-th-fgd-4 md:hover:bg-th-button-hover'
diff --git a/components/shared/SuccessParticles.tsx b/components/shared/SuccessParticles.tsx
index 76905851..c5b4cd9e 100644
--- a/components/shared/SuccessParticles.tsx
+++ b/components/shared/SuccessParticles.tsx
@@ -14,6 +14,7 @@ const SuccessParticles = () => {
   const showForTheme = mangoStore((s) => s.successAnimation.theme)
   const showForTrade = mangoStore((s) => s.successAnimation.trade)
   const tradeType = mangoStore((s) => s.tradeForm.tradeType)
+  const themeData = mangoStore((s) => s.themeData)
   const set = mangoStore((s) => s.set)
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
@@ -45,9 +46,7 @@ const SuccessParticles = () => {
       }
     }
     if (showForTheme) {
-      return theme === 'Bonk'
-        ? '/images/themes/bonk/bonk-animation-logo.png'
-        : null
+      return themeData.rainAnimationImagePath
     }
   }, [mangoTokens, showForSwap, showForTheme, showForTrade, theme])
 
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index dcb24577..163dc113 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@@ -18,7 +18,6 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import OraclePrice from './OraclePrice'
 import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
 import { useQuery } from '@tanstack/react-query'
-import { useTheme } from 'next-themes'
 
 type TickerData = {
   base_currency: string
@@ -51,7 +50,6 @@ const AdvancedMarketHeader = ({
   setShowChart?: (x: boolean) => void
 }) => {
   const { t } = useTranslation(['common', 'trade'])
-  const { theme } = useTheme()
   const perpStats = mangoStore((s) => s.perpStats.data)
   const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
   const {
@@ -137,9 +135,7 @@ const AdvancedMarketHeader = ({
   return (
     <>
       <div
-        className={`flex flex-col md:h-12 md:flex-row md:items-center ${
-          theme === 'Bonk' ? 'bg-th-bkg-2' : 'bg-th-bkg-1'
-        }`}
+        className={`flex flex-col bg-th-bkg-1 md:h-12 md:flex-row md:items-center`}
       >
         <div className="w-full pl-4 md:w-auto md:py-0 md:pl-6 lg:pb-0">
           <MarketSelectDropdown />
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 7829b5b5..d4970a3e 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -56,7 +56,6 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
 import { isMangoError } from 'types'
 import InlineNotification from '@components/shared/InlineNotification'
-import { useTheme } from 'next-themes'
 
 const set = mangoStore.getState().set
 
@@ -81,6 +80,7 @@ const AdvancedTradeForm = () => {
   const { t } = useTranslation(['common', 'trade'])
   const { mangoAccount } = useMangoAccount()
   const tradeForm = mangoStore((s) => s.tradeForm)
+  const themeData = mangoStore((s) => s.themeData)
   const [placingOrder, setPlacingOrder] = useState(false)
   const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
   const [savedCheckboxSettings, setSavedCheckboxSettings] =
@@ -101,7 +101,6 @@ const AdvancedTradeForm = () => {
     quoteSymbol,
     serumOrPerpMarket,
   } = useSelectedMarket()
-  const { theme } = useTheme()
 
   const setTradeType = useCallback((tradeType: 'Limit' | 'Market') => {
     set((s) => {
@@ -712,12 +711,12 @@ const AdvancedTradeForm = () => {
                   ? ''
                   : tradeForm.side === 'buy'
                   ? `bg-th-up-dark md:hover:bg-th-up-dark ${
-                      theme === 'Bonk'
-                        ? 'bonk-buy-button'
+                      themeData.buttonStyle === 'raised'
+                        ? 'raised-buy-button'
                         : 'text-white md:hover:brightness-90'
                     }`
                   : `bg-th-down-dark text-white ${
-                      theme === 'Bonk'
+                      themeData.buttonStyle === 'raised'
                         ? ''
                         : 'md:hover:bg-th-down-dark md:hover:brightness-90'
                     }`
diff --git a/components/trade/TradingViewChart.tsx b/components/trade/TradingViewChart.tsx
index d9193859..20bb8f7b 100644
--- a/components/trade/TradingViewChart.tsx
+++ b/components/trade/TradingViewChart.tsx
@@ -83,6 +83,7 @@ const TradingViewChart = () => {
     showOrderLinesLocalStorage
   )
   const tradeExecutions = mangoStore((s) => s.tradingView.tradeExecutions)
+  const themeData = mangoStore((s) => s.themeData)
   const { data: combinedTradeHistory, isLoading: loadingTradeHistory } =
     useTradeHistory()
   const [showTradeExecutions, toggleShowTradeExecutions] = useState(false)
@@ -576,12 +577,9 @@ const TradingViewChart = () => {
         autosize: defaultProps.autosize,
         studies_overrides: defaultProps.studiesOverrides,
         theme:
-          theme === 'Light' ||
-          theme === 'Banana' ||
-          theme === 'Lychee' ||
-          theme === 'Bonk'
+          theme === 'Light' || theme === 'Banana' || theme === 'Lychee'
             ? 'Light'
-            : 'Dark',
+            : themeData.tvChartTheme,
         custom_css_url: '/styles/tradingview.css',
         loading_screen: {
           backgroundColor: COLORS.BKG1[theme],
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index 0d29eb7c..b8708852 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -58,17 +58,30 @@ import {
   TourSettings,
   ProfileDetails,
   MangoTokenStatsItem,
+  ThemeData,
 } from 'types'
 import spotBalancesUpdater from './spotBalancesUpdater'
 import { PerpMarket } from '@blockworks-foundation/mango-v4/'
 import perpPositionsUpdater from './perpPositionsUpdater'
 import { DEFAULT_PRIORITY_FEE } from '@components/settings/RpcSettings'
 import {
-  EntityId,
   IExecutionLineAdapter,
   IOrderLineAdapter,
 } from '@public/charting_library/charting_library'
 
+export const DEFAULT_THEME_DATA: ThemeData = {
+  buttonStyle: 'flat',
+  logoPath: '/logos/logo-mark.svg',
+  platformName: 'Mango',
+  rainAnimationImagePath: '',
+  sideImagePath: '',
+  sideTilePath: '',
+  topTilePath: '',
+  tvChartTheme: 'Dark',
+  tvImagePath: '',
+  useGradientBg: false,
+}
+
 const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
 
 const ENDPOINTS = [
@@ -209,6 +222,7 @@ export type MangoStore = {
     amountOut: string
   }
   set: (x: (x: MangoStore) => void) => void
+  themeData: ThemeData
   tokenStats: {
     initialLoad: boolean
     loading: boolean
@@ -364,6 +378,7 @@ const mangoStore = create<MangoStore>()(
         amountIn: '',
         amountOut: '',
       },
+      themeData: DEFAULT_THEME_DATA,
       tokenStats: {
         initialLoad: false,
         loading: true,
diff --git a/styles/globals.css b/styles/globals.css
index 95aae407..9beb148a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -679,38 +679,38 @@ input[type='range']::-webkit-slider-runnable-track {
   @apply absolute h-screen w-full;
 }
 
-/* bonk button */
+/* raised button */
 
-.bonk-button {
+.raised-button {
   @apply relative flex items-center justify-center bg-th-button text-th-fgd-1 transition-none;
   box-shadow: 0 6px var(--button-hover);
 }
 
-.bonk-button:hover {
+.raised-button:hover {
   background-color: var(--button);
   box-shadow: 0 4px var(--button-hover);
   top: 2px;
 }
 
-.bonk-button:active {
+.raised-button:active {
   box-shadow: 0 0 var(--button-hover);
   top: 6px;
 }
 
-/* bonk buy button */
+/* raised buy button */
 
-.bonk-buy-button {
+.raised-buy-button {
   @apply relative flex items-center justify-center bg-th-up text-th-active transition-none;
   box-shadow: 0 6px var(--up-dark);
 }
 
-.bonk-buy-button:hover {
+.raised-buy-button:hover {
   background-color: var(--up) !important;
   box-shadow: 0 4px var(--up-dark);
   top: 2px;
 }
 
-.bonk-buy-button:active {
+.raised-buy-button:active {
   box-shadow: 0 0 var(--up-dark);
   top: 6px;
 }
diff --git a/types/index.ts b/types/index.ts
index e63f7c07..bfaad526 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -360,6 +360,19 @@ export interface TradeForm {
   reduceOnly: boolean
 }
 
+export interface ThemeData {
+  buttonStyle: 'flat' | 'raised'
+  logoPath: string
+  platformName: string
+  rainAnimationImagePath: string
+  sideImagePath: string
+  sideTilePath: string
+  topTilePath: string
+  tvChartTheme: 'Light' | 'Dark'
+  tvImagePath: string
+  useGradientBg: boolean
+}
+
 export interface MangoError extends Error {
   txid: string
 }