diff --git a/components/Footer.tsx b/components/Footer.tsx
index b8c6d8ed2..b420c7693 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { Box, Text, Flex, Anchor, Button } from './primitives'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDiscord, faTwitter } from '@fortawesome/free-brands-svg-icons'
-import {useTheme} from "next-themes";
 
 type SectionTitleProps = {
   title: string
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 64472aef4..371feccab 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -2,7 +2,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { Box, Button, Flex, Grid, Text } from './primitives'
 import { FC } from 'react'
-import { useTheme } from 'next-themes'
 
 interface IProp {
   hideLink?: boolean
diff --git a/components/collections/CollectionActions.tsx b/components/collections/CollectionActions.tsx
index 6672c0daa..7eff2e354 100644
--- a/components/collections/CollectionActions.tsx
+++ b/components/collections/CollectionActions.tsx
@@ -10,7 +10,6 @@ import { styled } from '../../stitches.config'
 import { Box, Flex } from 'components/primitives'
 import { ComponentPropsWithoutRef, FC, useContext, useState } from 'react'
 import { useMarketplaceChain, useMounted } from 'hooks'
-import { useTheme } from 'next-themes'
 import { Dropdown } from 'components/primitives/Dropdown'
 import { useMediaQuery } from 'react-responsive'
 import fetcher from 'utils/fetcher'
diff --git a/components/common/ChainToggle.tsx b/components/common/ChainToggle.tsx
index cede2875f..6b72725ff 100644
--- a/components/common/ChainToggle.tsx
+++ b/components/common/ChainToggle.tsx
@@ -13,7 +13,6 @@ import { useContext } from 'react'
 import { ChainContext } from 'context/ChainContextProvider'
 import { TooltipArrow } from 'components/primitives/Tooltip'
 import { useMounted } from 'hooks'
-import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
diff --git a/components/common/LoadingSpinner.tsx b/components/common/LoadingSpinner.tsx
index 68874411c..6e3f0c1df 100644
--- a/components/common/LoadingSpinner.tsx
+++ b/components/common/LoadingSpinner.tsx
@@ -26,7 +26,7 @@ const LoadingSpinner: FC<Props> = ({ css }) => {
         animation: `${spin} 1s cubic-bezier(0.76, 0.35, 0.2, 0.7) infinite`,
         ...css,
       }}
-    ></Box>
+    />
   )
 }
 
diff --git a/components/fortune/Prize.tsx b/components/fortune/Prize.tsx
index 7521281c7..6d71bc09b 100644
--- a/components/fortune/Prize.tsx
+++ b/components/fortune/Prize.tsx
@@ -10,7 +10,7 @@ export type PrizeType = {
   tokenId?: bigint
 }
 
-const YoloPrize = ({ data } : { data: PrizeType }) => {
+const FortunePrize = ({ data } : { data: PrizeType }) => {
   return (
     <Flex
       title={data.bidderName}
@@ -45,4 +45,4 @@ const YoloPrize = ({ data } : { data: PrizeType }) => {
   )
 }
 
-export default YoloPrize;
\ No newline at end of file
+export default FortunePrize;
\ No newline at end of file
diff --git a/components/learn-nfts/LearnCarousel.tsx b/components/learn-nfts/LearnCarousel.tsx
index 8ab0f08b4..ff4761dd8 100644
--- a/components/learn-nfts/LearnCarousel.tsx
+++ b/components/learn-nfts/LearnCarousel.tsx
@@ -2,7 +2,6 @@ import Link from 'next/link'
 
 import { Box, Flex, Text } from '../primitives'
 import { FC } from 'react'
-import { useTheme } from 'next-themes'
 // import Carousel from "react-elastic-carousel";
 import { items } from './styled/resource.json'
 
diff --git a/components/learn-nfts/LearnHeroSection.tsx b/components/learn-nfts/LearnHeroSection.tsx
index d98ad2561..ab0c6a203 100644
--- a/components/learn-nfts/LearnHeroSection.tsx
+++ b/components/learn-nfts/LearnHeroSection.tsx
@@ -1,6 +1,5 @@
 import { Box, Flex, Text } from '../primitives'
 import { FC } from 'react'
-import { useTheme } from 'next-themes'
 import { useMediaQuery } from 'react-responsive'
 
 const LearnHeroSection: FC = () => {
diff --git a/components/navbar/GlobalSearch.tsx b/components/navbar/GlobalSearch.tsx
index 4dba4245b..8534b0f2f 100644
--- a/components/navbar/GlobalSearch.tsx
+++ b/components/navbar/GlobalSearch.tsx
@@ -30,7 +30,6 @@ import { OpenSeaVerified } from 'components/common/OpenSeaVerified'
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 import { SearchCollection } from 'pages/api/globalSearch'
 import { formatNumber } from 'utils/numbers'
-import { useTheme } from 'next-themes'
 import Img from 'components/primitives/Img'
 import optimizeImage from 'utils/optimizeImage'
 import { SearchChainSwitcher } from './SearchChainSwitcher'
diff --git a/components/navbar/SearchChainSwitcher.tsx b/components/navbar/SearchChainSwitcher.tsx
index 84f2abd2b..2e1660aea 100644
--- a/components/navbar/SearchChainSwitcher.tsx
+++ b/components/navbar/SearchChainSwitcher.tsx
@@ -7,7 +7,6 @@ import {
 } from 'components/primitives'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { useMounted } from 'hooks'
-import { useTheme } from 'next-themes'
 import { Dispatch, FC, SetStateAction } from 'react'
 import supportedChains from 'utils/chains'
 import { TooltipArrow } from 'components/primitives/Tooltip'
diff --git a/components/navbar/Wallet.tsx b/components/navbar/Wallet.tsx
index 74e26a480..d77211845 100644
--- a/components/navbar/Wallet.tsx
+++ b/components/navbar/Wallet.tsx
@@ -233,7 +233,7 @@ const Wallet = () => {
             <Text style="body2" color="subtle" css={{ mb: '$2' }}>
               Total Exp
             </Text>
-            <Text style="h4" css={{ mb: '$4' }}>{formatNumber(profile?.exp || 0)}</Text>
+            <Text style="h5" css={{ mb: '$4' }}>{formatNumber(profile?.exp || 0)}</Text>
           </Flex>
         </Flex>
         <Button
diff --git a/components/token/TokenInfo.tsx b/components/token/TokenInfo.tsx
index 124d39e58..78b06791f 100644
--- a/components/token/TokenInfo.tsx
+++ b/components/token/TokenInfo.tsx
@@ -9,7 +9,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { styled } from '../../stitches.config'
-import { useTheme } from 'next-themes'
 import { useMarketplaceChain, useMounted } from 'hooks'
 import { truncateAddress } from 'utils/truncate'
 import ReactMarkdown from 'react-markdown'
diff --git a/package.json b/package.json
index 1cc4a7fbf..7f82ff502 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,11 @@
     "@types/uuid": "^9.0.1",
     "@upstash/redis": "^1.22.0",
     "@widgetbot/react-embed": "^1.8.2",
+    "canvas-confetti": "^1.6.0",
     "dayjs": "^1.11.6",
     "framer-motion": "^6.3.6",
+    "highcharts": "^11.1.0",
+    "highcharts-react-official": "^3.2.0",
     "lodash": "^4.17.21",
     "mongodb": "^5.7.0",
     "next": "13.0",
@@ -46,6 +49,7 @@
     "openapi-typescript-fetch": "^1.1.3",
     "posthog-js": "^1.68.4",
     "react": "^18.0",
+    "react-canvas-confetti": "^1.4.0",
     "react-dom": "^18.0",
     "react-hotkeys-hook": "^4.0.4",
     "react-jazzicon": "^1.0.4",
@@ -53,6 +57,7 @@
     "react-responsive": "^9.0.0",
     "swr": "2.0.1",
     "upgrade": "^1.1.0",
+    "use-sound": "^4.0.1",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "viem": "~1.0.6",
diff --git a/pages/bridge/index.tsx b/pages/bridge/index.tsx
index 0edc0f76b..9080b754e 100644
--- a/pages/bridge/index.tsx
+++ b/pages/bridge/index.tsx
@@ -13,7 +13,6 @@ import {useConnectModal} from "@rainbow-me/rainbowkit";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
 import { ethers, BigNumber } from 'ethers';
-import {useTheme} from "next-themes";
 import {ContractFunctionConfig, zeroAddress} from "viem";
 import {useDebounce} from "usehooks-ts";
 import {Abi} from "abitype";
diff --git a/pages/bridge/nft.tsx b/pages/bridge/nft.tsx
index 5e0d50bc5..cbfc063de 100644
--- a/pages/bridge/nft.tsx
+++ b/pages/bridge/nft.tsx
@@ -39,7 +39,6 @@ import L2ERC721BridgeAbi from "artifact/L2ERC721BridgeAbi.json";
 import LoadingSpinner from "components/common/LoadingSpinner";
 import {FullscreenModal} from "components/common/FullscreenModal";
 import baseSupportedChains, {NFT_BRIDGE} from "../../utils/chains";
-import {useTheme} from "next-themes";
 
 const SUPPORTED_NFT_CHAINS = [1,10,42161]
 const supportedChains = baseSupportedChains.filter(f => SUPPORTED_NFT_CHAINS.includes(f.id))
diff --git a/pages/fortune/[[...round]].tsx b/pages/fortune/[[...round]].tsx
index 29f661a4a..304a6b294 100644
--- a/pages/fortune/[[...round]].tsx
+++ b/pages/fortune/[[...round]].tsx
@@ -164,7 +164,7 @@ const fortunePrizes: PrizeType[] = [
   }
 ]
 
-const GamePage = () => {
+const FortunePage = () => {
   const [status, setStatus] = useState(0)
   const [enableAudio, setEnableAudio] = useState(false)
   const [showEntryForm, setShowEntryForm] = useState(false)
@@ -354,23 +354,23 @@ const GamePage = () => {
                 <Flex align="center" justify="between">
                   <Text>Current Round</Text>
                   <Flex css={{ gap: 10 }}>
-                    <Link href="/yolo/history" passHref legacyBehavior>
+                    <Link href="/fortune/history" passHref legacyBehavior>
                       <Button as="a" size="xs" color="secondary">
                         <FontAwesomeIcon icon={faHistory} width={15} height={15}/>
                         {!isMobile && (<Text>History</Text>)}
                       </Button>
                     </Link>
-                    <Link href="/yolo/1" passHref legacyBehavior>
+                    <Link href="/fortune/1" passHref legacyBehavior>
                       <Button as="a" size="xs" color="secondary">
                         <FontAwesomeIcon icon={faArrowLeft} width={15} height={15}/>
                       </Button>
                     </Link>
-                    <Link href="/yolo/3" passHref legacyBehavior>
+                    <Link href="/fortune/3" passHref legacyBehavior>
                       <Button as="a" size="xs" color="secondary">
                         <FontAwesomeIcon icon={faArrowRight} width={15} height={15}/>
                       </Button>
                     </Link>
-                    <Link href="/yolo" passHref legacyBehavior>
+                    <Link href="/fortune" passHref legacyBehavior>
                       <Button as="a" size="xs" color="secondary">
                         <FontAwesomeIcon icon={faForwardStep} width={15} height={15}/>
                       </Button>
@@ -615,4 +615,4 @@ const GamePage = () => {
   )
 }
 
-export default GamePage;
\ No newline at end of file
+export default FortunePage;
\ No newline at end of file
diff --git a/pages/migrate.tsx b/pages/migrate.tsx
index 8bc3d9372..89663e242 100644
--- a/pages/migrate.tsx
+++ b/pages/migrate.tsx
@@ -13,7 +13,6 @@ import {useConnectModal} from "@rainbow-me/rainbowkit";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
 import { ethers, BigNumber } from 'ethers';
-import {useTheme} from "next-themes";
 import {ContractFunctionConfig, zeroAddress} from "viem";
 import {useDebounce} from "usehooks-ts";
 import {Abi} from "abitype";
diff --git a/yarn.lock b/yarn.lock
index 500e27531..8d9a7dc0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2120,6 +2120,11 @@
     "@tanstack/query-core" "4.29.11"
     use-sync-external-store "^1.2.0"
 
+"@types/canvas-confetti@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.6.0.tgz#c525f22f1042e73dec6a7e86c1f5bb0191c09fea"
+  integrity sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==
+
 "@types/connect@^3.4.33":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
@@ -2989,6 +2994,11 @@ caniuse-lite@^1.0.30001406:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
   integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
 
+canvas-confetti@1.6.0, canvas-confetti@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.6.0.tgz#193f71aa8f38fc850a5ba94f59091a7afdb43ead"
+  integrity sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==
+
 chalk@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -3677,6 +3687,16 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+highcharts-react-official@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/highcharts-react-official/-/highcharts-react-official-3.2.0.tgz#42f8f237d73eec6791318efb41237067000cf815"
+  integrity sha512-71IJZsLmEboYFjONpwC3NRsg6JKvtKYtS5Si3e6s6MLRSOFNOY8KILTkzvO36kjpeR/A0X3/kvvewE+GMPpkjw==
+
+highcharts@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-11.1.0.tgz#715eb55fd081351b526e28cd89ac0e4e30b35c15"
+  integrity sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3693,6 +3713,11 @@ hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
+howler@^2.1.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
+  integrity sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==
+
 https-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -4801,6 +4826,14 @@ react-blockies@^1.4.1:
   dependencies:
     prop-types "^15.5.10"
 
+react-canvas-confetti@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-canvas-confetti/-/react-canvas-confetti-1.4.0.tgz#69a759e09024ff2cc8896739b8377182dee3c38d"
+  integrity sha512-ByBdSsNGUxlcJuOqSgbZw1VWNNO3b7njTmnuM1Y36mvwdCkCRs8rLkRAjn6MQK96LgWcfDVhr6ZT5olm2w8Zwg==
+  dependencies:
+    "@types/canvas-confetti" "1.6.0"
+    canvas-confetti "1.6.0"
+
 react-dom@^18.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -5434,6 +5467,13 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sound@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-4.0.1.tgz#8c8de4badd16902db7762fd9418a4283b9bf7b3e"
+  integrity sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==
+  dependencies:
+    howler "^2.1.3"
+
 use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"