diff --git a/README.md b/README.md
index 3d02d2b..3a7462f 100644
--- a/README.md
+++ b/README.md
@@ -30,9 +30,9 @@ Mixpoint solves a common problem that many "desktop" DJ's face - there are only
 
 The goal of this app is to provide a focused user experience that delivers on the need to lay out a series of tracks, easily tweak the transition from one track to the next (a mix), and save the output as a finished set. Using ai, the software will recommend mixes based on mixes other people have created, and eventually mix tracks together for you.
 
-Huge thanks to the MUI team for creating such a [kickass UI](https://mui.com/joy-ui/getting-started/overview/) freely available.
+Huge thanks to the NextUI team for creating such a [kickass UI](https://nextui.org) freely available.
 
-The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation. Also thanks to John Heiner for the fun progress indicator.
+The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation.
 
 Open source is more than a licensing strategy. It's a [movement](https://opensource.stackexchange.com/questions/9805/can-i-license-my-project-with-an-open-source-license-but-disallow-commercial-use). This work is made possible only by the labor of many open source contributers and their freely sourced efforts.
 
@@ -48,7 +48,7 @@ The app is built using `Remix` which uses esBuild (now Vite) for really fast hot
 
 - Typescript
 - Remix
-- MUI (Joy)
+- NextUI
 - Teaful for App State
 - Dexie (IndexedDb) for Persistent State
 - WaveSurfer
diff --git a/app/api/audioEvents.ts b/app/api/audioEvents.ts
index 4917288..94c3148 100644
--- a/app/api/audioEvents.ts
+++ b/app/api/audioEvents.ts
@@ -55,22 +55,23 @@ const audioEvents = {
 
 			// Adjust zoom based on previous mixPrefs
 			waveform.zoom(
-				beatResolution === 1 ? 80 : beatResolution === 0.5 ? 40 : 20
+				beatResolution === '1:1' ? 80 : beatResolution === '1:2' ? 40 : 20
 			)
 
 			// Remove analyzing overlay
-			setAppState.analyzing(prev => prev.filter(id => id !== trackId))
+			setAppState.analyzing(prev => {
+				prev.delete(trackId)
+				return prev
+			})
 
 			// Style scrollbar (this is a workaround for https://github.com/katspaugh/wavesurfer.js/issues/2933)
 			const style = document.createElement('style')
 			style.textContent = `::-webkit-scrollbar {
-				background: rgba(4, 146, 247, 0.5);
 				height: 18px;
 			}
 
 			::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
-				border-top: 1px solid var(--joy-palette-divider);
-				background-color: var(--joy-palette-background-surface);
+				border-top: 1px solid rgba(128,128,128,.3);
 			}
 
 			::-webkit-scrollbar-thumb {
@@ -82,6 +83,9 @@ const audioEvents = {
 			}`
 			waveform.getWrapper().appendChild(style)
 
+			// add classname value to waveform.getWrapper()
+			waveform.getWrapper().classList.add('wrapper')
+
 			// Update time
 			let [time] = getAudioState[trackId].time()
 			if (!time) {
@@ -93,7 +97,10 @@ const audioEvents = {
 			waveform.on('redraw', () => audioEvents.seek(trackId))
 		} else {
 			// Remove from stemsAnalyzing
-			setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+			setAppState.stemsAnalyzing(prev => {
+				prev.delete(trackId)
+				return prev
+			})
 		}
 
 		// Update BPM if adjusted
@@ -418,13 +425,13 @@ const audioEvents = {
 
 		// Adjust zoom
 		switch (beatResolution) {
-			case 0.25:
+			case '1:4':
 				waveform.zoom(20)
 				break
-			case 0.5:
+			case '1:2':
 				waveform.zoom(40)
 				break
-			case 1:
+			case '1:1':
 				waveform.zoom(80)
 				break
 		}
@@ -531,9 +538,7 @@ const audioEvents = {
 		stem: TrackPrefs['stemZoom'] | 'all'
 	) => {
 		// add track to analyzing state
-		setAppState.analyzing(prev =>
-			prev.includes(trackId) ? prev : [...prev, trackId]
-		)
+		setAppState.analyzing(prev => prev.add(trackId))
 
 		const [{ waveform }] = getAudioState[trackId]()
 		if (waveform) waveform.destroy()
@@ -575,7 +580,10 @@ const audioEvents = {
 		}
 
 		// Remove from stemsAnalyzing
-		setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+		setAppState.stemsAnalyzing(prev => {
+			prev.delete(trackId)
+			return prev
+		})
 	}
 }
 
diff --git a/app/api/audioHandlers.ts b/app/api/audioHandlers.ts
index 77b9e8a..28a20a3 100644
--- a/app/api/audioHandlers.ts
+++ b/app/api/audioHandlers.ts
@@ -34,7 +34,10 @@ async function getTracksRecursively(
 	const trackArray: partialTrack[] = []
 
 	// Change sort order to lastModified so new tracks are visible at the top
-	await setPrefs('user', { sortColumn: 'lastModified', sortDirection: 'desc' })
+	await setPrefs('user', {
+		sortColumn: 'lastModified',
+		sortDirection: 'descending'
+	})
 
 	const filesToTracks = async (
 		fileOrDirectoryHandle: FileSystemFileHandle | FileSystemDirectoryHandle,
@@ -96,15 +99,16 @@ async function getTracksRecursively(
 			}
 		})
 		return []
-	} else return addTracksToDb()
+	}
+
+	return addTracksToDb()
 }
 
 const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 	// Set analyzing state now to avoid tracks appearing with 'analyze' button
-	setAppState.analyzing(analyzing => [
-		...analyzing,
-		...tracks.map(track => track.id)
-	])
+	setAppState.analyzing(
+		prev => new Set([...prev, ...tracks.map(track => track.id)])
+	)
 
 	// Return array of updated tracks
 	const updatedTracks: Track[] = []
@@ -115,9 +119,9 @@ const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 			// Change sort order to lastModified so new tracks are visible at the top
 			await setPrefs('user', {
 				sortColumn: 'lastModified',
-				sortDirection: 'desc'
+				sortDirection: 'descending'
 			})
-			setAppState.page(0)
+			setAppState.page(1)
 			sorted = true
 		}
 
@@ -142,7 +146,10 @@ const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 		updatedTracks.push(trackWithId)
 
 		// Remove from analyzing state
-		setAppState.analyzing(analyzing => analyzing.filter(id => id !== track.id))
+		setAppState.analyzing(prev => {
+			prev.delete(track.id)
+			return prev
+		})
 	}
 	return updatedTracks
 }
@@ -160,7 +167,7 @@ const getAudioDetails = async (
 }> => {
 	const file = await getPermission(track)
 	if (!file) {
-		setAppState.analyzing([])
+		setAppState.analyzing(new Set())
 		throw errorHandler('Permission to the file or folder was denied.')
 	}
 
@@ -223,10 +230,10 @@ const calcMarkers = async (trackId: Track['id']): Promise<void> => {
 
 	if (!duration) return errorHandler(`Please try adding ${name} again.`)
 
-	const { beatResolution = 1 } = await getTrackPrefs(trackId)
+	const { beatResolution = '1:4' } = await getTrackPrefs(trackId)
 
 	const beatInterval = 60 / (bpm || 1)
-	const skipLength = beatInterval * (1 / beatResolution)
+	const skipLength = beatInterval * Number(beatResolution.split(':')[1])
 
 	let startPoint = adjustedOffset || offset || 0
 
diff --git a/app/api/db/__dbSchema.ts b/app/api/db/__dbSchema.ts
index f106198..6258aec 100644
--- a/app/api/db/__dbSchema.ts
+++ b/app/api/db/__dbSchema.ts
@@ -1,6 +1,7 @@
 // This file initializes Dexie (indexDB), defines the schema and creates tables
 
 import Dexie from 'dexie'
+import { Key } from 'react'
 
 // eventually allow the user to change these
 const STATE_ROW_LIMIT = 100
@@ -89,7 +90,7 @@ type MixSet = {
 // disk, which cannot be done without interacting with the page first.
 // Each file is a few megabytes, so the cache must be limited.
 const STEMS = ['drums', 'bass', 'vocals', 'other'] as const
-type Stem = typeof STEMS[number]
+type Stem = (typeof STEMS)[number]
 
 type TrackCache = {
 	id: Track['id']
@@ -103,7 +104,7 @@ type TrackCache = {
 type TrackPrefs = Partial<{
 	id: Track['id']
 	adjustedBpm: Track['bpm']
-	beatResolution: 0.25 | 0.5 | 1
+	beatResolution: '1:1' | '1:2' | '1:4'
 	stemZoom: Stem
 	mixpointTime: number // seconds
 }>
@@ -127,8 +128,9 @@ type SetPrefs = Partial<{
 
 type UserPrefs = Partial<{
 	date: Date
-	sortDirection: 'asc' | 'desc'
-	sortColumn: keyof Track // track table order property
+	sortDirection: 'ascending' | 'descending'
+	sortColumn: Key
+	visibleColumns: Set<Key> // track table visible columns
 	stemsDirHandle: FileSystemDirectoryHandle // local folder on file system to store stems
 }>
 
diff --git a/app/api/db/appState.ts b/app/api/db/appState.ts
index 5089210..fe9d5bd 100644
--- a/app/api/db/appState.ts
+++ b/app/api/db/appState.ts
@@ -1,6 +1,7 @@
 // This file handles application state that is not persisted through page refreshes, therefore not in IndexedDB. appState is different from Prefs in that it isn't persistent.
 
-import { ButtonProps } from '@mui/joy'
+import type { ButtonProps } from '@nextui-org/react'
+import { Key } from 'react'
 import createStore from 'teaful'
 import type WaveSurfer from 'wavesurfer.js'
 import { Stem, Track } from '~/api/db/dbHandlers'
@@ -56,27 +57,27 @@ const {
 	setStore: setAppState
 } = createStore<{
 	search: string | number
-	selected: Track['id'][]
+	selected: Set<Key> // NextUI table uses string keys
 	rowsPerPage: number
 	page: number
 	showButton: number | null
 	openDrawer: boolean
 	processing: boolean
-	analyzing: Track['id'][]
-	stemsAnalyzing: Track['id'][]
+	analyzing: Set<Track['id']>
+	stemsAnalyzing: Set<Track['id']>
 	syncTimer: ReturnType<typeof requestAnimationFrame> | undefined
 	audioContext?: AudioContext
 	loggedIn: string // email address
 }>({
 	search: '',
-	selected: [],
+	selected: new Set(),
 	rowsPerPage: 10,
-	page: 0,
+	page: 1,
 	showButton: null,
 	openDrawer: false,
 	processing: false,
-	analyzing: [],
-	stemsAnalyzing: [],
+	analyzing: new Set(),
+	stemsAnalyzing: new Set(),
 	syncTimer: undefined,
 	loggedIn: ''
 })
diff --git a/app/api/db/dbHandlers.ts b/app/api/db/dbHandlers.ts
index 200b8cd..2e60e67 100644
--- a/app/api/db/dbHandlers.ts
+++ b/app/api/db/dbHandlers.ts
@@ -89,7 +89,7 @@ const putTracks = async (tracks: TrackIdOptional[]): Promise<Track[]> => {
 	return (await db.tracks.bulkGet(updatedTracks)) as Track[]
 }
 
-const removeTracks = async (ids: number[]): Promise<void> => {
+const removeTracks = async (ids: Track['id'][]): Promise<void> => {
 	await db.tracks.bulkDelete(ids)
 
 	// Ensure we delete the file cache when a track is deleted
diff --git a/app/api/fileHandlers.ts b/app/api/fileHandlers.ts
index 277014e..7e6d332 100644
--- a/app/api/fileHandlers.ts
+++ b/app/api/fileHandlers.ts
@@ -84,7 +84,7 @@ const browseFile = async (trackSlot?: 0 | 1): Promise<void> => {
 
 	if (files?.length) {
 		const tracks = (await processTracks(files)) || []
-		addToMix(tracks[trackSlot || 0])
+		if (tracks.length === 1) addToMix(tracks[trackSlot || 0])
 	}
 }
 
@@ -198,7 +198,10 @@ const validateTrackStemAccess = async (
 	const state = await checkAccess()
 	if (state === 'ready') {
 		// remove analyzing
-		setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+		setAppState.stemsAnalyzing(prev => {
+			prev.delete(trackId)
+			return prev
+		})
 	}
 
 	if (stemState !== state) setAudioState[trackId].stemState(state)
diff --git a/app/api/renderWaveform.tsx b/app/api/renderWaveform.tsx
index ef9879e..9c2853b 100644
--- a/app/api/renderWaveform.tsx
+++ b/app/api/renderWaveform.tsx
@@ -1,11 +1,10 @@
-import { Card } from '@mui/joy'
-import { SxProps } from '@mui/joy/styles/types'
 import { useEffect } from 'react'
 import WaveSurfer, { type WaveSurferOptions } from 'wavesurfer.js'
 import Minimap from 'wavesurfer.js/dist/plugins/minimap.js'
 import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js'
 import { audioEvents } from '~/api/audioEvents'
 import {
+	appState,
 	getAppState,
 	getAudioState,
 	setAppState,
@@ -14,6 +13,7 @@ import {
 import { Stem, Track, db } from '~/api/db/dbHandlers'
 import { getPermission } from '~/api/fileHandlers'
 import { validateTrackStemAccess } from '~/api/fileHandlers'
+import { ProgressBar } from '~/components/Loader'
 import { errorHandler } from '~/utils/notifications'
 
 const PRIMARY_WAVEFORM_CONFIG = (trackId: Track['id']): WaveSurferOptions => ({
@@ -78,7 +78,7 @@ const initWaveform = async ({
 
 	const config: WaveSurferOptions = {
 		media,
-		cursorColor: 'secondary.mainChannel',
+		cursorColor: '#555',
 		interact: false,
 		waveColor: [
 			'rgb(200, 165, 49)',
@@ -158,12 +158,40 @@ const initAudioContext = ({
 	}
 }
 
+const TrackView = ({ trackId }: { trackId: Track['id'] }) => {
+	const [analyzingTracks] = appState.analyzing()
+	const analyzing = analyzingTracks.has(trackId)
+
+	const containerClass =
+		'p-0 border-1 border-divider rounded bg-default-50 overflow-hidden'
+
+	return (
+		<div
+			id={`zoomview-container_${trackId}`}
+			className={`${containerClass} relative h-20 z-1`}
+			onClick={e => {
+				const parent = e.currentTarget.firstElementChild as HTMLElement
+				audioEvents.clickToSeek(trackId, e, parent)
+			}}
+			onWheel={e =>
+				audioEvents.seek(trackId, 0, e.deltaY > 0 ? 'next' : 'previous')
+			}
+		>
+			{!analyzing ? null : (
+				<div className={`${containerClass} absolute z-10 w-full h-20 top-0`}>
+					<div className="relative w-1/2 top-1/2 -mt-0.5 m-auto">
+						<ProgressBar />
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
 const Waveform = ({
-	trackId,
-	sx
+	trackId
 }: {
 	trackId: Track['id']
-	sx: SxProps
 }): JSX.Element | null => {
 	if (!trackId) throw errorHandler('No track to initialize.')
 
@@ -181,37 +209,19 @@ const Waveform = ({
 
 		// prevent duplication on re-render while loading
 		const [analyzingTracks] = getAppState.analyzing()
-		const analyzing = analyzingTracks.includes(trackId)
+		const analyzing = analyzingTracks.has(trackId)
 
 		if (!analyzing) init()
 
 		// add track to analyzing state
-		setAppState.analyzing(prev =>
-			prev.includes(trackId) ? prev : [...prev, trackId]
-		)
+		setAppState.analyzing(prev => prev.add(trackId))
 
 		validateTrackStemAccess(trackId)
 
 		return () => audioEvents.destroy(trackId)
 	}, [trackId])
 
-	return (
-		<Card
-			id={`zoomview-container_${trackId}`}
-			className="zoomview-container"
-			sx={{
-				...sx,
-				zIndex: 1
-			}}
-			onClick={e => {
-				const parent = e.currentTarget.firstElementChild as HTMLElement
-				audioEvents.clickToSeek(trackId, e, parent)
-			}}
-			onWheel={e =>
-				audioEvents.seek(trackId, 0, e.deltaY > 0 ? 'next' : 'previous')
-			}
-		/>
-	)
+	return <TrackView trackId={trackId} />
 }
 
 export { PRIMARY_WAVEFORM_CONFIG, Waveform, initAudioContext, initWaveform }
diff --git a/app/components/ConfirmModal.tsx b/app/components/ConfirmModal.tsx
index 570d41c..2df49fd 100644
--- a/app/components/ConfirmModal.tsx
+++ b/app/components/ConfirmModal.tsx
@@ -1,7 +1,13 @@
-import { Icon } from '@iconify-icon/react'
-import { Box, Button, Modal, ModalDialog, Typography } from '@mui/joy'
-import { Divider } from '@mui/material'
+import {
+	Button,
+	Divider,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalHeader
+} from '@nextui-org/react'
 import { modalState } from '~/api/db/appState'
+import { WarningIcon } from '~/components/icons'
 
 const ConfirmModal = () => {
 	const [confirmModal] = modalState()
@@ -22,53 +28,45 @@ const ConfirmModal = () => {
 		<Modal
 			aria-labelledby="alert-dialog-modal-title"
 			aria-describedby="alert-dialog-modal-description"
-			open={openState || false}
-			sx={{ alignItems: 'normal' }}
+			isOpen={openState || false}
+			className="flex items-normal border-1 border-divider"
 			onClose={() => closeModal()}
-			disableEnforceFocus={true}
+			backdrop="opaque"
 		>
-			<ModalDialog
-				variant="outlined"
+			<ModalContent
 				role="alertdialog"
-				sx={{ borderColor: 'action.focus' }}
+				//sx={{ borderColor: 'action.focus' }}
 			>
-				<Typography
+				<ModalHeader
 					id="alert-dialog-modal-title"
-					component="h2"
-					level="inherit"
-					fontSize="1.25em"
-					sx={{ display: 'flex', alignItems: 'normal' }}
-					startDecorator={
-						<Icon
-							icon="material-symbols:warning-rounded"
-							height="20px"
-							style={{ alignSelf: 'center' }}
-						/>
-					}
+					//sx={{ display: 'flex', alignItems: 'normal' }}
 				>
+					<WarningIcon className="self-center text-xl mr-2" />
 					{headerText}
-				</Typography>
-				<Divider sx={{ my: 1 }} />
-				<Typography
-					id="alert-dialog-modal-description"
-					textColor="text.tertiary"
-					mb={3}
-				>
-					{bodyText}
-				</Typography>
-				<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
-					<Button variant="plain" color="neutral" onClick={() => onCancel()}>
+				</ModalHeader>
+				<Divider className="my-1" />
+				<ModalBody id="alert-dialog-modal-description">{bodyText}</ModalBody>
+				<div className="flex gap-2 justify-end m-3">
+					<Button
+						variant="faded"
+						color="default"
+						size="sm"
+						radius="sm"
+						onClick={() => onCancel()}
+					>
 						Cancel
 					</Button>
 					<Button
-						variant="solid"
+						size="sm"
+						radius="sm"
+						variant="flat"
 						color={confirmColor}
 						onClick={() => onConfirm()}
 					>
 						{confirmText}
 					</Button>
-				</Box>
-			</ModalDialog>
+				</div>
+			</ModalContent>
 		</Modal>
 	)
 }
diff --git a/app/components/InitialLoader.tsx b/app/components/InitialLoader.tsx
deleted file mode 100644
index 644bbe3..0000000
--- a/app/components/InitialLoader.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// InitialLoader is used to hide the flash of unstyled content
-
-import { Icon } from '@iconify-icon/react'
-import { Button, CircularProgress, styled } from '@mui/joy'
-import Logo from '~/components/layout/MixpointLogo'
-
-const LoaderWrapDiv = styled('div')`
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  position: fixed;
-  z-index: 99999;
-  background-color: 'background.appBody';
-  transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
-`
-
-const LoaderDiv = styled('div')`
-  min-width: 190px;
-  max-width: 30%;
-`
-
-const LoaderRow = styled('div')`
-  line-height: 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-const LoaderSubtext = styled('span')(({ theme }) => ({
-	color: theme.palette.text.primary
-}))
-
-const InitialLoader = ({ message }: { message?: string }) => {
-	return (
-		<LoaderWrapDiv aria-busy={!message}>
-			{!message ? null : (
-				<Button
-					variant="outlined"
-					color="primary"
-					size="sm"
-					sx={{ position: 'fixed', top: '50px' }}
-					onClick={() => {
-						window.location.href = '/'
-					}}
-				>
-					Go Back
-				</Button>
-			)}
-			<LoaderDiv>
-				<LoaderRow style={{ paddingBottom: '4px' }}>
-					<Logo />
-					{message ? (
-						<Icon
-							icon="material-symbols:warning"
-							height="20px"
-							style={{
-								alignSelf: 'center',
-								color: 'action',
-								paddingTop: '4px'
-							}}
-						/>
-					) : (
-						<CircularProgress color="primary" size="sm" variant="soft" />
-					)}
-				</LoaderRow>
-				<LoaderRow style={{ borderTop: '1px solid #e2e2e2' }}>
-					<LoaderSubtext>{message || 'Please Wait. Loading...'}</LoaderSubtext>
-				</LoaderRow>
-			</LoaderDiv>
-		</LoaderWrapDiv>
-	)
-}
-
-export default InitialLoader
diff --git a/app/components/Loader.tsx b/app/components/Loader.tsx
new file mode 100644
index 0000000..bd2c965
--- /dev/null
+++ b/app/components/Loader.tsx
@@ -0,0 +1,48 @@
+import { Button, Progress } from '@nextui-org/react'
+import { WarningIcon } from '~/components/icons'
+import Logo from '~/components/layout/MixpointLogo'
+
+const ProgressBar = ({ message }: { message?: string }) => (
+	<Progress
+		size="sm"
+		radius="sm"
+		aria-label={message || 'Loading...'}
+		isIndeterminate={!message}
+		value={100}
+		classNames={{
+			indicator: 'bg-gradient-to-r from-pink-500 to-yellow-500'
+		}}
+	/>
+)
+
+const InitialLoader = ({ message }: { message?: string }) => {
+	return (
+		<div
+			aria-busy={!message}
+			className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center text-xs z-50"
+		>
+			{!message ? null : (
+				<Button
+					variant="ghost"
+					size="sm"
+					className="fixed top-12"
+					onClick={() => {
+						window.location.href = '/'
+					}}
+				>
+					Go Back
+				</Button>
+			)}
+			<div style={{ minWidth: '190px', maxWidth: '30%' }}>
+				<div className="flex pb-1">
+					<Logo />
+					{!message ? null : <WarningIcon className="self-center text-xl" />}
+				</div>
+				<ProgressBar message={message} />
+				<p className="pt-1">{message || 'Loading...'}</p>
+			</div>
+		</div>
+	)
+}
+
+export { InitialLoader, ProgressBar }
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
new file mode 100644
index 0000000..6d0e6e1
--- /dev/null
+++ b/app/components/icons.tsx
@@ -0,0 +1,149 @@
+import { SVGProps } from 'react'
+
+// Icons come primarily from https://icon-sets.iconify.design/material-symbols-light
+const createIcon = (d: string) => {
+	return (props: SVGProps<SVGSVGElement>) => (
+		// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="1em"
+			height="1em"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path fill="currentColor" d={d} />
+		</svg>
+	)
+}
+
+const AddIcon = createIcon('M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z')
+const AnalyzeIcon = createIcon(
+	'M7.75 17.115V6.885h1v10.23zM11.5 21V3h1v18zM4 13.308v-2.616h1v2.616zm11.25 3.807V6.885h1v10.23zM19 13.308v-2.616h1v2.616z'
+)
+const ChevronIcon = createIcon(
+	'M13.292 12L9.046 7.754q-.14-.14-.15-.344q-.01-.204.15-.364t.354-.16q.194 0 .354.16l4.388 4.389q.131.13.184.267q.053.136.053.298t-.053.298q-.053.137-.184.267l-4.388 4.389q-.14.14-.344.15q-.204.01-.364-.15t-.16-.354q0-.194.16-.354z'
+)
+const CheckIcon = createIcon(
+	'M10 14.312l6.246-6.266q.139-.14.353-.14t.355.139q.14.139.14.354q0 .214-.14.355l-6.389 6.37q-.242.241-.565.241q-.323 0-.565-.242l-2.389-2.37q-.14-.138-.14-.352t.139-.355q.139-.14.354-.14q.214 0 .355.14z'
+)
+const SearchIcon = createIcon(
+	'M9.538 15.23q-2.398 0-4.064-1.666T3.808 9.5q0-2.398 1.666-4.064t4.064-1.667q2.399 0 4.065 1.667q1.666 1.666 1.666 4.064q0 1.042-.369 2.017q-.37.975-.97 1.668l5.908 5.907q.14.14.15.345q.01.203-.15.363q-.16.16-.353.16q-.195 0-.354-.16l-5.908-5.908q-.75.639-1.725.989q-.975.35-1.96.35m0-1q1.99 0 3.361-1.37q1.37-1.37 1.37-3.361q0-1.99-1.37-3.36q-1.37-1.37-3.36-1.37q-1.99 0-3.361 1.37q-1.37 1.37-1.37 3.36q0 1.99 1.37 3.36q1.37 1.37 3.36 1.37'
+)
+const LensIcon = createIcon(
+	'M12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8'
+)
+const JoinIcon = createIcon(
+	'M16 17q2.075 0 3.538-1.463T21 12q0-2.075-1.463-3.537T16 7q-.963 0-1.803.338q-.84.339-1.485.933q.61.766.949 1.721Q14 10.948 14 12t-.34 2.008q-.339.955-.948 1.72q.646.595 1.485.934Q15.037 17 16 17m-4-2q.475-.625.738-1.388T13 12q0-.85-.262-1.612T12 9q-.475.625-.737 1.388T11 12q0 .85.263 1.613T12 15m-4 2q.963 0 1.803-.338q.84-.339 1.485-.933q-.61-.766-.949-1.721Q10 13.052 10 12t.34-2.008q.339-.955.948-1.72q-.646-.595-1.485-.934Q8.963 7 8 7Q5.925 7 4.463 8.463T3 12q0 2.075 1.463 3.538T8 17m0 1q-2.502 0-4.251-1.749Q2 14.501 2 12q0-2.502 1.749-4.251Q5.499 6 8 6q1.163 0 2.186.412q1.022.411 1.814 1.146q.792-.735 1.814-1.146Q14.837 6 16 6q2.502 0 4.251 1.749Q22 9.499 22 12q0 2.502-1.749 4.251Q18.501 18 16 18q-1.163 0-2.186-.412q-1.022-.411-1.814-1.146q-.792.735-1.814 1.146Q9.163 18 8 18'
+)
+const AnimationIcon = createIcon(
+	'M9 21q-1.258 0-2.34-.473q-1.083-.473-1.898-1.289q-.816-.815-1.289-1.898Q3 16.258 3 15q0-1.775.944-3.267q.944-1.493 2.587-2.214q.461-1.032 1.218-1.79q.757-.756 1.77-1.198q.71-1.604 2.17-2.568Q13.148 3 15 3q1.258 0 2.34.473q1.083.473 1.898 1.289q.816.815 1.289 1.898Q21 7.742 21 9q0 1.856-.935 3.288q-.934 1.433-2.596 2.193q-.461 1.032-1.208 1.78q-.748.747-1.78 1.208q-.721 1.604-2.175 2.568Q10.852 21 9 21m.038-1q1.114 0 2.232-.538q1.118-.539 1.768-1.577q-1.526.269-2.888-.214q-1.362-.483-2.35-1.452q-.988-.988-1.471-2.34q-.483-1.352-.214-2.879q-1.019.67-1.567 1.759Q4 13.849 4 15q0 1.05.4 1.96q.4.91 1.075 1.584q.694.675 1.604 1.066q.91.39 1.96.39M12 17q1.44 0 2.478-.654q1.037-.654 1.572-1.461q-1.533.269-2.894-.217q-1.362-.485-2.35-1.455q-.989-.988-1.474-2.34q-.486-1.352-.217-2.885q-.865.593-1.47 1.64q-.607 1.047-.607 2.372q0 1.05.388 1.95t1.068 1.575q.675.7 1.566 1.087Q10.95 17 12 17m3.038-3q.45 0 .863-.075t.837-.225q.55-1.5.163-2.887t-1.338-2.338q-.95-.95-2.337-1.338t-2.888.163q-.15.425-.225.837T10.038 9q0 1.05.388 1.95t1.087 1.575q.675.7 1.575 1.087t1.95.388m2.885-.988q.962-.65 1.52-1.63Q20 10.402 20 9q0-1.05-.387-1.95t-1.088-1.575q-.675-.7-1.575-1.087T15 4q-1.279 0-2.291.567q-1.013.568-1.72 1.548q1.532-.269 2.894.217q1.361.485 2.35 1.455q.988.988 1.474 2.34q.485 1.352.216 2.885'
+)
+const WarningIcon = createIcon(
+	'M2.725 21q-.275 0-.5-.137t-.35-.363q-.125-.225-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3q.25 0 .488.125t.387.375l9.25 16q.15.25.138.513t-.138.487q-.125.225-.35.363t-.5.137zM12 18q.425 0 .713-.288T13 17q0-.425-.288-.712T12 16q-.425 0-.712.288T11 17q0 .425.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10q-.425 0-.712.288T11 11v3q0 .425.288.713T12 15'
+)
+const MoonIcon = createIcon(
+	'M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21m0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19m-.25-6.75'
+)
+const SunIcon = createIcon(
+	'M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 2q-2.075 0-3.537-1.463T7 12q0-2.075 1.463-3.537T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525zM12 12'
+)
+const HeartIcon = createIcon(
+	'm12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3'
+)
+const OfflineDownloadIcon = createIcon(
+	'M7 17h10v-2H7zm5-3l4-4l-1.4-1.4l-1.6 1.55V6h-2v4.15L9.4 8.6L8 10zm0 8q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22'
+)
+const RuleFolderIcon = createIcon(
+	'm7.825 16.375l4.95-4.95L11.35 10l-3.525 3.55L6.4 12.125L5 13.55zm6.575 0l1.6-1.6l1.6 1.6l1.4-1.4l-1.6-1.6l1.6-1.6l-1.4-1.4l-1.6 1.6l-1.6-1.6l-1.4 1.4l1.6 1.6l-1.6 1.6zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h6l2 2h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm0-2h16V8h-8.825l-2-2H4zm0 0V6z'
+)
+const TuneIcon = createIcon(
+	'M11 21v-6h2v2h8v2h-8v2zm-8-2v-2h6v2zm4-4v-2H3v-2h4V9h2v6zm4-2v-2h10v2zm4-4V3h2v2h4v2h-4v2zM3 7V5h10v2z'
+)
+const ReplayIcon = createIcon(
+	'M12 5V2.21c0-.45-.54-.67-.85-.35l-3.8 3.79c-.2.2-.2.51 0 .71l3.79 3.79c.32.31.86.09.86-.36V7c3.73 0 6.68 3.42 5.86 7.29c-.47 2.27-2.31 4.1-4.57 4.57c-3.57.75-6.75-1.7-7.23-5.01a1 1 0 0 0-.98-.85c-.6 0-1.08.53-1 1.13c.62 4.39 4.8 7.64 9.53 6.72c3.12-.61 5.63-3.12 6.24-6.24C20.84 9.48 16.94 5 12 5'
+)
+const EjectIcon = createIcon(
+	'M6.615 17.423h10.77q.196 0 .328.132q.133.133.133.328q0 .196-.133.33q-.132.133-.328.133H6.615q-.196 0-.328-.132q-.133-.132-.133-.328t.133-.33q.132-.133.328-.133m.53-4.03l4.184-6.231q.13-.195.3-.278Q11.8 6.8 12 6.8t.37.084q.17.083.301.278l4.185 6.23q.273.404.035.833t-.712.429H7.82q-.475 0-.712-.429t.035-.833'
+)
+const PreviousIcon = createIcon(
+	'M6.73 16.615v-9.23h1v9.23zm10.54 0L10.345 12l6.923-4.615z'
+)
+const RevertIcon = createIcon(
+	'M12 21q-3.15 0-5.575-1.912T3.275 14.2q-.1-.375.15-.687t.675-.363q.4-.05.725.15t.45.6q.6 2.25 2.475 3.675T12 19q2.925 0 4.963-2.037T19 12q0-2.925-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H8q.425 0 .713.288T9 9q0 .425-.288.713T8 10H4q-.425 0-.712-.288T3 9V5q0-.425.288-.712T4 4q.425 0 .713.288T5 5v1.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924q1.212 1.213 1.925 2.85T21 12q0 1.875-.712 3.513t-1.925 2.85q-1.213 1.212-2.85 1.925T12 21m0-7q-.825 0-1.412-.587T10 12q0-.825.588-1.412T12 10q.825 0 1.413.588T14 12q0 .825-.587 1.413T12 14'
+)
+const SetMixpointIcon = createIcon(
+	'M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 7q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8'
+)
+const PauseIcon = createIcon('M14 18V6h3.5v12zm-7.5 0V6H10v12z')
+const PlayIcon = createIcon('M9 17.192V6.808L17.154 12z')
+const NextIcon = createIcon(
+	'M16.27 16.615v-9.23h1v9.23zm-9.54 0v-9.23L13.655 12z'
+)
+const HeadsetOffIcon = createIcon(
+	'M12 4c3.87 0 7 3.13 7 7v2h-2.92L21 17.92V11a9 9 0 0 0-9-9c-1.95 0-3.76.62-5.23 1.68l1.44 1.44A6.914 6.914 0 0 1 12 4M2.27 1.72L1 3l3.33 3.32A8.899 8.899 0 0 0 3 11v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-1.17.29-2.26.79-3.22L15 17v4h3c.3 0 .59-.06.86-.14L21 23l1.27-1.27z'
+)
+const HeadsetIcon = createIcon(
+	'M12 1a9 9 0 0 0-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7a9 9 0 0 0-9-9'
+)
+const VolumeOffIcon = createIcon(
+	'M19.146 21.677L16.14 18.67q-.413.266-.863.467q-.45.2-.93.356v-1.05q.291-.106.562-.22q.27-.116.512-.272l-3.844-3.844v3.469L8 14H4.577v-4h2.892L2.592 5.123l.708-.708L19.854 20.97zm-.777-5.012l-.7-.7q.618-.852.955-1.865q.338-1.013.338-2.125q0-2.196-1.27-3.97q-1.269-1.772-3.346-2.5v-1.05q2.504.797 4.06 2.86q1.556 2.062 1.556 4.66q0 1.306-.42 2.502t-1.173 2.188m-2.773-2.773l-1.25-1.25v-4q.848.55 1.29 1.448q.44.898.44 1.91q0 .51-.12.988q-.12.477-.36.904m-4.02-4.019L9.863 8.138l1.715-1.715z'
+)
+const VolumeUpIcon = createIcon(
+	'M14.077 19.494v-1.05q2.077-.727 3.346-2.5q1.27-1.773 1.27-3.969t-1.27-3.97q-1.27-1.772-3.346-2.5v-1.05q2.485.797 4.05 2.86q1.565 2.062 1.565 4.66t-1.565 4.66q-1.565 2.063-4.05 2.86M4.307 14v-4h3.424l3.577-3.577v11.154L7.73 14zm9.77 1.308V8.642q.848.55 1.29 1.448q.44.898.44 1.91q0 1.006-.45 1.882q-.451.876-1.28 1.426'
+)
+const UploadFolderIcon = createIcon(
+	'M11.5 16.23h1v-4.7l2.12 2.12l.707-.708L12 9.615l-3.288 3.289l.707.708L11.5 11.53zM4.615 19q-.69 0-1.152-.462Q3 18.075 3 17.385V6.615q0-.69.463-1.152Q3.925 5 4.615 5h4.981l2 2h7.789q.69 0 1.152.463q.463.462.463 1.152v8.77q0 .69-.462 1.152q-.463.463-1.153.463zm0-1h14.77q.269 0 .442-.173t.173-.442v-8.77q0-.269-.173-.442T19.385 8h-8.19l-2-2h-4.58q-.269 0-.442.173T4 6.615v10.77q0 .269.173.442t.442.173M4 18V6z'
+)
+const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
+	// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+		>
+			<path d="M16 22.027v-2.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7a5.44 5.44 0 0 0-1.5-3.75a5.07 5.07 0 0 0-.09-3.77s-1.18-.35-3.91 1.48a13.38 13.38 0 0 0-7 0c-2.73-1.83-3.91-1.48-3.91-1.48A5.07 5.07 0 0 0 5 5.797a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7a3.37 3.37 0 0 0-.94 2.58v2.87" />
+			<path d="M9 20.027c-3 .973-5.5 0-7-3" />
+		</g>
+	</svg>
+)
+
+export {
+	AddIcon,
+	AnalyzeIcon,
+	ChevronIcon,
+	CheckIcon,
+	SearchIcon,
+	LensIcon,
+	JoinIcon,
+	AnimationIcon,
+	WarningIcon,
+	MoonIcon,
+	SunIcon,
+	GithubIcon,
+	HeartIcon,
+	OfflineDownloadIcon,
+	RuleFolderIcon,
+	TuneIcon,
+	ReplayIcon,
+	EjectIcon,
+	PreviousIcon,
+	RevertIcon,
+	SetMixpointIcon,
+	PauseIcon,
+	PlayIcon,
+	NextIcon,
+	HeadsetOffIcon,
+	HeadsetIcon,
+	VolumeOffIcon,
+	VolumeUpIcon,
+	UploadFolderIcon
+}
diff --git a/app/components/layout/DarkModeButton.tsx b/app/components/layout/DarkModeButton.tsx
index a4763a0..7b1b770 100644
--- a/app/components/layout/DarkModeButton.tsx
+++ b/app/components/layout/DarkModeButton.tsx
@@ -1,29 +1,38 @@
-import { Icon } from '@iconify-icon/react'
-import { IconButton, useColorScheme } from '@mui/joy'
+import { Button, Tooltip } from '@nextui-org/react'
+import { useTheme } from 'next-themes'
+import { MoonIcon, SunIcon } from '~/components/icons'
+import { errorHandler } from '~/utils/notifications'
 
 const DarkMode = () => {
-	const { mode, setMode } = useColorScheme()
+	const { theme, setTheme } = useTheme()
 
 	return (
-		<IconButton
-			id="toggle-mode"
+		<Tooltip
+			color="default"
 			size="sm"
-			variant="outlined"
-			color="primary"
-			aria-label="Darkmode"
-			onClick={() => {
-				new Audio('/media/light.mp3').play()
-				setMode(mode === 'dark' ? 'light' : 'dark')
-			}}
+			content={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
 		>
-			<Icon
-				icon={`material-symbols:${
-					mode === 'light' ? 'dark' : 'light'
-				}-mode-outline`}
-				height="20px"
-				title={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
-			/>
-		</IconButton>
+			<Button
+				isIconOnly
+				id="toggle-mode"
+				size="sm"
+				radius="sm"
+				variant="light"
+				color="primary"
+				aria-label={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+				className="border-1 border-primary-300 rounded text-primary-700"
+				onClick={() => {
+					new Audio('/media/light.mp3').play()
+					setTheme(theme === 'dark' ? 'light' : 'dark')
+				}}
+			>
+				{theme === 'dark' ? (
+					<SunIcon className="text-xl" />
+				) : (
+					<MoonIcon className="text-xl" />
+				)}
+			</Button>
+		</Tooltip>
 	)
 }
 
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index ac85a57..f393e8b 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -1,47 +1,33 @@
-import { Box, IconButton } from '@mui/joy'
-
+import { Button, Tooltip } from '@nextui-org/react'
+import { GithubIcon } from '~/components/icons'
 import DarkMode from '~/components/layout/DarkModeButton'
-import Logo from '~/components/layout/MixpointLogo'
-
-import { Icon } from '@iconify-icon/react'
 import LoginButton from '~/components/layout/LoginButton.client'
+import Logo from '~/components/layout/MixpointLogo'
 
 const Header = () => (
-	<Box
-		component="header"
-		sx={{
-			p: 2,
-			backgroundColor: 'background.surface',
-			display: 'flex',
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-			alignItems: 'center',
-			gridColumn: '1 / -1',
-			borderBottom: '1px solid',
-			borderColor: 'divider',
-			position: 'sticky',
-			top: 0,
-			zIndex: 1100
-		}}
-	>
+	<div className="p-4 flex flex-row bg-primary-50 justify-between items-center border-b border-default sticky z-10">
 		<Logo />
-		<Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5 }}>
+		<div className="flex flex-row gap-x-2">
 			<LoginButton />
-			<IconButton
-				size="sm"
-				variant="outlined"
-				color="primary"
-				aria-label="Github"
-				title="Discuss on Github"
-				onClick={() =>
-					window.open('https://github.com/jgentes/mixpoint/discussions')
-				}
-			>
-				<Icon icon="mdi:github" height="20px" />
-			</IconButton>
+			<Tooltip color="default" size="sm" content="Discuss on GitHub">
+				<Button
+					isIconOnly
+					variant="light"
+					color="primary"
+					aria-label="Discuss on Github"
+					radius="sm"
+					size="sm"
+					className="border-1 border-primary-300 rounded text-primary-700"
+					onClick={() =>
+						window.open('https://github.com/jgentes/mixpoint/discussions')
+					}
+				>
+					<GithubIcon className="h-5" />
+				</Button>
+			</Tooltip>
 			<DarkMode />
-		</Box>
-	</Box>
+		</div>
+	</div>
 )
 
 export default Header
diff --git a/app/components/layout/HeartIcon.tsx b/app/components/layout/HeartIcon.tsx
index 57d2921..62b88c6 100644
--- a/app/components/layout/HeartIcon.tsx
+++ b/app/components/layout/HeartIcon.tsx
@@ -1,43 +1,24 @@
-import { Icon } from '@iconify-icon/react'
-import { CSSProperties, useState } from 'react'
+import { useState } from 'react'
+import { HeartIcon } from '~/components/icons'
 
 const Heart: React.FunctionComponent = () => {
 	const [isHovered, setIsHovered] = useState(false)
 
-	const heartStyle = {
-		color: isHovered ? 'red' : 'grey',
-		fontSize: '16px'
-	}
-
-	const hideWrapStyle: CSSProperties = {
-		position: 'fixed',
-		bottom: '5px',
-		right: '5px',
-		cursor: 'default',
-		display: 'flex',
-		justifyContent: 'right',
-		alignItems: 'center'
-	}
-
-	const hideStyle = {
-		display: 'inline-block',
-		fontSize: '13px',
-		maxWidth: isHovered ? '100%' : '0%',
-		verticalAlign: 'bottom',
-		overflow: 'hidden',
-		textWrap: 'nowrap',
-		transition: 'max-width .5s ease-in-out'
-	}
+	const hideStyle = `inline-block text-xs ${
+		isHovered ? 'max-w-full' : 'max-w-0'
+	} align-bottom overflow-hidden whitespace-nowrap transition-max-width duration-500 ease-in-out`
 
 	return (
 		<div
-			style={hideWrapStyle}
+			className="fixed bottom-2 right-2 cursor-default flex justify-end items-center"
 			onMouseEnter={() => setIsHovered(true)}
 			onMouseLeave={() => setIsHovered(false)}
 		>
-			<div style={hideStyle}>Made with&nbsp;</div>
-			<Icon style={heartStyle} icon="mdi:cards-heart-outline" color="red" />
-			<div style={hideStyle}>&nbsp;in Oregon</div>
+			<div className={hideStyle}>Made with&nbsp;</div>
+			<HeartIcon
+				className={isHovered ? 'text-red-500 text-lg' : 'text-gray-500 text-lg'}
+			/>
+			<div className={hideStyle}>&nbsp;in Oregon</div>
 		</div>
 	)
 }
diff --git a/app/components/layout/LeftNav.tsx b/app/components/layout/LeftNav.tsx
new file mode 100644
index 0000000..71cd3e5
--- /dev/null
+++ b/app/components/layout/LeftNav.tsx
@@ -0,0 +1,92 @@
+import { Listbox, ListboxItem, ListboxSection } from '@nextui-org/react'
+import { AnimationIcon, JoinIcon, LensIcon } from '~/components/icons'
+
+import Dropzone from '~/components/tracks/Dropzone'
+
+const LeftNav = () => (
+	<div className="h-full flex flex-col p-0.5 border-r border-default justify-between bg-primary-50">
+		<div className="w-full max-w-[260px] px-1 py-2 rounded-small">
+			<Listbox
+				variant="flat"
+				aria-label="Navigation menu"
+				disabledKeys={['electro', 'house', 'drum & bass', 'downtempo']}
+			>
+				<ListboxSection
+					title="Browse"
+					classNames={{
+						heading:
+							'uppercase tracking-widest font-semibold text-2xs text-neutral-400 light:text-neutral-500'
+					}}
+				>
+					<ListboxItem
+						key="tracks"
+						className="h-10"
+						startContent={<LensIcon className="text-xl text-blue-400 w-8" />}
+					>
+						Tracks
+					</ListboxItem>
+					<ListboxItem
+						key="mixes"
+						className="h-10"
+						startContent={<JoinIcon className="text-3xl text-blue-400 w-8" />}
+					>
+						Mixes
+					</ListboxItem>
+					<ListboxItem
+						key="sets"
+						className="h-10"
+						startContent={
+							<AnimationIcon className="text-3xl text-blue-400 rotate-45 w-8" />
+						}
+					>
+						Sets
+					</ListboxItem>
+				</ListboxSection>
+				<ListboxSection
+					title="Playlists"
+					classNames={{
+						heading:
+							'uppercase tracking-widest font-semibold text-2xs text-neutral-400 light:text-neutral-500'
+					}}
+				>
+					<ListboxItem
+						key="electro"
+						startContent={
+							<div className="w-2.5 h-2.5 rounded-full bg-blue-300 ml-1" />
+						}
+					>
+						Electro
+					</ListboxItem>
+					<ListboxItem
+						key="house"
+						startContent={
+							<div className="w-2.5 h-2.5 rounded-full bg-red-300 ml-1" />
+						}
+					>
+						House
+					</ListboxItem>
+					<ListboxItem
+						key="drum & bass"
+						startContent={
+							<div className="w-2.5 h-2.5 rounded-full bg-orange-300 ml-1" />
+						}
+					>
+						Drum & Bass
+					</ListboxItem>
+					<ListboxItem
+						key="downtempo"
+						startContent={
+							<div className="w-2.5 h-2.5 rounded-full bg-green-300 ml-1" />
+						}
+					>
+						Downtempo
+					</ListboxItem>
+				</ListboxSection>
+			</Listbox>
+		</div>
+
+		<Dropzone className="m-2" />
+	</div>
+)
+
+export default LeftNav
diff --git a/app/components/layout/LoginButton.client.tsx b/app/components/layout/LoginButton.client.tsx
index fb06963..f45fb19 100644
--- a/app/components/layout/LoginButton.client.tsx
+++ b/app/components/layout/LoginButton.client.tsx
@@ -1,37 +1,43 @@
-import { IconButton, Modal, ModalDialog } from '@mui/joy'
-import { useColorScheme } from '@mui/joy'
+import { Button, Modal, ModalContent } from '@nextui-org/react'
 import { useOutletContext } from '@remix-run/react'
 import { Auth } from '@supabase/auth-ui-react'
 import { ThemeSupa } from '@supabase/auth-ui-shared'
 import { SupabaseClient } from '@supabase/supabase-js'
+import { useTheme } from 'next-themes'
 import { useState } from 'react'
 import { appState } from '~/api/db/appState'
 
 const LoginButton = () => {
 	const [openAuth, setOpenAuth] = useState(false)
-	const { mode } = useColorScheme()
 	const { supabase } = useOutletContext<{ supabase: SupabaseClient }>()
+	const { theme } = useTheme()
 
 	const [loggedIn] = appState.loggedIn()
 	const buttonText = loggedIn ? 'Log Out' : 'Log In'
 
 	return (
 		<>
-			<IconButton
+			<Button
 				id="login-button"
 				size="sm"
-				sx={{ px: 1 }}
-				variant="outlined"
+				radius="sm"
+				className="border-1 border-primary-300 rounded text-primary-700 font-semibold"
+				variant="light"
 				color="primary"
-				title={loggedIn || buttonText}
+				aria-label={loggedIn || buttonText}
 				onClick={async () => {
 					loggedIn ? await supabase.auth.signOut() : setOpenAuth(true)
 				}}
 			>
 				{buttonText}
-			</IconButton>
-			<Modal open={openAuth} onClose={() => setOpenAuth(false)}>
-				<ModalDialog sx={{ backgroundColor: 'background.surface' }}>
+			</Button>
+			<Modal
+				isOpen={openAuth}
+				className="p-6"
+				size="xs"
+				onClose={() => setOpenAuth(false)}
+			>
+				<ModalContent className="bg-primary-50">
 					<Auth
 						supabaseClient={supabase}
 						appearance={{
@@ -47,9 +53,9 @@ const LoginButton = () => {
 						}}
 						providers={['google', 'github']}
 						socialLayout="horizontal"
-						theme={mode}
+						theme={theme === 'dark' ? 'dark' : 'light'}
 					/>
-				</ModalDialog>
+				</ModalContent>
 			</Modal>
 		</>
 	)
diff --git a/app/components/layout/MixpointLogo.tsx b/app/components/layout/MixpointLogo.tsx
index 835a3bc..4db65ab 100644
--- a/app/components/layout/MixpointLogo.tsx
+++ b/app/components/layout/MixpointLogo.tsx
@@ -1,24 +1,22 @@
 const MixpointLogo = () => (
-	<a
-		href="/"
-		style={{
-			fontFamily: 'system-ui, sans-serif',
-			fontWeight: 400,
-			fontSize: '22px',
-			margin: 0,
-			background: 'linear-gradient(60deg, #2ca3d6 10%, hsl(220, 75%, 50%) 70%)',
-			color: '#fff',
-			WebkitBackgroundClip: 'text',
-			backgroundClip: 'text',
-			WebkitTextFillColor: 'transparent',
-			WebkitTextStrokeWidth: 'thin',
-			WebkitTextStrokeColor: 'rgb(0 0 0 / 5%)',
-			textDecoration: 'none',
-			marginRight: 'auto'
-		}}
-	>
-		Mixpoint
-	</a>
+	<>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="32px"
+			viewBox="0 0 24 24"
+			style={{ marginBottom: '-3px' }}
+			className="text-blue-400"
+		>
+			<title>Inner joined circles</title>
+			<path
+				fill="currentColor"
+				d="M16 17q2.075 0 3.538-1.463T21 12q0-2.075-1.463-3.537T16 7q-.963 0-1.803.338q-.84.339-1.485.933q.61.766.949 1.721Q14 10.948 14 12t-.34 2.008q-.339.955-.948 1.72q.646.595 1.485.934Q15.037 17 16 17m-4-2q.475-.625.738-1.388T13 12q0-.85-.262-1.612T12 9q-.475.625-.737 1.388T11 12q0 .85.263 1.613T12 15m-4 2q.963 0 1.803-.338q.84-.339 1.485-.933q-.61-.766-.949-1.721Q10 13.052 10 12t.34-2.008q.339-.955.948-1.72q-.646-.595-1.485-.934Q8.963 7 8 7Q5.925 7 4.463 8.463T3 12q0 2.075 1.463 3.538T8 17m0 1q-2.502 0-4.251-1.749Q2 14.501 2 12q0-2.502 1.749-4.251Q5.499 6 8 6q1.163 0 2.186.412q1.022.411 1.814 1.146q.792-.735 1.814-1.146Q14.837 6 16 6q2.502 0 4.251 1.749Q22 9.499 22 12q0 2.502-1.749 4.251Q18.501 18 16 18q-1.163 0-2.186-.412q-1.022-.411-1.814-1.146q-.792.735-1.814 1.146Q9.163 18 8 18"
+			/>
+		</svg>
+		<p className="text-2xl font-medium text-transparent m-0 bg-gradient-to-tr from-blue-400 to-blue-600 bg-clip-text mr-auto self-center">
+			Mixpoint
+		</p>
+	</>
 )
 
 export default MixpointLogo
diff --git a/app/components/mixes/MixCard.tsx b/app/components/mixes/MixCard.tsx
index 14a9071..e9b04df 100644
--- a/app/components/mixes/MixCard.tsx
+++ b/app/components/mixes/MixCard.tsx
@@ -1,8 +1,7 @@
-import { Box, Card, Typography } from '@mui/joy'
-import { SxProps } from '@mui/material'
 import { audioEvents } from '~/api/audioEvents'
 import { appState } from '~/api/db/appState'
 import { Track, getTrackName, useLiveQuery } from '~/api/db/dbHandlers'
+import { ProgressBar } from '~/components/Loader'
 import StemPanel from '~/components/mixes/StemPanel'
 import TrackPanel from '~/components/mixes/TrackPanel'
 import {
@@ -11,135 +10,79 @@ import {
 	TrackNavControl
 } from '~/components/tracks/Controls'
 import Dropzone from '~/components/tracks/Dropzone'
-import Loader from '~/components/tracks/TrackLoader'
 
 const MixCard = ({
 	trackId,
-	trackSlot,
-	sx
-}: { trackId: Track['id']; trackSlot: 0 | 1; sx?: SxProps }) => {
+	trackSlot
+}: { trackId: Track['id']; trackSlot: 0 | 1 }) => {
 	const [analyzingTracks] = appState.analyzing()
-	const analyzing = analyzingTracks.includes(trackId)
+	const analyzing = analyzingTracks.has(trackId)
 
 	const trackName = useLiveQuery(() => getTrackName(trackId), [trackId])
 
 	const mixCardHeader = (
-		<Box
-			sx={{
-				display: 'flex',
-				gap: 1,
-				mb: 1,
-				alignItems: 'center'
-			}}
-		>
-			<EjectControl trackId={trackId} />
-			<Typography
-				sx={{
-					fontSize: 'sm',
-					fontWeight: 'md',
-					whiteSpace: 'nowrap',
-					overflow: 'hidden',
-					textOverflow: 'ellipsis'
-				}}
-			>
-				{trackName}
-			</Typography>
+		<div className="flex mb-3 justify-between">
+			<div className="flex gap-2">
+				<EjectControl trackId={trackId} />
+				<div className="text-md font-medium whitespace-nowrap overflow-hidden overflow-ellipsis">
+					{trackName}
+				</div>
+			</div>
 
-			<BpmControl trackId={trackId} styles={{ marginLeft: 'auto' }} />
-		</Box>
+			<BpmControl trackId={trackId} className="w-28" />
+		</div>
 	)
 
 	const mixCardFooter = (
-		<Box
-			sx={{
-				mx: 'auto',
-				mt: 1
-			}}
-		>
+		<div className="text-center mt-2">
 			<TrackNavControl trackId={trackId} />
-		</Box>
+		</div>
 	)
 
-	const loaderSx = {
-		p: 0,
-		border: '1px solid',
-		borderColor: 'action.focus',
-		borderRadius: '4px',
-		borderBottom: 'none',
-		backgroundColor: 'background.body',
-		overflow: 'hidden',
-		zIndex: 1
-	}
+	const loaderClassNames =
+		'p-0 border-1 border-divider rounded bg-default-50 overflow-hidden'
 
 	return (
-		<Card
-			sx={{
-				p: 1,
-				m: 2,
-				width: '40%',
-				borderRadius: '4px',
-				border: '1px solid',
-				borderColor: 'action.selected',
-				backgroundColor: 'background.surface',
-				...sx
-			}}
-		>
+		<div className="p-3 w-5/12 rounded border-1 border-divider bg-primary-50">
 			{!trackId ? (
-				<Dropzone sx={{ height: '100%' }} trackSlot={trackSlot} />
+				<Dropzone className="h-full" trackSlot={trackSlot} />
 			) : (
 				<>
 					{mixCardHeader}
 
-					{/* loader cover */}
-					{!analyzing ? null : (
-						<Card
-							sx={{
-								...loaderSx,
-								zIndex: 2,
-								position: 'absolute',
-								inset: '40px 8px calc(100% - 67px)'
-							}}
-						>
-							<Loader style={{ margin: 'auto' }} />
-						</Card>
-					)}
-
 					{/* overview */}
-					<Card
+					<div
 						id={`overview-container_${trackId}`}
-						sx={{
-							...loaderSx,
-							pt: '1px',
-							height: '25px'
-						}}
+						className={`${loaderClassNames} relative z-1 py-1 mb-3 h-8`}
 						onClick={e => {
 							const parents = e.currentTarget.firstElementChild as HTMLElement
 							const parent = parents.children[1] as HTMLElement
 							audioEvents.clickToSeek(trackId, e, parent)
 						}}
-					/>
+					>
+						{!analyzing ? null : (
+							<div
+								className={`${loaderClassNames} absolute z-10 w-full h-8 top-0`}
+							>
+								<div className="relative w-1/2 top-1/2 -mt-0.5 m-auto">
+									<ProgressBar />
+								</div>
+							</div>
+						)}
+					</div>
 
-					<Box sx={{ mt: 1 }}>
+					<div className="mt-2">
 						<StemPanel trackId={trackId} />
-					</Box>
+					</div>
 
-					<Box
-						sx={{
-							p: 1,
-							mt: 1,
-							borderRadius: '4px',
-							border: '1px solid',
-							borderColor: 'action.selected',
-							backgroundColor: 'background.level1'
-						}}
-					>
+					<div className="p-2 mt-2 rounded border-1 border-divider bg-background">
 						<TrackPanel trackId={trackId} />
-					</Box>
+					</div>
 
 					{mixCardFooter}
 				</>
 			)}
-		</Card>
+		</div>
 	)
 }
 
diff --git a/app/components/mixes/MixView.tsx b/app/components/mixes/MixView.tsx
index 17da44d..2066a90 100644
--- a/app/components/mixes/MixView.tsx
+++ b/app/components/mixes/MixView.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/joy'
 import { MixPrefs } from '~/api/db/dbHandlers'
 import MixCard from '~/components/mixes/MixCard'
 import {
@@ -11,20 +10,15 @@ const MixView = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 	if (!tracks?.length) return null
 
 	return (
-		<Box
-			sx={{
-				display: 'flex',
-				justifyContent: 'space-between'
-			}}
-		>
+		<div className="flex justify-between m-4">
 			<MixCard trackId={tracks[0]} trackSlot={0} />
-			<Box sx={{ display: 'flex', flexDirection: 'column', mt: 3 }}>
+			<div className="flex flex-col mt-2">
 				<CrossfaderControl />
 				<MixControl tracks={tracks} />
 				<StemsCrossfaders />
-			</Box>
+			</div>
 			<MixCard trackId={tracks[1]} trackSlot={1} />
-		</Box>
+		</div>
 	)
 }
 
diff --git a/app/components/mixes/StemAccessButton.tsx b/app/components/mixes/StemAccessButton.tsx
index 4d7ec30..beb80c8 100644
--- a/app/components/mixes/StemAccessButton.tsx
+++ b/app/components/mixes/StemAccessButton.tsx
@@ -1,11 +1,16 @@
-import { Icon } from '@iconify-icon/react'
-import { CircularProgress, Sheet, Typography } from '@mui/joy'
+import { CircularProgress } from '@nextui-org/react'
 import { ReactElement } from 'react'
 import { useCountUp } from 'use-count-up'
 import { StemState, audioState } from '~/api/db/appState'
 import { Track } from '~/api/db/dbHandlers'
 import { getStemsDirHandle, validateTrackStemAccess } from '~/api/fileHandlers'
 import { stemAudio } from '~/api/stemHandler'
+import {
+	OfflineDownloadIcon,
+	RuleFolderIcon,
+	TuneIcon,
+	WarningIcon
+} from '~/components/icons'
 import { errorHandler } from '~/utils/notifications'
 
 const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
@@ -47,7 +52,7 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 			<CircularProgress
 				size="md"
 				color={color}
-				determinate
+				className="mx-auto"
 				value={(((value as number) || 1) / stemTimer) * 100}
 			/>
 		)
@@ -62,31 +67,18 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 	} = {
 		selectStemDir: {
 			icon: (
-				<Icon
-					icon="material-symbols:download-for-offline"
-					style={{ fontSize: 38, color: 'text.secondary' }}
-				/>
+				<OfflineDownloadIcon className="text-4xl text-default-600 m-auto" />
 			),
 			primaryText: 'Click to Select Stems Folder',
-			secondaryText: 'Downloaded stems will be stored here'
+			secondaryText: 'Downloaded stems will be stored in the folder'
 		},
 		grantStemDirAccess: {
-			icon: (
-				<Icon
-					icon="material-symbols:rule-folder-outline"
-					style={{ fontSize: 38, color: 'text.secondary' }}
-				/>
-			),
+			icon: <RuleFolderIcon className="text-4xl text-default-600 m-auto" />,
 			primaryText: 'Click to Grant Folder Access',
 			secondaryText: 'Permission needed to access stems'
 		},
 		getStems: {
-			icon: (
-				<Icon
-					icon="material-symbols:tune"
-					style={{ fontSize: 38, color: 'text.secondary' }}
-				/>
-			),
+			icon: <TuneIcon className="text-4xl text-default-600 m-auto" />,
 			primaryText: 'Click to Retrieve Stems',
 			secondaryText: 'Separate track into drums, vocals, etc'
 		},
@@ -101,55 +93,32 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 			secondaryText: 'Stem separation in progress'
 		},
 		downloadingStems: {
-			icon: <CircularProgress size="md" color="success" />,
+			icon: <CircularProgress size="md" color="success" className="mx-auto" />,
 			primaryText: 'Please stand by...',
 			secondaryText: 'Downloading stems'
 		},
 		ready: { icon: <></>, primaryText: '', secondaryText: '' },
 		error: {
-			icon: (
-				<Icon
-					icon="material-symbols:error-outline"
-					style={{ fontSize: 38, color: 'text.secondary' }}
-				/>
-			),
+			icon: <WarningIcon className="text-3xl text-warning-600 mx-auto" />,
 			primaryText: 'Something went wrong',
 			secondaryText: 'Please refresh the page and try again'
 		}
 	}
 
 	return (
-		<Sheet
-			variant="soft"
-			sx={{
-				border: '2px dashed #bbb',
-				height: '138px', // height of stems once loaded
-				padding: '20px 10px',
-				textAlign: 'center',
-				cursor: 'pointer',
-				borderRadius: '4px',
-				borderColor: '#e9b830cc',
-				backgroundColor: 'rgba(233, 215, 48, 0.1)',
-
-				'&:hover, &:active': {
-					borderColor: '#e9b830c0',
-					backgroundColor: 'rgba(233, 215, 48, 0.3)'
-				}
-			}}
+		<div
+			className="
+				border-2 border-dashed p-5 text-center cursor-pointer rounded border-default-500 bg-default-50 hover:bg-warning-500 hover:bg-opacity-10 hover:border-warning-500 active:border-warning-500 active:bg-warning-500m mb-3"
 			onClick={stemHandler}
 		>
 			{stemStates[stemState].icon}
-			<Typography
-				level="body1"
-				className="drop"
-				sx={{ color: 'text.secondary' }}
-			>
-				<b>{stemStates[stemState].primaryText}</b>
-			</Typography>
-			<Typography className="drop" level="body2">
+			<div className="text-default-600 text-md font-semibold">
+				{stemStates[stemState].primaryText}
+			</div>
+			<div className="text-default-600 text-sm">
 				{stemStates[stemState].secondaryText}
-			</Typography>
-		</Sheet>
+			</div>
+		</div>
 	)
 }
 
diff --git a/app/components/mixes/StemPanel.tsx b/app/components/mixes/StemPanel.tsx
index d9621e1..7071831 100644
--- a/app/components/mixes/StemPanel.tsx
+++ b/app/components/mixes/StemPanel.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/joy'
 import { useEffect } from 'react'
 import { type WaveSurferOptions } from 'wavesurfer.js'
 import { audioEvents } from '~/api/audioEvents'
@@ -51,14 +50,12 @@ const StemPanel = ({ trackId }: { trackId: Track['id'] }) => {
 
 		// prevent duplication on re-render while loading
 		const [analyzingTracks] = getAppState.stemsAnalyzing()
-		const analyzing = analyzingTracks.includes(trackId)
+		const analyzing = analyzingTracks.has(trackId)
 
 		if (!analyzing) initStems()
 
 		// add stems to analyzing state
-		setAppState.stemsAnalyzing(prev =>
-			prev.includes(trackId) ? prev : [...prev, trackId]
-		)
+		setAppState.stemsAnalyzing(prev => prev.add(trackId))
 
 		return () => audioEvents.destroyStems(trackId)
 	}, [trackId, stemState])
@@ -66,22 +63,11 @@ const StemPanel = ({ trackId }: { trackId: Track['id'] }) => {
 	return stemState !== 'ready' ? (
 		<StemAccessButton trackId={trackId} />
 	) : (
-		<Box
-			sx={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: 1,
-				p: 1,
-				borderRadius: '4px',
-				border: '1px solid',
-				borderColor: 'action.selected',
-				backgroundColor: 'background.level1'
-			}}
-		>
+		<div className="flex flex-col gap-1 p-2 mb-3 rounded border-1 border-divider bg-background">
 			{STEMS.map(stem => (
 				<StemControl key={stem} trackId={trackId} stemType={stem as Stem} />
 			))}
-		</Box>
+		</div>
 	)
 }
 
diff --git a/app/components/mixes/TrackPanel.tsx b/app/components/mixes/TrackPanel.tsx
index 5ae0233..a26410c 100644
--- a/app/components/mixes/TrackPanel.tsx
+++ b/app/components/mixes/TrackPanel.tsx
@@ -1,5 +1,4 @@
-import { Box, Card, Typography } from '@mui/joy'
-import { appState, audioState } from '~/api/db/appState'
+import { audioState } from '~/api/db/appState'
 import { Track, db, useLiveQuery } from '~/api/db/dbHandlers'
 import { Waveform } from '~/api/renderWaveform'
 import VolumeMeter from '~/components/mixes/VolumeMeter'
@@ -10,97 +9,45 @@ import {
 	TrackTime,
 	ZoomSelectControl
 } from '~/components/tracks/Controls'
-import Loader from '~/components/tracks/TrackLoader'
 import { timeFormat } from '~/utils/tableOps'
 
 const TrackPanel = ({ trackId }: { trackId: Track['id'] }) => {
-	const [analyzingTracks] = appState.analyzing()
-	const analyzing = analyzingTracks.includes(trackId)
-
 	const { duration = 0 } =
 		useLiveQuery(() => db.tracks.get(trackId), [trackId]) || {}
 
 	const [stemState] = audioState[trackId].stemState()
 
 	const trackHeader = (
-		<Box
-			sx={{
-				display: 'flex',
-				justifyContent: 'space-between',
-				mb: 1,
-				alignItems: 'center'
-			}}
-		>
-			<div style={{ display: 'flex', minWidth: '130px' }}>
-				<Typography
-					sx={{
-						fontSize: 'xs',
-						fontWeight: 'md',
-						px: '3px',
-						color: 'text.secondary'
-					}}
-				>
-					Time:
-				</Typography>
-				<TrackTime sx={{ px: '3px', flexBasis: '42px' }} trackId={trackId} />
-				<Typography
-					sx={{ fontSize: 'xs', color: 'text.secondary', whiteSpace: 'nowrap' }}
-				>
+		<div className="flex justify-between mb-2 items-center">
+			<div className="flex w-36">
+				<div className="text-xs font-medium text-default-600">Time:</div>
+				<TrackTime
+					className="px-1 text-xs text-default-600"
+					trackId={trackId}
+				/>
+				<div className="text-xs text-default-600 whitespace-nowrap">
 					/ {timeFormat(duration)}
-				</Typography>
+				</div>
 			</div>
 
 			{stemState !== 'ready' ? null : <ZoomSelectControl trackId={trackId} />}
 
 			<BeatResolutionControl trackId={trackId} />
-		</Box>
+		</div>
 	)
 
 	const trackFooter = (
-		<Box
-			sx={{
-				display: 'flex',
-				gap: 1,
-				mt: 1,
-				alignItems: 'center'
-			}}
-		>
+		<div className="flex gap-1 mt-1 items-center justify-between">
 			<MixpointControl trackId={trackId} />
-			<OffsetControl trackId={trackId} styles={{ marginLeft: 'auto' }} />
-		</Box>
-	)
-
-	const LOADER_SX = {
-		p: 0,
-		border: '1px solid',
-		borderColor: 'action.focus',
-		borderRadius: '4px',
-		borderBottom: 'none',
-		backgroundColor: 'background.body',
-		overflow: 'hidden',
-		zIndex: 1
-	}
-
-	const loaderCover = (
-		<Card
-			sx={{
-				...LOADER_SX,
-				zIndex: 2,
-				position: 'absolute',
-				inset: '261px 16px calc(100% - 339px)'
-			}}
-		>
-			<Loader style={{ margin: 'auto' }} />
-		</Card>
+			<OffsetControl trackId={trackId} className="ml-auto w-36" />
+		</div>
 	)
 
 	return (
 		<>
 			{trackHeader}
 
-			{analyzing ? loaderCover : null}
-
-			<Waveform trackId={trackId} sx={{ ...LOADER_SX, height: '78px' }} />
+			<Waveform trackId={trackId} />
 
 			<VolumeMeter trackId={trackId} />
 
diff --git a/app/components/mixes/VolumeMeter.tsx b/app/components/mixes/VolumeMeter.tsx
index 0d320cf..e53c3aa 100644
--- a/app/components/mixes/VolumeMeter.tsx
+++ b/app/components/mixes/VolumeMeter.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/joy'
 import { audioState } from '~/api/db/appState'
 import { Stem, Track } from '~/api/db/dbHandlers'
 
@@ -18,30 +17,14 @@ const VolumeMeter = ({
 	return (
 		<div
 			id={`volume-container_${trackId}${stemType || ''}`}
-			style={{ position: 'relative', height: '2px', margin: '1px' }}
+			className="relative h-0.5 m-0.25"
 		>
+			<div className="absolute top-0 left-0 w-full h-full z-1 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500" />
 			<div
 				style={{
-					position: 'absolute',
-					top: 0,
-					left: 0,
-					width: '100%',
-					height: '100%',
-					zIndex: 1,
-					background:
-						'linear-gradient(to right, rgba(30, 150, 0, .75) 30%, rgba(255, 242, 0, .75) 80%, rgba(255, 0, 0, .75) 99%)'
-				}}
-			/>
-			<Box
-				sx={{
-					position: 'absolute',
-					top: 0,
-					right: 0,
-					width: `${100 - volumeMeter * 100}%`,
-					height: '100%',
-					zIndex: 2,
-					backgroundColor: 'background.level1'
+					width: `${100 - volumeMeter * 100}%`
 				}}
+				className="bg-default-50 h-full z-10 absolute top-0 right-0"
 			/>
 		</div>
 	)
diff --git a/app/components/tracks/Controls.tsx b/app/components/tracks/Controls.tsx
index 2ded1eb..0ce58bb 100644
--- a/app/components/tracks/Controls.tsx
+++ b/app/components/tracks/Controls.tsx
@@ -1,21 +1,4 @@
-import { Icon } from '@iconify-icon/react'
-import {
-	Box,
-	Card,
-	Chip,
-	FormControl,
-	Input,
-	Link,
-	Option,
-	Radio,
-	RadioGroup,
-	Select,
-	Slider,
-	Typography,
-	radioClasses
-} from '@mui/joy'
-import { Button, ButtonGroup, SxProps } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { Key, useCallback, useEffect, useRef, useState } from 'react'
 import { audioEvents } from '~/api/audioEvents'
 import {
 	MixPrefs,
@@ -28,20 +11,43 @@ import {
 	useLiveQuery
 } from '~/api/db/dbHandlers'
 
+import {
+	Button,
+	Input,
+	Link,
+	Select,
+	SelectItem,
+	Slider,
+	Tab,
+	Tabs,
+	Tooltip
+} from '@nextui-org/react'
 import { audioState } from '~/api/db/appState'
+import {
+	EjectIcon,
+	HeadsetIcon,
+	HeadsetOffIcon,
+	NextIcon,
+	PauseIcon,
+	PlayIcon,
+	PreviousIcon,
+	ReplayIcon,
+	RevertIcon,
+	SetMixpointIcon,
+	VolumeOffIcon,
+	VolumeUpIcon
+} from '~/components/icons'
 import VolumeMeter from '~/components/mixes/VolumeMeter'
 import { convertToSecs, timeFormat } from '~/utils/tableOps'
 
-const inputText = (text: string) => {
-	return (
-		<Typography
-			textColor="#888"
-			sx={{ fontSize: 12, lineHeight: 0, cursor: 'default' }}
-		>
-			{text}
-		</Typography>
-	)
-}
+const InputText = ({
+	text,
+	className
+}: { text: string; className?: string }) => (
+	<div className={`text-default-500 text-xs whitespace-nowrap ${className}`}>
+		{text}
+	</div>
+)
 
 const NumberControl = ({
 	trackId,
@@ -50,9 +56,8 @@ const NumberControl = ({
 	toFixedVal = 1,
 	title,
 	text,
-	width = 144,
 	emitEvent,
-	styles
+	className
 }: {
 	trackId: Track['id']
 	val: number | undefined
@@ -60,161 +65,151 @@ const NumberControl = ({
 	toFixedVal?: number
 	title: string
 	text: string
-	width?: number
 	emitEvent: 'bpm' | 'offset'
-	styles?: object
+	className?: string
 }) => {
-	const [inputVal, setInputVal] = useState<string | number>(0)
+	const [inputVal, setInputVal] = useState<string>('0')
+
+	const fixedVal = useCallback(
+		(num: number) => Number(num).toFixed(toFixedVal),
+		[toFixedVal]
+	)
 
 	useEffect(
-		() => setInputVal((adjustedVal ?? val ?? 0).toFixed(toFixedVal)),
-		[adjustedVal, val, toFixedVal]
+		() => setInputVal(String(fixedVal(adjustedVal ?? val ?? 0))),
+		[adjustedVal, val, fixedVal]
 	)
 
-	const valDiff = !Number.isNaN(Number(adjustedVal)) && adjustedVal !== val
+	const valDiff =
+		adjustedVal !== undefined &&
+		val !== undefined &&
+		fixedVal(adjustedVal) !== fixedVal(val)
 
-	const adjustVal = async (newVal?: number) => {
+	const adjustVal = async (newVal?: string) => {
+		// this updates db state
 		const value = newVal ?? val
-		if (typeof value !== 'number') return
-
-		setInputVal(value)
+		if (value === undefined || Number.isNaN(Number(value))) return
 
-		audioEvents[emitEvent](trackId, value)
+		setInputVal(fixedVal(Number(value)))
+		audioEvents[emitEvent](trackId, Number(value))
 	}
 
 	const ResetValLink = () => (
-		<Link
-			underline="none"
-			onClick={() => adjustVal()}
-			color="neutral"
-			title={title}
-			disabled={!valDiff}
-			sx={{
-				fontSize: 12,
-				WebkitTextFillColor: 'divider'
-			}}
-		>
-			{inputText(text)}
-			{valDiff ? (
-				<Icon icon="ic:round-replay" height="14px" style={{ marginLeft: 2 }} />
-			) : (
-				''
-			)}
-		</Link>
+		<Tooltip color="default" content={title} size="sm" isDisabled={!valDiff}>
+			<Link
+				underline="none"
+				onClick={() => adjustVal()}
+				className={valDiff ? 'cursor-pointer' : 'cursor-default'}
+			>
+				<InputText text={text} />
+				{valDiff ? (
+					<ReplayIcon className="pl-1 text-lg text-default-600" />
+				) : (
+					''
+				)}
+			</Link>
+		</Tooltip>
 	)
 
+	const inputRef = useRef<HTMLInputElement>(null)
+
 	return (
-		<FormControl
-			style={{ ...styles }}
+		<form
 			onSubmit={e => {
 				e.preventDefault()
-				adjustVal(Number(inputVal))
-			}}
-			sx={{
-				'& div': {
-					'--Input-minHeight': '24px'
+				adjustVal(inputVal)
+				if (inputRef.current) {
+					inputRef.current.blur()
 				}
 			}}
 		>
 			<Input
-				variant="outlined"
-				startDecorator={<ResetValLink />}
+				ref={inputRef}
+				variant="bordered"
+				startContent={<ResetValLink />}
 				value={inputVal}
-				onChange={e => setInputVal(e.target.value)}
+				onValueChange={val => {
+					// this simply updates the visible component state
+					if (!Number.isNaN(val)) setInputVal(val)
+				}}
 				onBlur={() => {
-					if (Number(inputVal) !== adjustedVal) adjustVal(Number(inputVal))
+					if (fixedVal(Number(inputVal)) !== fixedVal(Number(adjustedVal)))
+						adjustVal(inputVal)
 				}}
-				sx={{
-					width,
-					borderRadius: '5px',
-					borderColor: 'action.selected',
-					'& div': {
-						borderColor: 'action.disabled'
-					},
-					'& input': {
-						textAlign: 'right',
-						fontSize: 12,
-						color: 'text.secondary'
-					},
-					backgroundColor: 'background.surface'
+				classNames={{
+					base: className,
+					inputWrapper: 'border-1 bg-default-50 rounded px-2 h-6 min-h-0',
+					input: 'text-xs text-right text-default-600'
 				}}
 			/>
-		</FormControl>
+		</form>
 	)
 }
 
 const EjectControl = ({ trackId }: { trackId: Track['id'] }) => {
 	return (
-		<Chip
-			variant="outlined"
+		<Button
+			isIconOnly
+			variant="ghost"
 			color="primary"
 			size="sm"
+			radius="sm"
 			title="Load Track"
 			onClick={() => audioEvents.ejectTrack(trackId)}
-			sx={{
-				minHeight: '21px',
-				lineHeight: 0,
-				'--Chip-radius': '5px',
-				'--Chip-paddingInline': '0.4rem',
-				'--Icon-fontSize': '16px'
-			}}
+			className="border-1 rounded h-6 border-primary-300 text-primary-700"
 		>
-			<Icon icon="material-symbols:eject-rounded" height="20px" />
-		</Chip>
+			<EjectIcon className="text-2xl" />
+		</Button>
 	)
 }
 
-const ZoomSelectControl = ({
-	trackId,
-	sx
-}: { trackId: Track['id']; sx?: SxProps }) => {
+const ZoomSelectControl = ({ trackId }: { trackId: Track['id'] }) => {
 	if (!trackId) return null
 
-	const { stemZoom } =
+	const { stemZoom = 'all' } =
 		useLiveQuery(() => getTrackPrefs(trackId), [trackId]) || {}
 
 	return (
 		<Select
-			variant="outlined"
 			size="sm"
-			title="Load Track"
-			value={stemZoom || 'all'}
-			onChange={(e, newValue) => {
-				if (newValue)
-					audioEvents.stemZoom(trackId, newValue as TrackPrefs['stemZoom'])
+			placeholder="All Stems"
+			value={stemZoom}
+			onChange={e => {
+				if (e.target.value)
+					audioEvents.stemZoom(
+						trackId,
+						e.target.value as TrackPrefs['stemZoom']
+					)
 			}}
-			sx={{
-				minHeight: '24px',
-				fontSize: 12,
-				borderRadius: '5px',
-				borderColor: 'action.selected',
-				'+ .MuiSelect-listbox': {
-					paddingTop: 0,
-					'> .MuiOption-root': {
-						fontSize: '12px',
-						marginTop: 0,
-						'--List-item-minHeight': '1rem'
-					}
-				},
-				...sx
+			classNames={{
+				mainWrapper: 'w-24 m-auto',
+				listbox: 'p-0',
+				trigger:
+					'py-0 pl-2 border-1 bg-default-50 border-default-300 rounded h-6 min-h-0',
+				popoverContent: 'p-0 text-sm',
+				value: 'text-xs text-default-600'
 			}}
 		>
-			<Option value="all">All Stems</Option>
-			{STEMS.map(stem => (
-				<Option value={stem} key={stem}>
-					{stem[0].toUpperCase() + stem.slice(1).toLowerCase()}
-				</Option>
-			))}
+			{[
+				<SelectItem key="all" value="all">
+					All Stems
+				</SelectItem>,
+				...STEMS.map(stem => (
+					<SelectItem value={stem} key={stem}>
+						{stem[0].toUpperCase() + stem.slice(1).toLowerCase()}
+					</SelectItem>
+				))
+			]}
 		</Select>
 	)
 }
 
 const BpmControl = ({
 	trackId,
-	styles
+	className
 }: {
 	trackId: Track['id']
-	styles: object
+	className: string
 }) => {
 	if (!trackId) return null
 
@@ -232,18 +227,17 @@ const BpmControl = ({
 			title="Reset BPM"
 			text="BPM:"
 			emitEvent="bpm"
-			width={115}
-			styles={styles}
+			className={className}
 		/>
 	)
 }
 
 const OffsetControl = ({
 	trackId,
-	styles
+	className
 }: {
 	trackId: TrackPrefs['id']
-	styles?: object
+	className?: string
 }) => {
 	if (!trackId) return null
 
@@ -259,88 +253,47 @@ const OffsetControl = ({
 			title="Reset Beat Offset"
 			text="Beat Offset:"
 			emitEvent="offset"
-			width={155}
-			styles={styles}
+			className={className}
 		/>
 	)
 }
 
 const BeatResolutionControl = ({
-	trackId,
-	sx
+	trackId
 }: {
 	trackId: TrackPrefs['id']
-	sx?: SxProps
 }) => {
 	if (!trackId) return null
 
-	const { beatResolution = 1 } =
+	const { beatResolution = '1:4' } =
 		useLiveQuery(() => getTrackPrefs(trackId), [trackId]) || {}
 
 	return (
-		<RadioGroup
-			orientation={'horizontal'}
-			name="beatResolution"
-			value={beatResolution}
-			variant="outlined"
-			sx={{
-				backgroundColor: 'background.surface',
-				borderColor: 'action.selected',
-				borderRadius: '5px',
-				...sx
-			}}
-			onChange={e =>
-				audioEvents.beatResolution(
-					trackId,
-					+e.target.value as TrackPrefs['beatResolution']
-				)
-			}
-		>
-			{[0.25, 0.5, 1].map(item => (
-				<Box
-					key={item}
-					sx={theme => ({
-						position: 'relative',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: 'center',
-						width: 48,
-						height: 24,
-						'&:not([data-first-child])': {
-							borderLeft: '1px solid',
-							borderColor: theme.palette.divider
-						},
-						[`&[data-first-child] .${radioClasses.action}`]: {
-							borderTopLeftRadius: '5px',
-							borderBottomLeftRadius: '5px'
-						},
-						[`&[data-last-child] .${radioClasses.action}`]: {
-							borderTopRightRadius: '5px',
-							borderBottomRightRadius: '5px'
-						}
-					})}
-				>
-					<Radio
-						value={item}
-						disableIcon
-						overlay
-						label={`${item * 100}%`}
-						variant={beatResolution === item ? 'outlined' : 'plain'}
-						color="primary"
-						sx={{
-							fontSize: 12,
-							color: 'text.secondary'
-						}}
-						slotProps={{
-							action: {
-								sx: { borderRadius: 0, transition: 'none' }
-							},
-							label: { sx: { lineHeight: 0 } }
-						}}
-					/>
-				</Box>
-			))}
-		</RadioGroup>
+		<Tooltip color="default" size="sm" content="Beat Resolution">
+			<Tabs
+				selectedKey={beatResolution}
+				aria-label="Beat Resolution"
+				variant="solid"
+				classNames={{
+					base: 'border-1 border-default-300 rounded',
+					tabList: 'rounded h-6 bg-default-50 px-0 gap-.5',
+					tab: 'rounded px-2 text-xs h-auto',
+					tabContent: 'group-data-[selected=true]:text-default-600',
+					cursor:
+						'group-data-[selected=true]:bg-transparent group-data-[selected=true]:border-1 group-data-[selected=true]:border-primary-500 group-data-[selected=true]:rounded p-2'
+				}}
+				onSelectionChange={key =>
+					audioEvents.beatResolution(
+						trackId,
+						key as TrackPrefs['beatResolution']
+					)
+				}
+			>
+				{['1:1', '1:2', '1:4'].map(item => (
+					<Tab key={item} title={item} />
+				))}
+			</Tabs>
+		</Tooltip>
 	)
 }
 
@@ -371,68 +324,62 @@ const TrackNavControl = ({ trackId = 0 }: { trackId: TrackPrefs['id'] }) => {
 	const [isPlaying] = audioState[trackId].playing()
 
 	return (
-		<ButtonGroup variant="text" color="inherit" disableRipple id="navControl">
+		<>
 			{[
 				{
 					val: 'Previous Beat Marker',
-					icon: <Icon icon="material-symbols:skip-previous" height="20px" />
+					icon: <PreviousIcon className="text-3xl" />
 				},
 				{
 					val: 'Go to Mixpoint',
-					icon: (
-						<Icon
-							icon="material-symbols:settings-backup-restore"
-							height="20px"
-						/>
-					)
+					icon: <RevertIcon className="text-xl" />
 				},
 
 				{
 					val: 'Set Mixpoint',
-					icon: <Icon icon="material-symbols:adjust-outline" height="18px" />
+					icon: <SetMixpointIcon className="text-xl" />
 				},
 				{
 					val: isPlaying ? 'Pause' : 'Play',
 					icon: isPlaying ? (
-						<Icon icon="material-symbols:pause" height="20px" />
+						<PauseIcon className="text-3xl" />
 					) : (
-						<Icon icon="material-symbols:play-arrow" height="20px" />
+						<PlayIcon className="text-3xl" />
 					)
 				},
 				{
 					val: 'Next Beat Marker',
-					icon: <Icon icon="material-symbols:skip-next" height="20px" />
+					icon: <NextIcon className="text-3xl" />
 				}
 			].map(item => {
 				const noNudge = item.val.includes('Nudge') && !isPlaying
 
 				return (
-					<Button
-						component="button"
-						onClick={e => navEvent(e.currentTarget.value)}
-						key={item.val}
-						value={item.val}
-						title={item.val}
-						disabled={noNudge}
-						sx={theme => ({
-							'--Icon-color': noNudge
-								? theme.palette.action.selected
-								: theme.palette.text.secondary,
-							borderColor: 'transparent !important'
-						})}
-					>
-						{item.icon}
-					</Button>
+					<Tooltip key={item.val} color="default" size="sm" content={item.val}>
+						<Button
+							isIconOnly
+							variant="light"
+							color="default"
+							onClick={e => navEvent(e.currentTarget.value)}
+							key={item.val}
+							value={item.val}
+							title={item.val}
+							disabled={noNudge}
+							className="align-middle rounded"
+						>
+							{item.icon}
+						</Button>
+					</Tooltip>
 				)
 			})}
-		</ButtonGroup>
+		</>
 	)
 }
 
 const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 	if (!tracks?.length) return null
 
-	const navEvent = (nav: string) => {
+	const navEvent = (nav: Key) => {
 		switch (nav) {
 			case 'Play':
 				audioEvents.play()
@@ -446,92 +393,39 @@ const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 		}
 	}
 
-	const radioSize = 28
-
 	return (
-		<RadioGroup
-			orientation={'horizontal'}
-			name="mixControl"
-			variant="outlined"
-			sx={{ height: radioSize, my: 1, backgroundColor: 'background.surface' }}
-			onClick={e => {
-				const el = e.target as HTMLInputElement
-				navEvent(el.value)
+		<Tabs
+			aria-label="Mix Controls"
+			variant="bordered"
+			classNames={{
+				base: 'border-1 border-primary-300 rounded',
+				tabList: 'rounded h-7 bg-primary-50 px-0 gap-.5',
+				tab: 'rounded px-3 h-auto',
+				tabContent:
+					'group-data-[selected=true]:text-primary-700 text-primary-700',
+				cursor:
+					'group-data-[selected=true]:bg-transparent group-data-[selected=true]:rounded p-2'
 			}}
+			defaultSelectedKey={'Pause'}
+			onSelectionChange={navEvent}
 		>
 			{[
 				{
 					val: 'Go to Mixpoint',
-					icon: (
-						<Icon
-							icon="material-symbols:settings-backup-restore"
-							height="18px"
-						/>
-					)
+					icon: <RevertIcon className="text-lg" />
 				},
 				{
 					val: 'Pause',
-					icon: <Icon icon="material-symbols:pause" height="20px" />
+					icon: <PauseIcon className="text-2xl" />
 				},
 				{
 					val: 'Play',
-					icon: <Icon icon="material-symbols:play-arrow" height="20px" />
+					icon: <PlayIcon className="text-2xl" />
 				}
 			].map(item => (
-				<Box
-					key={item.val}
-					sx={theme => {
-						return {
-							position: 'relative',
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center',
-							width: radioSize * 2,
-							height: radioSize,
-							'&:not([data-first-child])': {
-								borderLeft: '1px solid',
-								borderColor: `${theme.palette.divider} !important`,
-								height: '99%'
-							},
-							[`&[data-first-child] .${radioClasses.action}`]: {
-								borderTopLeftRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								borderBottomLeftRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								bottom: '2px',
-								left: '-1px'
-							},
-							[`&[data-last-child] .${radioClasses.action}`]: {
-								borderTopRightRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								borderBottomRightRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								height: '101%'
-							}
-						}
-					}}
-				>
-					<Radio
-						value={item.val}
-						disableIcon
-						overlay
-						label={item.icon}
-						variant="plain"
-						color="primary"
-						slotProps={{
-							root: {
-								sx: {
-									'--Icon-fontSize': `${radioSize - 8}px`
-								}
-							},
-							action: {
-								sx: {
-									borderRadius: 0,
-									transition: 'none'
-								}
-							},
-							label: { sx: { lineHeight: 0 } }
-						}}
-					/>
-				</Box>
+				<Tab key={item.val} aria-label={item.val} title={item.icon} />
 			))}
-		</RadioGroup>
+		</Tabs>
 	)
 }
 
@@ -552,40 +446,25 @@ const MixpointControl = ({ trackId }: { trackId: Track['id'] }) => {
 	}
 
 	return (
-		<FormControl
+		<form
 			onSubmit={e => {
 				e.preventDefault()
 				adjustMixpoint(mixpointVal)
 			}}
-			sx={{
-				'& div': {
-					'--Input-minHeight': '24px'
-				}
-			}}
 		>
 			<Input
-				variant="outlined"
-				startDecorator={inputText('Mixpoint:')}
+				variant="bordered"
+				startContent={<InputText text="Mixpoint:" className="cursor-default" />}
 				value={mixpointVal}
-				onChange={e => setMixpointVal(e.target.value)}
+				onValueChange={setMixpointVal}
 				onBlur={() => adjustMixpoint(mixpointVal)}
-				sx={{
-					width: 135,
-					borderRadius: '5px',
-					borderColor: 'action.selected',
-					'& div': {
-						borderColor: 'action.disabled',
-						'--Input-gap': '4px'
-					},
-					'& input': {
-						textAlign: 'right',
-						fontSize: 12,
-						color: 'text.secondary'
-					},
-					backgroundColor: 'background.surface'
+				classNames={{
+					base: 'w-32',
+					inputWrapper: 'border-1 bg-default-50 rounded px-2 h-6 min-h-0',
+					input: 'text-xs text-right text-default-600'
 				}}
 			/>
-		</FormControl>
+		</form>
 	)
 }
 
@@ -608,122 +487,81 @@ const StemControl = ({
 		setSolo(!solo)
 	}
 
-	const loaderSx = {
-		p: 0,
-		border: '1px solid',
-		borderColor: 'action.focus',
-		borderRadius: '4px',
-		borderBottom: 'none',
-		backgroundColor: 'background.body',
-		overflow: 'hidden',
-		zIndex: 1
-	}
+	const iconStyle = 'text-xl cursor-pointer text-default-500'
 
 	return (
-		<>
-			<Box
-				sx={{
-					display: 'flex',
-					gap: 1,
-					alignItems: 'center',
-					justifyContent: 'space-between'
-				}}
-			>
-				<Typography
-					sx={{
-						fontSize: 'xs',
-						fontWeight: 'md',
-						pl: '3px',
-						width: '60px'
+		<div className="flex gap-2 justify-between">
+			<div className="text-xs w-14 text-default-600">
+				{stemType[0].toUpperCase() + stemType.slice(1).toLowerCase()}
+			</div>
+			<div className="w-full">
+				<div
+					id={`zoomview-container_${trackId}_${stemType}`}
+					className="p-0 border-1 border-divider rounded bg-default-50 overflow-hidden relative z-1 h-5"
+					onClick={e => {
+						const parent = e.currentTarget.firstElementChild as HTMLElement
+						audioEvents.clickToSeek(trackId, e, parent)
 					}}
-				>
-					{stemType[0].toUpperCase() + stemType.slice(1).toLowerCase()}
-				</Typography>
-				<Box sx={{ width: '100%' }}>
-					<Card
-						id={`zoomview-container_${trackId}_${stemType}`}
-						sx={{
-							...loaderSx,
-							height: '20px',
-							pt: '3px'
-						}}
-						onClick={e => {
-							const parent = e.currentTarget.firstElementChild as HTMLElement
-							audioEvents.clickToSeek(trackId, e, parent)
-						}}
-					/>
-					<VolumeMeter trackId={trackId} stemType={stemType} />
-				</Box>
-				<Icon
-					icon={solo ? 'ic:baseline-headset-off' : 'ic:baseline-headset'}
-					height="16px"
-					title="Solo"
-					style={{
-						color: '#aaa',
-						cursor: 'pointer'
-					}}
-					onClick={() => toggleSolo()}
 				/>
-				{!volume || mute ? (
-					<Icon
-						icon="material-symbols:volume-off"
-						title="Unmute"
-						height="16px"
-						style={{ color: '#aaa', cursor: 'pointer' }}
-						onClick={() => audioEvents.stemMuteToggle(trackId, stemType, false)}
-					/>
-				) : (
-					<Icon
-						icon="material-symbols:volume-up"
-						title="Mute"
-						height="16px"
-						style={{ color: '#aaa', cursor: 'pointer' }}
-						onClick={() => audioEvents.stemMuteToggle(trackId, stemType, true)}
-					/>
-				)}
-			</Box>
-		</>
+				<VolumeMeter trackId={trackId} stemType={stemType} />
+			</div>
+			{solo ? (
+				<HeadsetOffIcon className={iconStyle} onClick={() => toggleSolo()} />
+			) : (
+				<HeadsetIcon className={iconStyle} onClick={() => toggleSolo()} />
+			)}
+			{!volume || mute ? (
+				<VolumeOffIcon
+					className={iconStyle}
+					onClick={() => audioEvents.stemMuteToggle(trackId, stemType, false)}
+				/>
+			) : (
+				<VolumeUpIcon
+					className={iconStyle}
+					onClick={() => audioEvents.stemMuteToggle(trackId, stemType, true)}
+				/>
+			)}
+		</div>
 	)
 }
 
 const StemsCrossfaders = () => (
-	<Box sx={{ my: 1, lineHeight: 1.2 }}>
+	<div className="mt-4">
 		{STEMS.map(stem => (
 			<CrossfaderControl key={stem} stemType={stem as Stem} />
 		))}
-	</Box>
+	</div>
 )
 
 const CrossfaderControl = ({ stemType }: { stemType?: Stem }) => (
 	<Slider
 		aria-label="crossfader"
+		color="foreground"
 		defaultValue={50}
-		min={0}
-		max={100}
+		radius="sm"
+		minValue={0}
+		maxValue={100}
+		fillOffset={50}
 		step={2}
-		track={false}
-		marks={[0, 50, 100].map(v => ({ value: v }))}
-		valueLabelDisplay="off"
-		variant="soft"
-		size="md"
-		onChange={(_, val) => audioEvents.crossfade(val as number, stemType)}
-		sx={{
-			padding: '15px 0',
-			'& .MuiSlider-thumb': {
-				width: '10px',
-				height: '20px',
-				borderRadius: '3px'
-			}
+		marks={[0, 50, 100].map(value => ({ value, label: '' }))}
+		hideValue
+		size="sm"
+		onChange={val => audioEvents.crossfade(val as number, stemType)}
+		classNames={{
+			base: 'mb-3',
+			filler: 'bg-transparent',
+			thumb: 'h-5 w-3 bg-primary-400 border-1 border-primary-400'
 		}}
 	/>
 )
 
-const TrackTime = ({ trackId, sx }: { trackId: Track['id']; sx?: SxProps }) => {
+const TrackTime = ({
+	trackId,
+	className
+}: { trackId: Track['id']; className?: string }) => {
 	const [time = 0] = audioState[trackId].time()
 
-	return (
-		<Typography sx={{ fontSize: 'xs', ...sx }}>{timeFormat(time)}</Typography>
-	)
+	return <div className={className}>{timeFormat(time)}</div>
 }
 
 export {
diff --git a/app/components/tracks/DrawerButton.tsx b/app/components/tracks/DrawerButton.tsx
deleted file mode 100644
index 5867518..0000000
--- a/app/components/tracks/DrawerButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Icon } from '@iconify-icon/react'
-import { Button } from '@mui/joy'
-import { appState } from '~/api/db/appState'
-
-const DrawerButton = () => {
-	const [openDrawer, setOpenDrawer] = appState.openDrawer()
-
-	const direction = openDrawer ? 'down' : 'up'
-
-	return (
-		<Button
-			variant="soft"
-			size="sm"
-			fullWidth
-			title={direction === 'up' ? 'Open drawer' : 'Close drawer'}
-			sx={{
-				borderTop: '1px solid',
-				borderColor: 'divider',
-				borderRadius: 0,
-				position: 'fixed',
-				bottom: direction === 'up' ? '0' : '80%'
-			}}
-			onClick={() => setOpenDrawer(direction === 'up' ? true : false)}
-		>
-			<Icon
-				icon={`material-symbols:keyboard-arrow-${direction}`}
-				height="24px"
-			/>
-		</Button>
-	)
-}
-
-export { DrawerButton as default }
diff --git a/app/components/tracks/Dropzone.tsx b/app/components/tracks/Dropzone.tsx
index 051b02d..7f3d472 100644
--- a/app/components/tracks/Dropzone.tsx
+++ b/app/components/tracks/Dropzone.tsx
@@ -1,10 +1,8 @@
-import { Icon } from '@iconify-icon/react'
-import { Box, Sheet, Typography } from '@mui/joy'
-import { SxProps } from '@mui/material'
 import { useState } from 'react'
 import { processTracks } from '~/api/audioHandlers'
 import { addToMix } from '~/api/db/dbHandlers'
 import { browseFile } from '~/api/fileHandlers'
+import { UploadFolderIcon } from '~/components/icons'
 
 const itemsDropped = async (items: DataTransferItemList, trackSlot?: 0 | 1) => {
 	const handleArray: (FileSystemFileHandle | FileSystemDirectoryHandle)[] = []
@@ -34,35 +32,25 @@ const itemsDropped = async (items: DataTransferItemList, trackSlot?: 0 | 1) => {
 }
 
 const Dropzone = ({
-	sx = {},
+	className,
 	trackSlot
-}: { sx?: SxProps; trackSlot?: 0 | 1 }) => {
+}: { className?: string; trackSlot?: 0 | 1 }) => {
 	const [dragOver, setDragOver] = useState(false)
 
 	return (
-		<Sheet
-			variant="soft"
+		<div
 			id="dropzone"
-			sx={{
-				border: '2px dashed #bbb',
-				padding: '10px',
-				textAlign: 'center',
-				cursor: 'pointer',
-				borderColor: dragOver ? '#30b2e9' : undefined,
-				backgroundImage: 'none',
-				backgroundColor: dragOver ? '#30b2e919' : 'background.level1',
-				borderRadius: '4px',
-				display: 'flex',
-				justifyContent: 'center',
-				alignItems: 'center',
-
-				'&:hover, &:active': {
-					borderColor: '#30b2e9',
-					backgroundColor: 'rgba(48, 178, 233, 0.1)'
-				},
-				...sx
-			}}
+			className={`border-2 border-dashed cursor-pointer border-default-500 p-2 text-center rounded flex justify-center items-center duration-0 ${
+				dragOver
+					? 'border-primary-500 bg-primary-500 bg-opacity-10'
+					: 'bg-default-50'
+			} hover:border-primary-500 active:border-primary-500 hover:bg-primary-500 hover:bg-opacity-10 active:bg-primary-500 active:bg-opacity-10 ${className}`}
 			onClick={() => browseFile(trackSlot)}
+			onKeyDown={e => {
+				if (e.key === 'Enter') {
+					browseFile(trackSlot)
+				}
+			}}
 			onDrop={e => {
 				e.preventDefault()
 				itemsDropped(e.dataTransfer.items, trackSlot)
@@ -76,24 +64,12 @@ const Dropzone = ({
 			onDragEnter={() => setDragOver(true)}
 			onDragLeave={() => setDragOver(false)}
 		>
-			<Box>
-				<Icon
-					icon="material-symbols:drive-folder-upload-outline"
-					style={{ fontSize: 38, color: '#aaa' }}
-					className="drop"
-				/>
-				<Typography
-					level="body1"
-					className="drop"
-					sx={{ color: 'text.secondary' }}
-				>
-					<b>Add Tracks</b>
-				</Typography>
-				<Typography className="drop" level="body2">
-					Drag or click here
-				</Typography>
-			</Box>
-		</Sheet>
+			<div>
+				<UploadFolderIcon className="text-default-600 text-4xl m-auto" />
+				<div className="text-md font-semibold text-default-600">Add Tracks</div>
+				<div className="text-sm text-default-600">Drag or click here</div>
+			</div>
+		</div>
 	)
 }
 
diff --git a/app/components/tracks/LeftNav.tsx b/app/components/tracks/LeftNav.tsx
deleted file mode 100644
index bbd401f..0000000
--- a/app/components/tracks/LeftNav.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { Icon } from '@iconify-icon/react'
-import {
-	Box,
-	List,
-	ListItem,
-	ListItemButton,
-	ListItemContent,
-	ListItemDecorator,
-	Typography
-} from '@mui/joy'
-
-import { appState } from '~/api/db/appState'
-import Dropzone from '~/components/tracks/Dropzone'
-
-const LeftNav = () => {
-	const [openDrawer] = appState.openDrawer()
-
-	return (
-		<Box
-			component="nav"
-			height="100%"
-			sx={{
-				display: 'flex',
-				flexDirection: 'column',
-				p: 2,
-				backgroundColor: 'background.surface',
-				borderRight: '1px solid',
-				borderColor: 'divider'
-			}}
-		>
-			<List size="sm" sx={{ '--List-item-radius': '8px' }}>
-				<ListItem nested sx={{ p: 0 }}>
-					<Box
-						sx={{
-							mb: 1,
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'space-between'
-						}}
-					>
-						<Typography
-							id="nav-list-browse"
-							textColor="neutral.500"
-							fontWeight={700}
-							sx={{
-								fontSize: '10px',
-								textTransform: 'uppercase',
-								letterSpacing: '.1rem'
-							}}
-						>
-							Browse
-						</Typography>
-					</Box>
-					<List
-						aria-labelledby="nav-list-browse"
-						sx={{
-							'& .MuiListItemButton-root': { p: '8px' }
-						}}
-					>
-						<ListItem>
-							<ListItemButton
-								variant={openDrawer ? 'soft' : undefined}
-								color={openDrawer ? 'primary' : undefined}
-							>
-								<ListItemDecorator sx={{ color: 'inherit' }}>
-									<Icon
-										icon="material-symbols:lens-outline"
-										style={{
-											fontSize: '20px',
-											color: '#2ca3d6'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>Tracks</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator sx={{ color: 'inherit' }}>
-									<img
-										src="/media/innerjoin32.png"
-										style={{ height: '22px', marginRight: '8px' }}
-										alt="Inner joined circles"
-									/>
-								</ListItemDecorator>
-								<ListItemContent>
-									<ListItemContent>Mixes</ListItemContent>
-								</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator sx={{ color: 'inherit' }}>
-									<Icon
-										icon="material-symbols:animation"
-										style={{
-											fontSize: '22px',
-											transform: 'rotate(45deg)',
-											color: '#2ca3d6'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>Sets</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-					</List>
-				</ListItem>
-				<ListItem nested sx={{ p: 0 }}>
-					<Box
-						sx={{
-							mt: 2,
-							mb: 1,
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'space-between'
-						}}
-					>
-						<Typography
-							id="nav-list-playlists"
-							textColor="neutral.500"
-							fontWeight={700}
-							sx={{
-								fontSize: '10px',
-								textTransform: 'uppercase',
-								letterSpacing: '.1rem'
-							}}
-						>
-							Playlists
-						</Typography>
-					</Box>
-					<List
-						aria-labelledby="nav-list-playlists"
-						size="sm"
-						sx={{
-							'--List-decorator-size': '32px',
-							'& .MuiListItemButton-root': { p: '8px' }
-						}}
-					>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator>
-									<Box
-										sx={{
-											width: '10px',
-											height: '10px',
-											borderRadius: '99px',
-											backgroundColor: 'primary.300'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>Electro</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator>
-									<Box
-										sx={{
-											width: '10px',
-											height: '10px',
-											borderRadius: '99px',
-											backgroundColor: 'danger.400'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>House</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator>
-									<Box
-										sx={{
-											width: '10px',
-											height: '10px',
-											borderRadius: '99px',
-											backgroundColor: 'warning.500'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>Drum & Bass</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-						<ListItem>
-							<ListItemButton>
-								<ListItemDecorator>
-									<Box
-										sx={{
-											width: '10px',
-											height: '10px',
-											borderRadius: '99px',
-											backgroundColor: 'success.400'
-										}}
-									/>
-								</ListItemDecorator>
-								<ListItemContent>Downtempo</ListItemContent>
-							</ListItemButton>
-						</ListItem>
-					</List>
-				</ListItem>
-			</List>
-
-			<Dropzone />
-		</Box>
-	)
-}
-
-export default LeftNav
diff --git a/app/components/tracks/TrackDrawer.tsx b/app/components/tracks/TrackDrawer.tsx
index 2ab74dd..14c7a75 100644
--- a/app/components/tracks/TrackDrawer.tsx
+++ b/app/components/tracks/TrackDrawer.tsx
@@ -1,29 +1,39 @@
-import { Drawer } from '@mui/material'
+import { Accordion, AccordionItem } from '@nextui-org/react'
 import { appState } from '~/api/db/appState'
 import TrackTable from '~/components//tracks/TrackTable'
-import DrawerButton from '~/components/tracks/DrawerButton'
+import { ChevronIcon } from '~/components/icons'
 
 const TrackDrawer = () => {
 	const [openDrawer, setOpenDrawer] = appState.openDrawer()
 
 	return (
-		<Drawer
-			anchor="bottom"
-			open={openDrawer}
-			onClose={() => setOpenDrawer(false)}
-			PaperProps={{
-				sx: {
-					height: '80%',
-					backgroundColor: 'background.surface',
-					marginTop: 'auto'
-				},
-				variant: 'outlined',
-				elevation: 0
-			}}
+		<Accordion
+			isCompact
+			hideIndicator
+			className="absolute bottom-0 p-0"
+			disableAnimation
 		>
-			<TrackTable />
-			<DrawerButton />
-		</Drawer>
+			<AccordionItem
+				key="track-drawer"
+				aria-label="track-drawer"
+				onPress={() => setOpenDrawer(!openDrawer)}
+				title={
+					<ChevronIcon
+						className={`text-3xl text-default-600 ${
+							openDrawer ? 'rotate-90' : '-rotate-90'
+						}`}
+					/>
+				}
+				classNames={{
+					base: 'border-t-1 border-primary-300',
+					trigger: 'p-0',
+					titleWrapper: 'flex-row justify-center',
+					content: 'mx-4'
+				}}
+			>
+				<TrackTable />
+			</AccordionItem>
+		</Accordion>
 	)
 }
 
diff --git a/app/components/tracks/TrackLoader.tsx b/app/components/tracks/TrackLoader.tsx
deleted file mode 100644
index f1b116d..0000000
--- a/app/components/tracks/TrackLoader.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { keyframes } from '@emotion/react'
-import { styled } from '@mui/joy'
-
-const delay = keyframes`
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.05);
-    -webkit-transform: scaleY(0.05);
-  }
-  20% {
-    transform: scaleY(1);
-    -webkit-transform: scaleY(1);
-  }
-`
-const LoaderWrapper = styled('div')`
-  width: 60px;
-  height: 25px;
-  text-align: center;
-  font-size: 10px;
-`
-const LoaderDiv = styled('div')`
-  height: 100%;
-  width: 8px;
-  float: left;
-  margin-left: 2px;
-  -webkit-animation: ${delay} 0.8s infinite ease-in-out;
-  animation: ${delay} 0.8s infinite ease-in-out;
-
-  &.bar1 {
-    background-color: #754fa0;
-  }
-  &.bar2 {
-    background-color: #09b7bf;
-    -webkit-animation-delay: -0.7s;
-    animation-delay: -0.7s;
-  }
-  &.bar3 {
-    background-color: #90d36b;
-    -webkit-animation-delay: -0.6s;
-    animation-delay: -0.6s;
-  }
-  &.bar4 {
-    background-color: #f2d40d;
-    -webkit-animation-delay: -0.5s;
-    animation-delay: -0.5s;
-  }
-  &.bar5 {
-    background-color: #fcb12b;
-    -webkit-animation-delay: -0.4s;
-    animation-delay: -0.4s;
-  }
-  &.bar6 {
-    background-color: #ed1b72;
-    -webkit-animation-delay: -0.3s;
-    animation-delay: -0.3s;
-  }
-`
-
-const TrackLoader = (props: {
-	className?: string
-	style?: Record<string, unknown>
-}): JSX.Element => (
-	<LoaderWrapper
-		style={{ height: '3px', ...props.style }}
-		className={`loader ${props.className}`}
-	>
-		<LoaderDiv className="bar1" />
-		<LoaderDiv className="bar2" />
-		<LoaderDiv className="bar3" />
-		<LoaderDiv className="bar4" />
-		<LoaderDiv className="bar5" />
-		<LoaderDiv className="bar6" />
-	</LoaderWrapper>
-)
-
-export default TrackLoader
diff --git a/app/components/tracks/TrackTable.tsx b/app/components/tracks/TrackTable.tsx
index 2e16a8a..efe9156 100644
--- a/app/components/tracks/TrackTable.tsx
+++ b/app/components/tracks/TrackTable.tsx
@@ -1,38 +1,56 @@
-import { Box } from '@mui/joy'
 import {
+	Button,
+	Dropdown,
+	DropdownItem,
+	DropdownMenu,
+	DropdownTrigger,
+	Input,
+	Link,
+	Pagination,
+	Select,
+	SelectItem,
 	Table,
 	TableBody,
 	TableCell,
-	TableContainer,
-	TablePagination,
+	TableColumn,
+	TableColumnProps,
+	TableHeader,
 	TableRow
-} from '@mui/material'
-import { useState } from 'react'
-import { appState } from '~/api/db/appState'
-import { db, getPrefs, useLiveQuery } from '~/api/db/dbHandlers'
-import Dropzone, { itemsDropped } from '~/components/tracks/Dropzone'
-import LeftNav from '~/components/tracks/LeftNav'
-import TrackLoader from '~/components/tracks/TrackLoader'
+} from '@nextui-org/react'
+import moment from 'moment'
+import { Key, ReactNode, useCallback, useMemo, useState } from 'react'
+import { audioEvents } from '~/api/audioEvents'
+import { analyzeTracks } from '~/api/audioHandlers'
+import { appState, setAppState, setModalState } from '~/api/db/appState'
 import {
-	EnhancedTableHead,
-	EnhancedTableToolbar
-} from '~/components/tracks/tableHeader'
-import TableRows from '~/components/tracks/tableRows'
+	Track,
+	addToMix,
+	db,
+	getDirtyTracks,
+	getPrefs,
+	removeTracks,
+	setPrefs,
+	useLiveQuery
+} from '~/api/db/dbHandlers'
+import { browseFile } from '~/api/fileHandlers'
+import { ProgressBar } from '~/components/Loader'
 import {
-	changePage,
-	changeRows,
-	formatMinutes,
-	getComparator,
-	isSelected,
-	selectAll,
-	sort
-} from '~/utils/tableOps'
+	AddIcon,
+	AnalyzeIcon,
+	CheckIcon,
+	ChevronIcon,
+	SearchIcon
+} from '~/components/icons'
+import Dropzone, { itemsDropped } from '~/components/tracks/Dropzone'
+import { formatMinutes, getComparator } from '~/utils/tableOps'
 
 const TrackTable = () => {
 	// Re-render when page or selection changes
 	const [page] = appState.page()
 	const [rowsPerPage] = appState.rowsPerPage()
 	const [selected] = appState.selected()
+	const [analyzingTracks] = appState.analyzing()
+	const selectedCount = selected.size
 
 	// Re-render when search query changes
 	const [search] = appState.search()
@@ -43,7 +61,15 @@ const TrackTable = () => {
 	// Allow drag & drop files / folders into the table
 	const [dragOver, setDragOver] = useState(false)
 
+	// Retrieve sort state from database
+	const {
+		sortDirection = 'descending',
+		sortColumn = 'lastModified',
+		visibleColumns = new Set<string>()
+	} = useLiveQuery(() => getPrefs('user')) || {}
+
 	// Monitor db for track updates (and filter using searchquery if present)
+	const trackCount = useLiveQuery(() => db.tracks.count())
 	const tracks = useLiveQuery(
 		() =>
 			db.tracks
@@ -60,114 +86,474 @@ const TrackTable = () => {
 		null
 	)
 
-	// Retrieve sort state from database
-	const { sortDirection = 'desc', sortColumn = 'lastModified' } =
-		useLiveQuery(() => getPrefs('user')) || {}
+	const sortedTracks = useMemo(
+		// @ts-ignore this is a tough one
+		() => [...(tracks || [])].sort(getComparator(sortDirection, sortColumn)),
+		[tracks, sortDirection, sortColumn]
+	)
 
-	// Avoid a layout jump when reaching the last page with empty rows
-	const emptyRows =
-		page > 0 ? Math.max(0, (1 + page) * rowsPerPage - (tracks?.length || 0)) : 0
+	const pageTracks = useMemo(() => {
+		const start = (page - 1) * rowsPerPage
+		const end = start + rowsPerPage
+		return sortedTracks.slice(start, end)
+	}, [page, sortedTracks, rowsPerPage])
 
-	return (
-		tracks && (
-			<Box
-				sx={{
-					display: 'grid',
-					gridTemplateColumns: 'minmax(64px, 200px) minmax(450px, 1fr)',
-					height: '100%'
-				}}
-			>
-				<LeftNav />
-
-				<Box component="main" sx={{ p: 2 }}>
-					<Box
-						id="track-table"
-						sx={{
-							border: '1px solid',
-							borderRadius: '4px',
-							overflow: 'auto',
-							borderColor: dragOver ? '#30b2e9' : 'action.selected',
-							backgroundColor: 'background.surface'
-						}}
-						onDrop={e => {
-							e.preventDefault()
-							itemsDropped(e.dataTransfer.items)
-							setDragOver(false)
+	const dirtyTracks = useLiveQuery(() => getDirtyTracks(), [], [])
+
+	const pages = Math.ceil((tracks?.length || 1) / rowsPerPage)
+
+	const analyzeButton = (t: Track) => (
+		<Button
+			variant="ghost"
+			color="secondary"
+			className="border-1 rounded h-6 px-2 gap-1 border-secondary-300 text-secondary-700"
+			startContent={<AnalyzeIcon className="text-lg" />}
+			size="sm"
+			onClick={() => analyzeTracks([t])}
+		>
+			Analyze
+		</Button>
+	)
+
+	const addToMixHandler = async (t: Track) => {
+		const { tracks = [] } = await getPrefs('mix')
+
+		await addToMix(t)
+
+		// if this is the first track in the mix, leave the drawer open
+		if (!tracks.length) setAppState.openDrawer(true)
+	}
+
+	const AddToMixButton = useCallback(
+		({ track }: { track: Track }) => {
+			const { tracks = [] } = useLiveQuery(() => getPrefs('mix')) || {}
+
+			const isInMix = tracks.includes(track.id)
+
+			// Prevent user from adding a new track before previous added track finishes analyzing
+			const isBeingAnalyzed = tracks.some(id => analyzingTracks.has(id))
+
+			return (
+				<Button
+					size="sm"
+					radius="sm"
+					variant="ghost"
+					color="primary"
+					isDisabled={isBeingAnalyzed}
+					className={`border-1 rounded h-6 px-2 gap-1 ${
+						isInMix
+							? 'border-success-300 text-success-700'
+							: 'border-primary-300 text-primary-700'
+					}`}
+					startContent={
+						isInMix ? (
+							<CheckIcon className="text-lg" />
+						) : (
+							<AddIcon className="text-lg" />
+						)
+					}
+					onClick={() => {
+						!isInMix ? addToMixHandler(track) : audioEvents.ejectTrack(track.id)
+					}}
+				>
+					{`Add${isInMix ? 'ed' : ' to Mix'}`}
+				</Button>
+			)
+		},
+		[analyzingTracks, addToMixHandler]
+	)
+
+	const BpmFormatter = useCallback(
+		(track: Track) => {
+			return track.bpm ? (
+				<div className="pl-1">{track.bpm.toFixed(0)}</div>
+			) : analyzingTracks.size > 1 || analyzingTracks.has(track.id) ? (
+				<div className="relative w-1/2 top-1/2 -mt-0.5 ml-1">
+					<ProgressBar />
+				</div>
+			) : (
+				analyzeButton(track)
+			)
+		},
+		[analyzingTracks, analyzeButton]
+	)
+
+	// Build table columns
+	const columns = useMemo(
+		(): {
+			dbKey: string
+			label: string
+			align: TableColumnProps<string>['align']
+			width: TableColumnProps<string>['width']
+			formatter: (t: Track) => ReactNode
+		}[] => [
+			{
+				dbKey: 'name',
+				label: 'Track name',
+				align: 'start',
+				width: '45%',
+				formatter: track =>
+					track.name?.replace(/\.[^/.]+$/, '') || 'Track name not found'
+			},
+			{
+				dbKey: 'action',
+				label: '',
+				align: 'center',
+				width: '15%',
+				formatter: track => <AddToMixButton track={track} />
+			},
+			{
+				dbKey: 'bpm',
+				label: 'BPM',
+				align: 'center',
+				width: '10%',
+				formatter: BpmFormatter
+			},
+			{
+				dbKey: 'duration',
+				label: 'Duration',
+				align: 'center',
+				width: '10%',
+				formatter: track => (
+					<div className="pl-3">
+						{track.duration && formatMinutes(track.duration / 60)}
+					</div>
+				)
+			},
+			{
+				dbKey: 'mixpoints',
+				label: 'Mixes',
+				align: 'center',
+				width: '5%',
+				formatter: track => (
+					<div className="pl-3">{track.mixpoints?.length || 0}</div>
+				)
+			},
+			{
+				dbKey: 'sets',
+				label: 'Sets',
+				align: 'center',
+				width: '5%',
+				formatter: track => (
+					<div className="pl-2">{track.sets?.length || 0}</div>
+				)
+			},
+			{
+				dbKey: 'lastModified',
+				label: 'Updated',
+				align: 'end',
+				width: '10%',
+				formatter: track => (
+					<div className="whitespace-nowrap">
+						{moment(track.lastModified).fromNow()}
+					</div>
+				)
+			}
+		],
+		[BpmFormatter, AddToMixButton]
+	)
+
+	const headerColumns = useMemo(() => {
+		if (!visibleColumns.size) return columns
+
+		return columns.filter(column =>
+			Array.from(visibleColumns).includes(column.dbKey)
+		)
+	}, [visibleColumns, columns])
+
+	const showRemoveTracksModal = () =>
+		setModalState({
+			openState: true,
+			headerText: 'Are you sure?',
+			bodyText: 'Removing tracks here will not delete them from your computer.',
+			confirmColor: 'warning',
+			confirmText: `Remove ${selectedCount} track${
+				selectedCount > 1 ? 's' : ''
+			}`,
+			onConfirm: async () => {
+				setModalState.openState(false)
+				for (const id of selected) await audioEvents.ejectTrack(Number(id))
+				await removeTracks([...selected].map(Number))
+				setAppState.selected(new Set())
+			},
+			onCancel: async () => {
+				setModalState.openState(false)
+			}
+		})
+
+	const showAnalyzeDirtyModal = () =>
+		setModalState({
+			openState: true,
+			headerText: 'Are you sure?',
+			bodyText: `This will analyze ${dirtyTracks.length} track${
+				dirtyTracks.length > 1 ? 's' : ''
+			}.`,
+			confirmColor: 'success',
+			confirmText: `Analyze track${dirtyTracks.length > 1 ? 's' : ''}`,
+			onConfirm: async () => {
+				setModalState.openState(false)
+				analyzeTracks(dirtyTracks)
+			},
+			onCancel: async () => {
+				setModalState.openState(false)
+			}
+		})
+
+	const currentPageTracks = (): Set<Key> => {
+		const startIndex = (page - 1) * Number(rowsPerPage)
+		const endIndex = startIndex + Number(rowsPerPage)
+		const visibleTracks = sortedTracks.slice(startIndex, endIndex)
+		return new Set(visibleTracks.map(t => String(t.id)))
+	}
+
+	const tableHeader = (
+		<div className="flex flex-col gap-4 mb-2">
+			<div className="flex justify-between gap-3 items-end">
+				<div className="flex flex-start gap-3">
+					<Input
+						isClearable
+						classNames={{
+							base: 'w-full',
+							inputWrapper: 'border-1 bg-default-50 rounded h-3'
 						}}
-						onDragOver={e => {
-							e.stopPropagation()
-							e.preventDefault()
-							setDragOver(true)
+						placeholder="Search"
+						size="sm"
+						startContent={<SearchIcon className="text-default-500 text-xl" />}
+						value={String(search)}
+						variant="bordered"
+						onClear={() => setAppState.search('')}
+						onValueChange={value => {
+							if (value) {
+								setAppState.search(value)
+								setAppState.page(1)
+							} else {
+								setAppState.search('')
+							}
 						}}
-						onDragEnter={() => setDragOver(true)}
-						onDragLeave={() => setDragOver(false)}
-					>
-						<EnhancedTableToolbar numSelected={selected.length} />
-						<TableContainer>
-							<Table
-								aria-labelledby="tableTitle"
-								size="small"
-								padding="checkbox"
+					/>
+					<Dropdown>
+						<DropdownTrigger className="bg-default/30">
+							<Button
+								endContent={
+									<ChevronIcon className="text-xl rotate-90 text-foreground min-w-unit-5" />
+								}
+								size="sm"
+								radius="sm"
+								disableRipple
+								aria-label="Column selector"
+								className="text-default-600 pl-6 pr-5 rounded"
 							>
-								<EnhancedTableHead
-									numSelected={selected.length}
-									sortDirection={sortDirection}
-									sortColumn={sortColumn}
-									onSelectAllClick={selectAll}
-									onRequestSort={sort}
-									rowCount={tracks?.length || 0}
-								/>
-								<TableBody>
-									{[...tracks]
-										.sort(
-											// @ts-ignore can't figure this one out
-											getComparator(sortDirection, sortColumn)
-										)
-										.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-										.map((row, index) => {
-											// row.id is the track/mix/set id
-											const isItemSelected = isSelected(row.id)
-
-											return (
-												<TableRows
-													key={row.id}
-													row={row}
-													isItemSelected={isItemSelected}
-												/>
-											)
-										})}
-									{emptyRows === 0 ? null : (
-										<TableRow
-											style={{
-												height: 37 * emptyRows
-											}}
-										>
-											<TableCell colSpan={7} />
-										</TableRow>
-									)}
-								</TableBody>
-							</Table>
-						</TableContainer>
-						{tracks.length ? null : processing ? (
-							<TrackLoader style={{ margin: '50px auto' }} />
-						) : (
-							<div style={{ margin: 'auto', padding: '20px 20px 0' }}>
-								<Dropzone />
-							</div>
-						)}
-						<TablePagination
-							rowsPerPageOptions={[5, 10, 25]}
-							component="div"
-							count={tracks.length || 0}
-							rowsPerPage={rowsPerPage}
-							page={page}
-							onPageChange={changePage}
-							onRowsPerPageChange={changeRows}
+								Columns
+							</Button>
+						</DropdownTrigger>
+						<DropdownMenu
+							disallowEmptySelection
+							aria-label="Table columns"
+							closeOnSelect={false}
+							selectedKeys={visibleColumns.size > 2 ? visibleColumns : 'all'}
+							selectionMode="multiple"
+							onSelectionChange={keys =>
+								setPrefs('user', {
+									visibleColumns: new Set(['name', 'action', ...keys])
+								})
+							}
+						>
+							{columns
+								.filter(
+									column => column.dbKey !== 'name' && column.dbKey !== 'action'
+								)
+								.map(column => (
+									<DropdownItem key={column.dbKey}>{column.label}</DropdownItem>
+								))}
+						</DropdownMenu>
+					</Dropdown>
+				</div>
+				<Button
+					size="sm"
+					radius="sm"
+					variant="light"
+					color="primary"
+					disableRipple
+					aria-label={selectedCount ? 'Remove Track' : 'Add Tracks'}
+					onClick={() =>
+						selectedCount ? showRemoveTracksModal() : browseFile()
+					}
+					className="border-1 border-primary-300 rounded text-primary-700 font-semibold gap-1"
+					startContent={
+						<AddIcon
+							className={`text-lg ${selectedCount ? 'rotate-45' : ''}`}
 						/>
-					</Box>
-				</Box>
-			</Box>
-		)
+					}
+				>
+					{selectedCount ? 'Remove Tracks' : 'Add Tracks'}
+				</Button>
+			</div>
+			<div className="flex justify-between items-center">
+				<span className="text-default-600 text-small">
+					Total {tracks?.length} tracks
+					{!dirtyTracks.length ? null : (
+						<Link
+							onClick={() => showAnalyzeDirtyModal()}
+							color="secondary"
+							className="ml-1 text-sm cursor-pointer"
+						>
+							(
+							{analyzingTracks.size
+								? `${dirtyTracks.length} to analyze`
+								: `click to analyze ${dirtyTracks.length} track${
+										dirtyTracks.length > 1 ? 's' : ''
+								  }`}
+							)
+						</Link>
+					)}
+				</span>
+
+				<Select
+					labelPlacement="outside-left"
+					label="Rows per page"
+					placeholder="10"
+					size="sm"
+					onChange={e => {
+						setAppState.rowsPerPage(Number(e.target.value))
+						setAppState.page(1)
+					}}
+					classNames={{
+						base: 'w-min',
+						mainWrapper: 'w-16',
+						listbox: 'p-0 bg-default/30',
+						trigger: 'bg-default/30 rounded',
+						popoverContent: 'p-0',
+						label:
+							'text-sm text-default-600 whitespace-nowrap self-center w-3/4'
+					}}
+				>
+					{['10', '25', '50'].map(rows => (
+						<SelectItem key={rows} value={rows}>
+							{rows}
+						</SelectItem>
+					))}
+				</Select>
+			</div>
+		</div>
+	)
+
+	const tableBody = (
+		<Table
+			isCompact
+			removeWrapper
+			aria-label="Track table"
+			color="default"
+			checkboxesProps={{
+				classNames: {
+					wrapper: 'rounded'
+				}
+			}}
+			classNames={{
+				wrapper: ['max-h-[382px]', 'max-w-3xl'],
+				thead: 'rounded',
+				th: [
+					'text-default-600',
+					'text-sm',
+					'rounded',
+					dragOver ? 'bg-primary-500 bg-opacity-10' : 'bg-default/30'
+				],
+				tr: ['rounded border-b-1 border-divider'],
+				tbody: dragOver ? 'bg-primary-500 bg-opacity-10' : ''
+			}}
+			selectedKeys={selected}
+			selectionMode="multiple"
+			sortDescriptor={{ column: sortColumn, direction: sortDirection }}
+			onSelectionChange={keys =>
+				setAppState.selected(keys === 'all' ? currentPageTracks() : keys)
+			}
+			onSortChange={({ column, direction }) =>
+				setPrefs('user', { sortDirection: direction, sortColumn: column })
+			}
+			onDrop={e => {
+				e.preventDefault()
+				itemsDropped(e.dataTransfer.items)
+				setDragOver(false)
+			}}
+			onDragOver={e => {
+				e.stopPropagation()
+				e.preventDefault()
+				setDragOver(true)
+			}}
+			onDragEnter={() => setDragOver(true)}
+			onDragLeave={() => setDragOver(false)}
+		>
+			<TableHeader columns={headerColumns}>
+				{column => (
+					<TableColumn
+						key={column.dbKey}
+						align={column.align}
+						width={column.width}
+						allowsSorting={column.dbKey !== 'actions'}
+					>
+						{column.label}
+					</TableColumn>
+				)}
+			</TableHeader>
+
+			<TableBody
+				emptyContent={
+					// this accounts for clearing the search box, where we have zero tracks and need to reload table without showing dropzone
+					!tracks || processing || (!tracks.length && trackCount && !search) ? (
+						<div className="relative w-1/2 top-1/2 -mt-0.5 m-auto">
+							<ProgressBar />
+						</div>
+					) : search ? (
+						'No tracks found'
+					) : (
+						<Dropzone className="h-full mt-3" />
+					)
+				}
+			>
+				{pageTracks.map(track => (
+					<TableRow key={track.id}>
+						{headerColumns.map(column => (
+							<TableCell key={column?.dbKey}>
+								{column?.formatter(track)}
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+
+	const tableFooter = !tracks?.length ? null : (
+		<div className="mt-3 flex justify-between items-center">
+			<Pagination
+				showControls
+				classNames={{
+					base: 'pl-0',
+					item: 'text-md text-default-600 w-7 h-7',
+					prev: 'w-7 h-7',
+					next: 'w-7 h-7',
+					cursor:
+						'bg-transparent border-1 border-primary-300 text-transparent rounded w-7 h-7'
+				}}
+				isCompact
+				page={page}
+				total={pages}
+				variant="light"
+				onChange={pageNum => setAppState.page(pageNum)}
+			/>
+			<span className="text-small text-default-500">
+				{selectedCount === tracks.length
+					? 'All tracks selected'
+					: `${selectedCount} of ${tracks.length} tracks selected`}
+			</span>
+		</div>
+	)
+
+	return (
+		<div className="p-4 bg-primary-50 border-1 border-divider rounded h-fit">
+			{tableHeader}
+			{tableBody}
+			{tableFooter}
+		</div>
 	)
 }
 
diff --git a/app/components/tracks/tableColumns.tsx b/app/components/tracks/tableColumns.tsx
deleted file mode 100644
index 75f4ceb..0000000
--- a/app/components/tracks/tableColumns.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { Icon } from '@iconify-icon/react'
-import { Box, Chip } from '@mui/joy'
-import { TableCellProps } from '@mui/material'
-import { SxProps } from '@mui/material/styles'
-import moment from 'moment'
-import { audioEvents } from '~/api/audioEvents'
-import { analyzeTracks } from '~/api/audioHandlers'
-import { appState, setAppState } from '~/api/db/appState'
-import { Track, addToMix, getPrefs, useLiveQuery } from '~/api/db/dbHandlers'
-import TrackLoader from '~/components/tracks/TrackLoader'
-import { formatMinutes, rowClick } from '~/utils/tableOps'
-
-const createColumnDefinitions = (): {
-	dbKey: keyof Track
-	label: string
-	padding: TableCellProps['padding']
-	align: TableCellProps['align']
-	width: TableCellProps['width']
-	sx?: SxProps
-	onClick?: (t: Track) => void
-	formatter: (t: Track) => string | React.ReactNode
-}[] => {
-	const analyzeButton = (t: Track) => (
-		<Chip
-			variant="outlined"
-			startDecorator={<Icon icon="material-symbols:graphic-eq" height="16px" />}
-			size="sm"
-			onClick={() => analyzeTracks([t])}
-		>
-			Analyze
-		</Chip>
-	)
-
-	const addToMixHandler = async (t: Track) => {
-		const { tracks = [] } = await getPrefs('mix')
-
-		await addToMix(t)
-
-		// if this is the first track in the mix, leave the drawer open
-		if (!tracks.length) setAppState.openDrawer(true)
-	}
-
-	const AddToMixButton = ({ track }: { track: Track }) => {
-		const [analyzingTracks] = appState.analyzing()
-
-		const { tracks = [] } = useLiveQuery(() => getPrefs('mix')) || {}
-
-		const isInMix = tracks.includes(track.id)
-
-		// Prevent user from adding a new track before previous added track finishes analyzing
-		const isBeingAnalyzed = tracks.some(id => analyzingTracks.includes(id))
-
-		return (
-			<Chip
-				variant="outlined"
-				className={isInMix ? 'visible' : 'visibleOnHover'}
-				startDecorator={
-					isInMix ? (
-						<Icon icon="material-symbols:check" height="16px" />
-					) : (
-						<Icon icon="material-symbols:add" height="16px" />
-					)
-				}
-				color={isInMix ? 'success' : 'primary'}
-				size="sm"
-				disabled={isBeingAnalyzed}
-				sx={{
-					maxHeight: '30px',
-					alignSelf: 'center'
-				}}
-				onClick={() => {
-					!isInMix ? addToMixHandler(track) : audioEvents.ejectTrack(track.id)
-				}}
-			>
-				{`Add${isInMix ? 'ed' : ' to Mix'}`}
-			</Chip>
-		)
-	}
-
-	const BpmFormatter = (t: Track) => {
-		const [analyzingTracks] = appState.analyzing()
-
-		return (
-			t.bpm?.toFixed(0) ||
-			(!analyzingTracks.some(id => id === t.id) ? (
-				analyzeButton(t)
-			) : (
-				<TrackLoader style={{ margin: 'auto', height: '15px' }} />
-			))
-		)
-	}
-
-	return [
-		{
-			dbKey: 'name',
-			label: 'Track name',
-			align: 'left',
-			padding: 'none',
-			width: '60%',
-			formatter: t => (
-				<Box
-					sx={{
-						display: 'flex',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						fontSize: '.85rem'
-					}}
-				>
-					<div
-						onClick={event => rowClick(event, t.id)}
-						onKeyUp={event => rowClick(event, t.id)}
-					>
-						{t.name?.replace(/\.[^/.]+$/, '') || 'Track name not found'}
-					</div>
-					<AddToMixButton track={t} />
-				</Box>
-			)
-		},
-		{
-			dbKey: 'bpm',
-			label: 'BPM',
-			align: 'center',
-			padding: 'normal',
-			width: '10%',
-			formatter: BpmFormatter
-		},
-		{
-			dbKey: 'duration',
-			label: 'Duration',
-			align: 'center',
-			padding: 'normal',
-			width: '10%',
-			formatter: t => t.duration && formatMinutes(t.duration / 60)
-		},
-		{
-			dbKey: 'mixpoints',
-			label: 'Mixes',
-			align: 'center',
-			padding: 'normal',
-			width: '5%',
-			formatter: t => ''
-		},
-		{
-			dbKey: 'sets',
-			label: 'Sets',
-			align: 'center',
-			padding: 'normal',
-			width: '5%',
-			formatter: t => ''
-		},
-		{
-			dbKey: 'lastModified',
-			label: 'Updated',
-			align: 'right',
-			padding: 'normal',
-			width: '10%',
-			sx: { whiteSpace: 'nowrap' },
-			formatter: t => moment(t.lastModified).fromNow()
-		}
-	]
-}
-
-export { createColumnDefinitions }
diff --git a/app/components/tracks/tableHeader.tsx b/app/components/tracks/tableHeader.tsx
deleted file mode 100644
index 5748703..0000000
--- a/app/components/tracks/tableHeader.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { Icon } from '@iconify-icon/react'
-import {
-	Button,
-	Card,
-	Checkbox,
-	FormControl,
-	IconButton,
-	Input,
-	Link,
-	Typography
-} from '@mui/joy'
-import {
-	TableCell,
-	TableHead,
-	TableRow,
-	TableSortLabel,
-	Toolbar
-} from '@mui/material'
-import { alpha } from '@mui/material/styles'
-import { visuallyHidden } from '@mui/utils'
-import { ChangeEvent, MouseEvent, useMemo } from 'react'
-import { audioEvents } from '~/api/audioEvents'
-import { analyzeTracks } from '~/api/audioHandlers'
-import { appState, setModalState } from '~/api/db/appState'
-import {
-	Track,
-	UserPrefs,
-	db,
-	getDirtyTracks,
-	removeTracks,
-	useLiveQuery
-} from '~/api/db/dbHandlers'
-import { browseFile } from '~/api/fileHandlers'
-import { createColumnDefinitions } from '~/components/tracks/tableColumns'
-
-// Toolbar is on top of the table, includes search, info, and button bar
-const EnhancedTableToolbar = (props: { numSelected: number }) => {
-	const [search, setSearch] = appState.search()
-	const [selected, setSelected] = appState.selected()
-
-	const { numSelected } = props
-
-	const trackCount = useLiveQuery(() => db.tracks.count())
-	const dirtyTracks = useLiveQuery(() => getDirtyTracks(), [], [])
-
-	const showRemoveTracksModal = () =>
-		setModalState({
-			openState: true,
-			headerText: 'Are you sure?',
-			bodyText: 'Removing tracks here will not delete them from your computer.',
-			confirmColor: 'danger',
-			confirmText: `Remove ${numSelected} track${numSelected > 1 ? 's' : ''}`,
-			onConfirm: async () => {
-				setModalState.openState(false)
-				for (const id of selected) await audioEvents.ejectTrack(id)
-				await removeTracks(selected as number[])
-				setSelected([])
-			},
-			onCancel: async () => {
-				setModalState.openState(false)
-			}
-		})
-
-	const showAnalyzeDirtyModal = () =>
-		setModalState({
-			openState: true,
-			headerText: 'Are you sure?',
-			bodyText: `This will analyze ${dirtyTracks.length} track${
-				dirtyTracks.length > 1 ? 's' : ''
-			}.`,
-			confirmColor: 'success',
-			confirmText: `Analyze track${dirtyTracks.length > 1 ? 's' : ''}`,
-			onConfirm: async () => {
-				setModalState.openState(false)
-				analyzeTracks(dirtyTracks)
-			},
-			onCancel: async () => {
-				setModalState.openState(false)
-			}
-		})
-
-	return (
-		<Toolbar
-			sx={{
-				pl: { sm: 2 },
-				pr: { xs: 1, sm: 2 },
-				display: 'flex',
-				flexDirection: 'row',
-				justifyContent: 'space-between',
-				alignItems: 'center',
-				gridColumn: '1 / -1',
-				borderBottom: '1px solid',
-				borderColor: 'divider',
-				position: 'sticky',
-				...(numSelected > 0 && {
-					backgroundColor: theme =>
-						alpha(
-							theme.palette.primary.main,
-							theme.palette.action.activatedOpacity
-						)
-				})
-			}}
-		>
-			{numSelected > 0 ? (
-				<Typography component="div">{numSelected} selected</Typography>
-			) : (
-				<Typography id="tableTitle" component="div" sx={{ flexBasis: '200px' }}>
-					{trackCount} Track{trackCount === 1 ? '' : 's'}
-					{!dirtyTracks.length ? null : (
-						<Link
-							onClick={() => showAnalyzeDirtyModal()}
-							variant="plain"
-							level="body-md"
-							underline="none"
-							sx={{ p: '2px 6px', ml: 1 }}
-						>
-							{dirtyTracks.length} to analyze
-						</Link>
-					)}
-				</Typography>
-			)}
-			<FormControl
-				sx={{
-					display: 'flex',
-					flexDirection: 'row'
-				}}
-			>
-				<Input
-					variant="soft"
-					placeholder="Search..."
-					startDecorator={<Icon icon="material-symbols:search" height="20px" />}
-					onChange={e => setSearch(e.target.value)}
-					value={search}
-					endDecorator={
-						!search ? null : (
-							<IconButton
-								variant="outlined"
-								size="sm"
-								color="neutral"
-								onClick={() => setSearch('')}
-							>
-								<Icon icon="material-symbols:clear" height="20px" />
-							</IconButton>
-						)
-					}
-					size="sm"
-					sx={{
-						border: '1px solid',
-						borderColor: 'action.focus',
-						fontWeight: 'thin',
-						flexBasis: '500px',
-						mx: 2,
-						display: {
-							xs: 'none',
-							sm: 'flex'
-						}
-					}}
-				/>
-			</FormControl>
-			{numSelected === 0 ? (
-				<Button
-					size="sm"
-					variant="outlined"
-					onClick={() => browseFile()}
-					sx={{
-						whiteSpace: 'nowrap'
-					}}
-				>
-					<Icon icon="material-symbols:add" height="20px" />
-					Add Track
-				</Button>
-			) : (
-				<IconButton
-					variant="plain"
-					title="Remove tracks"
-					size="sm"
-					color="neutral"
-					onClick={() => showRemoveTracksModal()}
-				>
-					<Icon icon="ri:recycle-line" height="20px" />
-				</IconButton>
-			)}
-		</Toolbar>
-	)
-}
-
-// Table header includes column headers, select all, and sort buttons
-const EnhancedTableHead = (props: {
-	numSelected: number
-	onRequestSort: (event: MouseEvent<unknown>, property: keyof Track) => void
-	onSelectAllClick: (event: ChangeEvent<HTMLInputElement>) => void
-	sortDirection: UserPrefs['sortDirection']
-	sortColumn: UserPrefs['sortColumn']
-	rowCount: number
-}) => {
-	const {
-		onSelectAllClick,
-		sortDirection,
-		sortColumn,
-		numSelected,
-		rowCount,
-		onRequestSort
-	} = props
-
-	// Build table columns (once)
-	const columnDefs = useMemo(() => createColumnDefinitions(), [])
-
-	const createSort =
-		(property: keyof Track) => (event: MouseEvent<unknown>) => {
-			onRequestSort(event, property)
-		}
-
-	return (
-		<TableHead>
-			<TableRow>
-				<TableCell padding="none" sx={{ padding: '7px 12px 0 16px' }}>
-					<Checkbox
-						color="primary"
-						indeterminate={numSelected > 0 && numSelected < rowCount}
-						checked={rowCount > 0 && numSelected === rowCount}
-						onChange={onSelectAllClick}
-						title="Select all"
-					/>
-				</TableCell>
-				{columnDefs.map((column, i) => (
-					<TableCell
-						key={column.dbKey}
-						align={column.align}
-						padding={column.padding}
-						width={column.width}
-						sx={{
-							...column.sx,
-							padding: column.align === 'center' ? '6px 0 0 28px' : ''
-						}}
-						sortDirection={sortColumn === column.dbKey ? sortDirection : false}
-					>
-						<TableSortLabel
-							active={sortColumn === column.dbKey}
-							direction={sortColumn === column.dbKey ? sortDirection : 'asc'}
-							onClick={createSort(column.dbKey)}
-						>
-							{column.label}
-							{sortColumn === column.dbKey ? (
-								<Card component="span" sx={visuallyHidden}>
-									{sortDirection === 'desc'
-										? 'sorted descending'
-										: 'sorted ascending'}
-								</Card>
-							) : null}
-						</TableSortLabel>
-					</TableCell>
-				))}
-			</TableRow>
-		</TableHead>
-	)
-}
-
-export { EnhancedTableHead, EnhancedTableToolbar }
diff --git a/app/components/tracks/tableRows.tsx b/app/components/tracks/tableRows.tsx
deleted file mode 100644
index 79caece..0000000
--- a/app/components/tracks/tableRows.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Card, Checkbox } from '@mui/joy'
-import {
-	Collapse,
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableRow
-} from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
-import { appState } from '~/api/db/appState'
-import { Track } from '~/api/db/dbHandlers'
-import { rowClick } from '~/utils/tableOps'
-import { createColumnDefinitions } from './tableColumns'
-
-const TableRows = ({
-	row,
-	isItemSelected
-}: {
-	row: Track
-	isItemSelected: boolean
-}) => {
-	const [open, setOpen] = useState(false)
-	const [showButton, setShowButton] = appState.showButton()
-
-	// This is being done to refresh the 'Updated' column periodically
-	const [, updateState] = useState({})
-	useEffect(() => {
-		const interval = setInterval(() => updateState({}), 30000)
-		return () => clearInterval(interval)
-	}, [])
-
-	// Build table columns (once)
-	const columnDefs = useMemo(() => createColumnDefinitions(), [])
-
-	return (
-		<>
-			<TableRow
-				hover
-				selected={isItemSelected}
-				onMouseEnter={() => row.id && setShowButton(row.id)}
-				onMouseLeave={() => setShowButton(null)}
-			>
-				<TableCell
-					padding="none"
-					onClick={event => rowClick(event, row.id)}
-					role="checkbox"
-					aria-checked={isItemSelected}
-					tabIndex={-1}
-					sx={{ cursor: 'pointer', padding: '7px 12px 0 16px' }}
-				>
-					<Checkbox color="primary" checked={isItemSelected} title={row.name} />
-				</TableCell>
-				{columnDefs.map(column => (
-					<TableCell
-						key={column.dbKey}
-						id={`${column.dbKey}-${row.id}`}
-						sx={{
-							cursor: 'default',
-							alignItems: 'center',
-							...column.sx
-						}}
-						align={column.align}
-						padding={column.padding}
-						width={column.width}
-					>
-						{column.formatter(row)}
-					</TableCell>
-				))}
-			</TableRow>
-			{/* <IconButton
-            aria-label="expand row"
-            size="small"
-            onClick={() => setOpen(!open)}
-          >
-            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-          </IconButton> */}
-			<TableRow hover selected={isItemSelected}>
-				<TableCell sx={{ pb: 0, pt: 0, border: 0 }} colSpan={6}>
-					<Collapse in={open} timeout="auto" unmountOnExit>
-						<Card sx={{ margin: 1 }}>
-							<Table size="small" aria-label="mixes">
-								<TableHead>
-									<TableRow>
-										<TableCell>Mixes</TableCell>
-										<TableCell>From Track</TableCell>
-										<TableCell align="right">To Track</TableCell>
-										<TableCell align="right">Duration</TableCell>
-									</TableRow>
-								</TableHead>
-								<TableBody>
-									{/* {row.history?.map(historyRow => (
-                    <TableRow key={historyRow.date}>
-                      <TableCell component="th" scope="row">
-                        {historyRow.date}
-                      </TableCell>
-                      <TableCell>{historyRow.customerId}</TableCell>
-                      <TableCell align="right">{historyRow.amount}</TableCell>
-                      <TableCell align="right">23532</TableCell>
-                    </TableRow>
-                  ))} */}
-								</TableBody>
-							</Table>
-						</Card>
-					</Collapse>
-				</TableCell>
-			</TableRow>
-		</>
-	)
-}
-
-export { TableRows as default }
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index c9d546f..7bc9add 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -6,7 +6,7 @@ import { hydrateRoot } from 'react-dom/client'
 Sentry.init({
 	dsn: 'https://0158c725913324618a2d2e625ffb9fde@o4506276018192384.ingest.sentry.io/4506276020092928',
 	tracesSampleRate: 1,
-	replaysSessionSampleRate: 0.1,
+	replaysSessionSampleRate: 0,
 	replaysOnErrorSampleRate: 1,
 
 	integrations: [
diff --git a/app/root.css b/app/global.css
similarity index 68%
rename from app/root.css
rename to app/global.css
index a07438c..d65232c 100644
--- a/app/root.css
+++ b/app/global.css
@@ -3,20 +3,14 @@ body {
   min-height: 100vh;
 }
 
-#root {
-  height: 100vh;
-}
-
-tr:hover .visibleOnHover {
-  visibility: 'visible';
+/* not handled by tailwind */
+.bg-clip-text {
+  -webkit-background-clip: text;
+  background-clip: text;
 }
 
-.visibleOnHover {
-  visibility: 'hidden';
-}
-
-.visible {
-  visibility: 'visible'
+#root, #root > div{
+  height: 100vh;
 }
 
 /* wavesurfer ui tweaks */
diff --git a/app/root.tsx b/app/root.tsx
index 77ba89c..685f912 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,14 +1,6 @@
 // this file establishes the root component that renders all subsequent / child routes
 // it also injects top level styling, HTML meta tags, links, and javascript for browser rendering
-import PublicSansFont from '@fontsource/public-sans/latin.css'
-import { Snackbar } from '@mui/joy'
-import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles'
-import { CssBaseline } from '@mui/material'
-import {
-	Experimental_CssVarsProvider as MaterialCssVarsProvider,
-	THEME_ID as MATERIAL_THEME_ID,
-	experimental_extendTheme as materialExtendTheme
-} from '@mui/material/styles'
+import { NextUIProvider } from '@nextui-org/react'
 import {
 	LinksFunction,
 	LoaderFunctionArgs,
@@ -27,18 +19,17 @@ import {
 import * as Sentry from '@sentry/browser'
 import { createBrowserClient } from '@supabase/ssr'
 import { SupabaseClient } from '@supabase/supabase-js'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import posthog from 'posthog-js'
 import { useEffect, useState } from 'react'
+import { Toaster } from 'react-hot-toast'
 import { createHead } from 'remix-island'
 import { setAppState } from '~/api/db/appState'
 import ConfirmModal from '~/components/ConfirmModal'
-import InitialLoader from '~/components/InitialLoader'
+import { InitialLoader } from '~/components/Loader'
 import { ErrorBoundary } from '~/errorBoundary'
-import styles from '~/root.css'
-import { theme as joyTheme } from '~/theme'
-import { Notification } from '~/utils/notifications'
-
-const materialTheme = materialExtendTheme()
+import globalStyles from '~/global.css'
+import tailwind from '~/tailwind.css'
 
 // this is used to inject environment variables into the browser
 export async function loader({ context }: LoaderFunctionArgs) {
@@ -72,12 +63,12 @@ const meta: MetaFunction = () => [
 const links: LinksFunction = () => [
 	{
 		rel: 'icon',
-		type: 'image/png',
-		href: '/media/innerjoin32.png',
+		type: 'image/svg+xml',
+		href: '/media/favicon.svg',
 		sizes: '32x32'
 	},
-	{ rel: 'stylesheet', href: PublicSansFont },
-	{ rel: 'stylesheet', href: styles }
+	{ rel: 'stylesheet', href: tailwind },
+	{ rel: 'stylesheet', href: globalStyles }
 ]
 
 const HtmlDoc = ({ children }: { children: React.ReactNode }) => {
@@ -92,7 +83,6 @@ const HtmlDoc = ({ children }: { children: React.ReactNode }) => {
 const ThemeLoader = ({ error }: { error?: string }) => {
 	const data = error ? {} : useLoaderData<typeof loader>()
 	const [loading, setLoading] = useState(true)
-	const [notification, setNotification] = useState<Notification>()
 	const [supabase, setSupabase] = useState<SupabaseClient>()
 
 	useEffect(() => {
@@ -101,15 +91,6 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 			setLoading(false)
 		}, 500)
 
-		// for snackbar notifications
-		const notify = (e: CustomEventInit) =>
-			setNotification({
-				message: e.detail.message,
-				color: e.detail.color || 'danger'
-			})
-
-		window.addEventListener('notify', notify)
-
 		// initalize posthog
 		posthog.init(data.ENV.REACT_APP_PUBLIC_POSTHOG_KEY, {
 			api_host: data.ENV.REACT_APP_PUBLIC_POSTHOG_HOST,
@@ -140,24 +121,17 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 				posthog.capture('user logged out')
 				Sentry.setUser(null)
 				posthog.reset()
-				notify({ detail: { message: 'Logged out', color: 'success' } })
 			}
 		})
 
 		return () => {
 			clearTimeout(timer)
-			window.removeEventListener('notify', notify)
 		}
 	}, [data])
 
 	return (
-		<MaterialCssVarsProvider
-			theme={{ [MATERIAL_THEME_ID]: materialTheme }}
-			defaultMode={'dark'}
-		>
-			<JoyCssVarsProvider theme={joyTheme} defaultMode={'dark'}>
-				{/* CSS Baseline is used to inject global styles */}
-				<CssBaseline />
+		<NextUIProvider>
+			<NextThemesProvider attribute="class" defaultTheme="dark">
 				{loading || error ? (
 					<InitialLoader message={error} />
 				) : (
@@ -166,18 +140,9 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 						<ConfirmModal />
 					</>
 				)}
-				<Snackbar
-					open={!!notification}
-					autoHideDuration={5000}
-					variant="soft"
-					color={notification?.color}
-					size="md"
-					onClose={() => setNotification(undefined)}
-				>
-					{notification?.message}
-				</Snackbar>
-			</JoyCssVarsProvider>
-		</MaterialCssVarsProvider>
+				<Toaster toastOptions={{ duration: 5000 }} />
+			</NextThemesProvider>
+		</NextUIProvider>
 	)
 }
 
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index d60d022..64ada8c 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,11 +1,10 @@
-import { Sheet } from '@mui/joy'
 import { useEffect } from 'react'
 import { setAppState } from '~/api/db/appState'
 import { getPrefs, useLiveQuery } from '~/api/db/dbHandlers'
 import Header from '~/components/layout/Header'
 import Heart from '~/components/layout/HeartIcon'
+import LeftNav from '~/components/layout/LeftNav'
 import MixView from '~/components/mixes/MixView'
-import DrawerButton from '~/components/tracks/DrawerButton'
 import TrackDrawer from '~/components/tracks/TrackDrawer'
 import TrackTable from '~/components/tracks/TrackTable'
 
@@ -18,28 +17,25 @@ const Index: React.FunctionComponent = () => {
 	}, [mixViewVisible])
 
 	return (
-		<Sheet
-			sx={{
-				height: '100%',
-				display: 'flex',
-				flexDirection: 'column'
-			}}
-		>
+		<div className="h-full flex flex-col bg-darkGraph light:bg-lightGraph">
 			<Header />
 			{mixViewVisible ? (
 				<>
 					<MixView tracks={tracks} />
-					<DrawerButton />
+					<TrackDrawer />
 				</>
 			) : (
 				<>
-					<TrackTable />
+					<div className="grid grid-cols-[minmax(64px,200px),minmax(450px,1fr)] h-screen">
+						<LeftNav />
+						<div className="p-4">
+							<TrackTable />
+						</div>
+					</div>
 					<Heart />
 				</>
 			)}
-
-			<TrackDrawer />
-		</Sheet>
+		</div>
 	)
 }
 
diff --git a/app/tailwind.css b/app/tailwind.css
new file mode 100644
index 0000000..796882a
--- /dev/null
+++ b/app/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/app/theme.tsx b/app/theme.tsx
deleted file mode 100644
index 5d25d10..0000000
--- a/app/theme.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-// from https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/
-import { extendTheme as extendJoyTheme } from '@mui/joy/styles'
-import {
-	Theme,
-	experimental_extendTheme as extendMuiTheme
-} from '@mui/material/styles'
-import { deepmerge } from '@mui/utils'
-
-const muiTheme = extendMuiTheme({
-	// This is required to point to `var(--joy-*)` because we are using `CssVarsProvider` from Joy UI.
-	cssVarPrefix: 'joy',
-	components: {
-		MuiTable: {
-			styleOverrides: {
-				root: {
-					borderCollapse: 'separate',
-					borderSpacing: 0
-				}
-			}
-		}
-	}
-})
-
-const joyTheme = extendJoyTheme({
-	components: {
-		JoySheet: {
-			styleOverrides: {
-				root: ({ theme }) => ({
-					backgroundColor:
-						theme.palette.mode === 'dark'
-							? 'rgba(0, 30, 60, 0.2)'
-							: 'rgba(255, 255, 255, 0.99)',
-					backgroundImage:
-						theme.palette.mode === 'dark'
-							? darkGraphBackground
-							: lightGraphBackground
-				})
-			}
-		}
-	},
-	colorSchemes: {
-		light: {
-			palette: {
-				primary: {
-					'50': '#F0F7FF',
-					'100': '#C2E0FF',
-					'200': '#99CCF3',
-					'300': '#66B2FF',
-					'400': '#3399FF',
-					'500': '#007FFF',
-					'600': '#0072E5',
-					'700': '#0059B2',
-					'800': '#004C99',
-					'900': '#003A75'
-				},
-				divider: '#E7EBF0',
-				common: {
-					black: '#1D1D1D',
-					white: '#fff'
-				},
-				text: {
-					primary: '#1A2027',
-					secondary: '#3E5060'
-				},
-				error: {
-					mainChannel: '#EB0014',
-					lightChannel: '#FF99A2',
-					darkChannel: '#C70011',
-					contrastTextChannel: '#fff'
-				},
-				success: {
-					'50': '#E9FBF0',
-					'100': '#C6F6D9',
-					'200': '#9AEFBC',
-					'300': '#6AE79C',
-					'400': '#3EE07F',
-					'500': '#21CC66',
-					'600': '#1DB45A',
-					'700': '#1AA251',
-					'800': '#178D46',
-					'900': '#0F5C2E'
-				},
-				warning: {
-					'50': '#FFF9EB',
-					'100': '#FFF3C1',
-					'200': '#FFECA1',
-					'300': '#FFDC48',
-					'400': '#F4C000',
-					'500': '#DEA500',
-					'600': '#D18E00',
-					'700': '#AB6800',
-					'800': '#8C5800',
-					'900': '#5A3600'
-				},
-				secondary: {
-					mainChannel: '#9c27b0',
-					lightChannel: '#ba68c8',
-					darkChannel: '#7b1fa2',
-					contrastTextChannel: '#fff'
-				},
-				background: {
-					surface: '#fff',
-					body: '#F0F7FF'
-				},
-				action: {
-					active: 'rgba(0, 0, 0, 0.54)',
-					hover: 'rgba(0, 0, 0, 0.04)',
-					hoverOpacity: 0.04,
-					selected: 'rgba(0, 0, 0, 0.08)',
-					selectedOpacity: 0.08,
-					disabled: 'rgba(0, 0, 0, 0.26)',
-					disabledBackground: 'rgba(0, 0, 0, 0.12)',
-					disabledOpacity: 0.38,
-					focus: 'rgba(0, 0, 0, 0.12)',
-					focusOpacity: 0.12,
-					activatedOpacity: 0.12
-				}
-			}
-		},
-		dark: {
-			palette: {
-				primary: {
-					'50': '#F0F7FF',
-					'100': '#C2E0FF',
-					'200': '#99CCF3',
-					'300': '#66B2FF',
-					'400': '#3399FF',
-					'500': '#007FFF',
-					'600': '#0072E5',
-					'700': '#0059B2',
-					'800': '#004C99',
-					'900': '#003A75'
-				},
-				divider: '#c2e0ff14',
-				background: {
-					body: '#001E3C',
-					surface: '#0A1929'
-				},
-				common: {
-					black: '#1D1D1D',
-					white: '#fff'
-				},
-				text: {
-					primary: '#fff',
-					secondary: '#B2BAC2'
-				},
-				error: {
-					mainChannel: '#EB0014',
-					lightChannel: '#FF99A2',
-					darkChannel: '#C70011',
-					contrastTextChannel: '#fff'
-				},
-				success: {
-					'50': '#E9FBF0',
-					'100': '#C6F6D9',
-					'200': '#9AEFBC',
-					'300': '#6AE79C',
-					'400': '#3EE07F',
-					'500': '#21CC66',
-					'600': '#1DB45A',
-					'700': '#1AA251',
-					'800': '#178D46',
-					'900': '#0F5C2E'
-				},
-				warning: {
-					'50': '#FFF9EB',
-					'100': '#FFF3C1',
-					'200': '#FFECA1',
-					'300': '#FFDC48',
-					'400': '#F4C000',
-					'500': '#DEA500',
-					'600': '#D18E00',
-					'700': '#AB6800',
-					'800': '#8C5800',
-					'900': '#5A3600'
-				},
-				secondary: {
-					mainChannel: '#ce93d8',
-					lightChannel: '#f3e5f5',
-					darkChannel: '#ab47bc',
-					contrastTextChannel: 'rgba(0, 0, 0, 0.87)'
-				},
-				action: {
-					active: '#fff',
-					hover: 'rgba(255, 255, 255, 0.08)',
-					hoverOpacity: 0.08,
-					selected: 'rgba(255, 255, 255, 0.16)',
-					selectedOpacity: 0.16,
-					disabled: 'rgba(255, 255, 255, 0.3)',
-					disabledBackground: 'rgba(255, 255, 255, 0.12)',
-					disabledOpacity: 0.38,
-					focus: 'rgba(255, 255, 255, 0.12)',
-					focusOpacity: 0.12,
-					activatedOpacity: 0.24
-				}
-			}
-		}
-	},
-	fontFamily: {
-		display: 'Public Sans, system-ui',
-		body: 'Public Sans, system-ui'
-	}
-})
-
-const graphSvg = `%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
-
-const darkGraphBackground = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.2'${graphSvg}`
-
-const lightGraphBackground = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.04'${graphSvg}`
-
-export const theme: Theme = deepmerge(muiTheme, joyTheme)
diff --git a/app/utils/notifications.tsx b/app/utils/notifications.tsx
index f047fc7..0f564e5 100644
--- a/app/utils/notifications.tsx
+++ b/app/utils/notifications.tsx
@@ -1,21 +1,9 @@
-import { SnackbarProps } from '@mui/joy'
-
-type Notification = {
-	message: string
-	color?: SnackbarProps['color']
-}
+import toast from 'react-hot-toast'
 
 const errorHandler = (error: Error | string) => {
 	const err = typeof error === 'string' ? Error(error) : error
-
 	console.error(err.message)
-
-	window.dispatchEvent(
-		new CustomEvent('notify', {
-			detail: { message: err?.message, color: 'danger' }
-		})
-	)
+	toast.error(err?.message)
 }
 
 export { errorHandler }
-export type { Notification }
diff --git a/app/utils/tableOps.tsx b/app/utils/tableOps.tsx
index 119d8a2..62c2f94 100644
--- a/app/utils/tableOps.tsx
+++ b/app/utils/tableOps.tsx
@@ -1,73 +1,4 @@
 import moment from 'moment'
-import React, { ChangeEvent, MouseEvent } from 'react'
-import { getAppState, setAppState } from '~/api/db/appState'
-import { Track, db, getPrefs, setPrefs } from '~/api/db/dbHandlers'
-import { errorHandler } from '~/utils/notifications'
-
-const sort = async (event: MouseEvent<unknown>, property: keyof Track) => {
-	const { sortDirection } = (await getPrefs('user', 'sortDirection')) || {
-		sortDirection: 'desc'
-	}
-	const { sortColumn } = (await getPrefs('user', 'sortColumn')) || {
-		sortColumn: 'lastModified'
-	}
-
-	const isAsc = sortColumn === property && sortDirection === 'asc'
-
-	setPrefs('user', {
-		sortDirection: isAsc ? 'desc' : 'asc',
-		sortColumn: property
-	})
-}
-
-const selectAll = async (event: ChangeEvent<HTMLInputElement>) => {
-	if (!event.target.checked) return setAppState.selected([])
-	const tracks = await db.tracks.toArray()
-
-	const newSelected = tracks?.map(n => n.id)
-	setAppState.selected(newSelected.filter(n => n) as number[])
-}
-
-const rowClick = (
-	event: React.MouseEvent | React.KeyboardEvent,
-	id: Track['id']
-) => {
-	if (!id) return errorHandler('There was a problem selecting the row')
-
-	const [selected] = getAppState.selected()
-
-	const selectedIndex = selected.indexOf(id)
-	let newSelected: readonly Track['id'][] = []
-
-	if (selectedIndex === -1) {
-		newSelected = newSelected.concat(selected, id)
-	} else if (selectedIndex === 0) {
-		newSelected = newSelected.concat(selected.slice(1))
-	} else if (selectedIndex === selected.length - 1) {
-		newSelected = newSelected.concat(selected.slice(0, -1))
-	} else if (selectedIndex > 0) {
-		newSelected = newSelected.concat(
-			selected.slice(0, selectedIndex),
-			selected.slice(selectedIndex + 1)
-		)
-	}
-
-	setAppState.selected(newSelected.filter(n => n) as number[])
-}
-
-const changePage = (event: unknown, newPage: number) => {
-	setAppState.page(newPage)
-}
-
-const changeRows = (event: ChangeEvent<HTMLInputElement>) => {
-	setAppState.rowsPerPage(parseInt(event.target.value, 10))
-	setAppState.page(0)
-}
-
-const isSelected = (id: Track['id']) => {
-	const [selected] = getAppState.selected()
-	return typeof id === 'number' && selected.indexOf(id) !== -1
-}
 
 const descendingComparator = <T,>(a: T, b: T, orderBy: keyof T) => {
 	if (b[orderBy] < a[orderBy]) {
@@ -81,13 +12,13 @@ const descendingComparator = <T,>(a: T, b: T, orderBy: keyof T) => {
 
 // biome-ignore lint/suspicious/noExplicitAny: this is a generic function
 const getComparator = <Key extends keyof any>(
-	order: 'asc' | 'desc',
+	order: 'ascending' | 'descending',
 	orderBy: Key
 ): ((
 	a: { [key1 in Key]: number | string },
 	b: { [key2 in Key]: number | string }
 ) => number) => {
-	return order === 'desc'
+	return order === 'descending'
 		? (a, b) => descendingComparator(a, b, orderBy)
 		: (a, b) => -descendingComparator(a, b, orderBy)
 }
@@ -117,16 +48,15 @@ const convertToSecs = (time: string): number => {
 // Round to two decimal places
 const roundTwo = (num: number): number => Math.round(num * 100) / 100
 
+const capitalize = (str: string): string => {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 export {
-	changePage,
-	changeRows,
 	convertToSecs,
 	formatMinutes,
 	getComparator,
-	isSelected,
 	roundTwo,
-	rowClick,
-	selectAll,
-	sort,
-	timeFormat
+	timeFormat,
+	capitalize
 }
diff --git a/biome.json b/biome.json
index c0f0400..4689565 100644
--- a/biome.json
+++ b/biome.json
@@ -6,7 +6,10 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"a11y": {
+				"useKeyWithClickEvents": "off"
+			}
 		},
 		"ignore": [
 			"*.min.js",
diff --git a/global.d.ts b/global.d.ts
deleted file mode 100644
index 69726a7..0000000
--- a/global.d.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// from https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/
-import { CssVarsThemeOptions } from '@mui/joy'
-import { Theme as JoyTheme } from '@mui/joy/styles'
-import {
-	CommonColors,
-	Overlays,
-	PaletteAlert,
-	PaletteAppBar,
-	PaletteAvatar,
-	PaletteChip,
-	PaletteColor,
-	PaletteColorChannel,
-	PaletteFilledInput,
-	PaletteLinearProgress,
-	PaletteSkeleton,
-	PaletteSlider,
-	PaletteSnackbarContent,
-	PaletteSpeedDialAction,
-	PaletteStepConnector,
-	PaletteStepContent,
-	PaletteSwitch,
-	PaletteTableCell,
-	PaletteTextChannel,
-	PaletteTooltip,
-	Shadows,
-	TypeAction,
-	TypeBackground,
-	TypeText,
-	ZIndex,
-	experimental_extendTheme as extendMuiTheme
-} from '@mui/material/styles'
-import type {} from '@mui/material/themeCssVarsAugmentation'
-
-type JoyComponents = CssVarsThemeOptions['components']
-
-// extends Joy theme to include tokens from Material UI
-declare module '@mui/joy/styles' {
-	interface Palette {
-		secondary: PaletteColorChannel
-		error: PaletteColorChannel
-		dividerChannel: string
-		action: TypeAction
-		Alert: PaletteAlert
-		AppBar: PaletteAppBar
-		Avatar: PaletteAvatar
-		Chip: PaletteChip
-		FilledInput: PaletteFilledInput
-		LinearProgress: PaletteLinearProgress
-		Skeleton: PaletteSkeleton
-		Slider: PaletteSlider
-		SnackbarContent: PaletteSnackbarContent
-		SpeedDialAction: PaletteSpeedDialAction
-		StepConnector: PaletteStepConnector
-		StepContent: PaletteStepContent
-		Switch: PaletteSwitch
-		TableCell: PaletteTableCell
-		Tooltip: PaletteTooltip
-	}
-	type PalettePrimary = PaletteColor
-	type PaletteInfo = PaletteColor
-	type PaletteSuccess = PaletteColor
-	type PaletteWarning = PaletteColor
-	type PaletteCommon = CommonColors
-	type PaletteText = TypeText
-	type PaletteBackground = TypeBackground
-
-	interface ThemeVars {
-		// attach to Joy UI `theme.vars`
-		shadows: Shadows
-		overlays: Overlays
-		zIndex: ZIndex
-	}
-}
-
-declare module '@mui/material/styles' {
-	interface Theme {
-		// put everything back to Material UI `theme.vars`
-		vars: JoyTheme['vars']
-	}
-}
-
-// for Remix env vars: https://remix.run/docs/en/main/guides/envvars
-interface WindowEnv {
-	SUPABASE_URL: string
-	SUPABASE_ANON_KEY: string
-}
-
-declare global {
-	interface Window {
-		ENV: WindowEnv
-	}
-}
diff --git a/package.json b/package.json
index af4604e..b9a0983 100644
--- a/package.json
+++ b/package.json
@@ -12,26 +12,26 @@
 		"test": "playwright test"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.11.1",
-		"@emotion/styled": "^11.11.0",
 		"@fontsource/public-sans": "~4.5.11",
-		"@mui/joy": "^5.0.0-beta.15",
-		"@mui/material": "^5.14.18",
-		"@remix-run/cloudflare": "^2.3.0",
-		"@remix-run/cloudflare-pages": "^2.3.0",
-		"@remix-run/react": "^2.3.0",
+		"@nextui-org/react": "^2.2.9",
+		"@remix-run/cloudflare": "^2.4.0",
+		"@remix-run/cloudflare-pages": "^2.4.0",
+		"@remix-run/react": "^2.4.0",
 		"@sentry/remix": "^7.81.1",
 		"@supabase/auth-ui-react": "^0.4.6",
 		"@supabase/ssr": "^0.0.10",
 		"@supabase/supabase-js": "^2.38.4",
 		"dexie": "~3.2.2",
 		"dexie-react-hooks": "~1.1.1",
+		"framer-motion": "^10.16.16",
 		"isbot": "latest",
 		"jsdom": "^21.1.1",
 		"moment": "~2.29.4",
+		"next-themes": "^0.2.1",
 		"posthog-js": "^1.94.4",
 		"react": "~18",
 		"react-dom": "~18",
+		"react-hot-toast": "^2.4.1",
 		"remix-island": "^0.1.2",
 		"teaful": "~0.11.1",
 		"use-count-up": "^3.0.1",
@@ -42,15 +42,14 @@
 		"@argos-ci/playwright": "^1.3.2",
 		"@biomejs/biome": "1.4.1",
 		"@cloudflare/workers-types": "^4.20230821.0",
-		"@iconify-icon/react": "^1.0.7",
 		"@playwright/test": "^1.40.1",
-		"@remix-run/dev": "^2.3.0",
+		"@remix-run/dev": "^2.4.0",
 		"@types/node": "~18.7.3",
 		"@types/react": "~18.0.17",
 		"@types/react-dom": "~18.0.6",
 		"@types/wicg-file-system-access": "~2020.9.5",
+		"tailwindcss": "^3.3.6",
 		"typescript": "^5.0.4",
-		"wrangler": "latest",
 		"zod": "^3.22.3"
 	},
 	"engines": {
diff --git a/public/media/favicon.svg b/public/media/favicon.svg
new file mode 100644
index 0000000..f1161a9
--- /dev/null
+++ b/public/media/favicon.svg
@@ -0,0 +1,12 @@
+<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="32px"
+			viewBox="0 0 24 24"
+			style={{ color: '#006FEE' }}
+		>
+			<title>Inner joined circles</title>
+			<path
+				fill="currentColor"
+				d="M16 17q2.075 0 3.538-1.463T21 12q0-2.075-1.463-3.537T16 7q-.963 0-1.803.338q-.84.339-1.485.933q.61.766.949 1.721Q14 10.948 14 12t-.34 2.008q-.339.955-.948 1.72q.646.595 1.485.934Q15.037 17 16 17m-4-2q.475-.625.738-1.388T13 12q0-.85-.262-1.612T12 9q-.475.625-.737 1.388T11 12q0 .85.263 1.613T12 15m-4 2q.963 0 1.803-.338q.84-.339 1.485-.933q-.61-.766-.949-1.721Q10 13.052 10 12t.34-2.008q.339-.955.948-1.72q-.646-.595-1.485-.934Q8.963 7 8 7Q5.925 7 4.463 8.463T3 12q0 2.075 1.463 3.538T8 17m0 1q-2.502 0-4.251-1.749Q2 14.501 2 12q0-2.502 1.749-4.251Q5.499 6 8 6q1.163 0 2.186.412q1.022.411 1.814 1.146q.792-.735 1.814-1.146Q14.837 6 16 6q2.502 0 4.251 1.749Q22 9.499 22 12q0 2.502-1.749 4.251Q18.501 18 16 18q-1.163 0-2.186-.412q-1.022-.411-1.814-1.146q-.792.735-1.814 1.146Q9.163 18 8 18"
+			/>
+		</svg>
\ No newline at end of file
diff --git a/public/media/innerjoin32.png b/public/media/innerjoin32.png
deleted file mode 100644
index 31941ef..0000000
Binary files a/public/media/innerjoin32.png and /dev/null differ
diff --git a/remix.config.js b/remix.config.js
index f95ab00..4a2e4b0 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -1,5 +1,6 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 export default {
+	tailwind: true,
 	ignoredRouteFiles: ['**/.*'],
 	server: './server.ts',
 	serverBuildPath: 'functions/[[path]].js',
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..ed92c89
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,51 @@
+import { nextui } from '@nextui-org/react'
+import type { Config } from 'tailwindcss'
+
+const graphSvg = `%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
+
+const darkGraphBackground = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.2'${graphSvg}`
+
+const lightGraphBackground = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.04'${graphSvg}`
+
+export default ({
+	content: [
+		'./app/**/*.{js,jsx,ts,tsx}',
+		'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+	],
+	theme: {
+		extend: {
+			backgroundImage: {
+				lightGraph: lightGraphBackground,
+				darkGraph: darkGraphBackground
+			},
+			fontSize: {
+				'2xs': '0.625rem'
+			}
+		}
+	},
+	darkMode: 'class',
+	plugins: [
+		nextui({
+			addCommonColors: true,
+			prefix: 'mixpoint',
+			themes: {
+				light: {
+					colors: {
+						background: 'rgba(255, 255, 255, 0.9)',
+						primary: {
+							50: '#f0f7ff'
+						}
+					}
+				},
+				dark: {
+					colors: {
+						background: '#0e141a',
+						primary: {
+							50: '#0a1929'
+						}
+					}
+				}
+			}
+		})
+	]
+} satisfies Config)
diff --git a/yarn.lock b/yarn.lock
index a9fb0c2..c9d7fdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,13 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.2.1
   resolution: "@ampproject/remapping@npm:2.2.1"
@@ -55,15 +62,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0":
-  version: 7.18.6
-  resolution: "@babel/code-frame@npm:7.18.6"
-  dependencies:
-    "@babel/highlight": ^7.18.6
-  checksum: 195e2be3172d7684bf95cff69ae3b7a15a9841ea9d27d3c843662d50cdd7d6470fd9c8e64be84d031117e4a4083486effba39f9aef6bbb2c89f7f21bcfba33ba
-  languageName: node
-  linkType: hard
-
 "@babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/code-frame@npm:7.23.4"
@@ -232,15 +230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.16.7":
-  version: 7.18.6
-  resolution: "@babel/helper-module-imports@npm:7.18.6"
-  dependencies:
-    "@babel/types": ^7.18.6
-  checksum: f393f8a3b3304b1b7a288a38c10989de754f01d29caf62ce7c4e5835daf0a27b81f3ac687d9d2780d39685aae7b55267324b512150e7b2be967b0c493b6a1def
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-imports@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-module-imports@npm:7.22.5"
@@ -321,13 +310,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.19.4":
-  version: 7.19.4
-  resolution: "@babel/helper-string-parser@npm:7.19.4"
-  checksum: b2f8a3920b30dfac81ec282ac4ad9598ea170648f8254b10f475abe6d944808fb006aab325d3eb5a8ad3bea8dfa888cfa6ef471050dae5748497c110ec060943
-  languageName: node
-  linkType: hard
-
 "@babel/helper-string-parser@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-string-parser@npm:7.22.5"
@@ -342,13 +324,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
-  version: 7.19.1
-  resolution: "@babel/helper-validator-identifier@npm:7.19.1"
-  checksum: 0eca5e86a729162af569b46c6c41a63e18b43dbe09fda1d2a3c8924f7d617116af39cac5e4cd5d431bb760b4dca3c0970e0c444789b1db42bcf1fa41fbad0a3a
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -381,17 +356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/highlight@npm:7.18.6"
-  dependencies:
-    "@babel/helper-validator-identifier": ^7.18.6
-    chalk: ^2.0.0
-    js-tokens: ^4.0.0
-  checksum: 92d8ee61549de5ff5120e945e774728e5ccd57fd3b2ed6eace020ec744823d4a98e242be1453d21764a30a14769ecd62170fba28539b211799bbaf232bbb2789
-  languageName: node
-  linkType: hard
-
 "@babel/highlight@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/highlight@npm:7.22.5"
@@ -507,7 +471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -516,15 +480,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.23.2":
-  version: 7.23.4
-  resolution: "@babel/runtime@npm:7.23.4"
-  dependencies:
-    regenerator-runtime: ^0.14.0
-  checksum: 8eb6a6b2367f7d60e7f7dd83f477cc2e2fdb169e5460694d7614ce5c730e83324bcf29251b70940068e757ad1ee56ff8073a372260d90cad55f18a825caf97cd
-  languageName: node
-  linkType: hard
-
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -583,17 +538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.18.6":
-  version: 7.21.2
-  resolution: "@babel/types@npm:7.21.2"
-  dependencies:
-    "@babel/helper-string-parser": ^7.19.4
-    "@babel/helper-validator-identifier": ^7.19.1
-    to-fast-properties: ^2.0.0
-  checksum: a45a52acde139e575502c6de42c994bdbe262bafcb92ae9381fb54cdf1a3672149086843fda655c7683ce9806e998fd002bbe878fa44984498d0fdc7935ce7ff
-  languageName: node
-  linkType: hard
-
 "@babel/types@npm:^7.22.15, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/types@npm:7.23.4"
@@ -696,50 +640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cloudflare/kv-asset-handler@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "@cloudflare/kv-asset-handler@npm:0.2.0"
-  dependencies:
-    mime: ^3.0.0
-  checksum: bc6a02a9c80be6de90e46454ef4de09301e68726eaa4835de0e30216e50fffcc5612274a17dfb455916cf3418f0cb25fefd2b561a9d2282f4cc10d40527f0acb
-  languageName: node
-  linkType: hard
-
-"@cloudflare/workerd-darwin-64@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "@cloudflare/workerd-darwin-64@npm:1.20231025.0"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@cloudflare/workerd-darwin-arm64@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "@cloudflare/workerd-darwin-arm64@npm:1.20231025.0"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@cloudflare/workerd-linux-64@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "@cloudflare/workerd-linux-64@npm:1.20231025.0"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@cloudflare/workerd-linux-arm64@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "@cloudflare/workerd-linux-arm64@npm:1.20231025.0"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@cloudflare/workerd-windows-64@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "@cloudflare/workerd-windows-64@npm:1.20231025.0"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@cloudflare/workers-types@npm:^4.20230821.0":
   version: 4.20230821.0
   resolution: "@cloudflare/workers-types@npm:4.20230821.0"
@@ -747,38 +647,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.11.0":
-  version: 11.11.0
-  resolution: "@emotion/babel-plugin@npm:11.11.0"
-  dependencies:
-    "@babel/helper-module-imports": ^7.16.7
-    "@babel/runtime": ^7.18.3
-    "@emotion/hash": ^0.9.1
-    "@emotion/memoize": ^0.8.1
-    "@emotion/serialize": ^1.1.2
-    babel-plugin-macros: ^3.1.0
-    convert-source-map: ^1.5.0
-    escape-string-regexp: ^4.0.0
-    find-root: ^1.1.0
-    source-map: ^0.5.7
-    stylis: 4.2.0
-  checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9
-  languageName: node
-  linkType: hard
-
-"@emotion/cache@npm:^11.11.0":
-  version: 11.11.0
-  resolution: "@emotion/cache@npm:11.11.0"
-  dependencies:
-    "@emotion/memoize": ^0.8.1
-    "@emotion/sheet": ^1.2.2
-    "@emotion/utils": ^1.2.1
-    "@emotion/weak-memoize": ^0.3.1
-    stylis: 4.2.0
-  checksum: 8eb1dc22beaa20c21a2e04c284d5a2630a018a9d51fb190e52de348c8d27f4e8ca4bbab003d68b4f6cd9cc1c569ca747a997797e0f76d6c734a660dc29decf08
-  languageName: node
-  linkType: hard
-
 "@emotion/hash@npm:^0.9.0":
   version: 0.9.0
   resolution: "@emotion/hash@npm:0.9.0"
@@ -786,145 +654,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "@emotion/hash@npm:0.9.1"
-  checksum: 716e17e48bf9047bf9383982c071de49f2615310fb4e986738931776f5a823bc1f29c84501abe0d3df91a3803c80122d24e28b57351bca9e01356ebb33d89876
-  languageName: node
-  linkType: hard
-
-"@emotion/is-prop-valid@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@emotion/is-prop-valid@npm:1.2.1"
-  dependencies:
-    "@emotion/memoize": ^0.8.1
-  checksum: 8f42dc573a3fad79b021479becb639b8fe3b60bdd1081a775d32388bca418ee53074c7602a4c845c5f75fa6831eb1cbdc4d208cc0299f57014ed3a02abcad16a
-  languageName: node
-  linkType: hard
-
-"@emotion/memoize@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/memoize@npm:0.8.1"
-  checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0
-  languageName: node
-  linkType: hard
-
-"@emotion/react@npm:^11.11.1":
-  version: 11.11.1
-  resolution: "@emotion/react@npm:11.11.1"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.11.0
-    "@emotion/cache": ^11.11.0
-    "@emotion/serialize": ^1.1.2
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1
-    "@emotion/utils": ^1.2.1
-    "@emotion/weak-memoize": ^0.3.1
-    hoist-non-react-statics: ^3.3.1
-  peerDependencies:
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: aec3c36650f5f0d3d4445ff44d73dd88712b1609645b6af3e6d08049cfbc51f1785fe13dea1a1d4ab1b0800d68f2339ab11e459687180362b1ef98863155aae5
-  languageName: node
-  linkType: hard
-
-"@emotion/serialize@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@emotion/serialize@npm:1.1.2"
-  dependencies:
-    "@emotion/hash": ^0.9.1
-    "@emotion/memoize": ^0.8.1
-    "@emotion/unitless": ^0.8.1
-    "@emotion/utils": ^1.2.1
-    csstype: ^3.0.2
-  checksum: 413c352e657f1b5e27ea6437b3ef7dcc3860669b7ae17fd5c18bfbd44e033af1acc56b64d252284a813ca4f3b3e1b0841c42d3fb08e02d2df56fd3cd63d72986
-  languageName: node
-  linkType: hard
-
-"@emotion/sheet@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "@emotion/sheet@npm:1.2.2"
-  checksum: d973273c9c15f1c291ca2269728bf044bd3e92a67bca87943fa9ec6c3cd2b034f9a6bfe95ef1b5d983351d128c75b547b43ff196a00a3875f7e1d269793cecfe
-  languageName: node
-  linkType: hard
-
-"@emotion/styled@npm:^11.11.0":
-  version: 11.11.0
-  resolution: "@emotion/styled@npm:11.11.0"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.11.0
-    "@emotion/is-prop-valid": ^1.2.1
-    "@emotion/serialize": ^1.1.2
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1
-    "@emotion/utils": ^1.2.1
-  peerDependencies:
-    "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 904f641aad3892c65d7d6c0808b036dae1e6d6dad4861c1c7dc0baa59977047c6cad220691206eba7b4059f1a1c6e6c1ef4ebb8c829089e280fa0f2164a01e6b
-  languageName: node
-  linkType: hard
-
-"@emotion/unitless@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/unitless@npm:0.8.1"
-  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
-  languageName: node
-  linkType: hard
-
-"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 700b6e5bbb37a9231f203bb3af11295eed01d73b2293abece0bc2a2237015e944d7b5114d4887ad9a79776504aa51ed2a8b0ddbc117c54495dd01a6b22f93786
-  languageName: node
-  linkType: hard
-
-"@emotion/utils@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@emotion/utils@npm:1.2.1"
-  checksum: e0b44be0705b56b079c55faff93952150be69e79b660ae70ddd5b6e09fc40eb1319654315a9f34bb479d7f4ec94be6068c061abbb9e18b9778ae180ad5d97c73
-  languageName: node
-  linkType: hard
-
-"@emotion/weak-memoize@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "@emotion/weak-memoize@npm:0.3.1"
-  checksum: b2be47caa24a8122622ea18cd2d650dbb4f8ad37b636dc41ed420c2e082f7f1e564ecdea68122b546df7f305b159bf5ab9ffee872abd0f052e687428459af594
-  languageName: node
-  linkType: hard
-
-"@esbuild-plugins/node-globals-polyfill@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "@esbuild-plugins/node-globals-polyfill@npm:0.2.3"
-  peerDependencies:
-    esbuild: "*"
-  checksum: f83eeaa382680b26a3b1cf6c396450332c41d2dc0f9fd935d3f4bacf5412bef7383d2aeb4246a858781435b7c005a570dadc81051f8a038f1ef2111f17d3d8b0
-  languageName: node
-  linkType: hard
-
-"@esbuild-plugins/node-modules-polyfill@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "@esbuild-plugins/node-modules-polyfill@npm:0.2.2"
+"@emotion/is-prop-valid@npm:^0.8.2":
+  version: 0.8.8
+  resolution: "@emotion/is-prop-valid@npm:0.8.8"
   dependencies:
-    escape-string-regexp: ^4.0.0
-    rollup-plugin-node-polyfills: ^0.2.1
-  peerDependencies:
-    esbuild: "*"
-  checksum: 73c247a7559c68b7df080ab08dd3d0b0ab44b934840a4933df9626357b7183a9a5d8cf4ffa9c744f1bad8d7131bce0fde14a23203f7b262f9f14f7b3485bfdb1
+    "@emotion/memoize": 0.7.4
+  checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-arm64@npm:0.17.19"
-  conditions: os=android & cpu=arm64
+"@emotion/memoize@npm:0.7.4":
+  version: 0.7.4
+  resolution: "@emotion/memoize@npm:0.7.4"
+  checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc
   languageName: node
   linkType: hard
 
@@ -942,13 +684,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-arm@npm:0.17.19"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/android-arm@npm:0.17.6"
@@ -963,13 +698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/android-x64@npm:0.17.19"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/android-x64@npm:0.17.6"
@@ -984,13 +712,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/darwin-arm64@npm:0.17.19"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-arm64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/darwin-arm64@npm:0.17.6"
@@ -1005,13 +726,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/darwin-x64@npm:0.17.19"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/darwin-x64@npm:0.17.6"
@@ -1026,13 +740,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/freebsd-arm64@npm:0.17.19"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-arm64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/freebsd-arm64@npm:0.17.6"
@@ -1047,13 +754,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/freebsd-x64@npm:0.17.19"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/freebsd-x64@npm:0.17.6"
@@ -1068,13 +768,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-arm64@npm:0.17.19"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-arm64@npm:0.17.6"
@@ -1089,13 +782,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-arm@npm:0.17.19"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-arm@npm:0.17.6"
@@ -1110,13 +796,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-ia32@npm:0.17.19"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ia32@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-ia32@npm:0.17.6"
@@ -1131,13 +810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-loong64@npm:0.17.19"
-  conditions: os=linux & cpu=loong64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-loong64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-loong64@npm:0.17.6"
@@ -1152,13 +824,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-mips64el@npm:0.17.19"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-mips64el@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-mips64el@npm:0.17.6"
@@ -1173,13 +838,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-ppc64@npm:0.17.19"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ppc64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-ppc64@npm:0.17.6"
@@ -1194,13 +852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-riscv64@npm:0.17.19"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-riscv64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-riscv64@npm:0.17.6"
@@ -1215,13 +866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-s390x@npm:0.17.19"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-s390x@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-s390x@npm:0.17.6"
@@ -1236,13 +880,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/linux-x64@npm:0.17.19"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/linux-x64@npm:0.17.6"
@@ -1257,13 +894,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/netbsd-x64@npm:0.17.19"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/netbsd-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/netbsd-x64@npm:0.17.6"
@@ -1278,13 +908,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/openbsd-x64@npm:0.17.19"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/openbsd-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/openbsd-x64@npm:0.17.6"
@@ -1299,13 +922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/sunos-x64@npm:0.17.19"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/sunos-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/sunos-x64@npm:0.17.6"
@@ -1320,13 +936,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-arm64@npm:0.17.19"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-arm64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/win32-arm64@npm:0.17.6"
@@ -1341,13 +950,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-ia32@npm:0.17.19"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-ia32@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/win32-ia32@npm:0.17.6"
@@ -1362,13 +964,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.17.19":
-  version: 0.17.19
-  resolution: "@esbuild/win32-x64@npm:0.17.19"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-x64@npm:0.17.6":
   version: 0.17.6
   resolution: "@esbuild/win32-x64@npm:0.17.6"
@@ -1383,73 +978,96 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fastify/busboy@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "@fastify/busboy@npm:2.1.0"
-  checksum: 3233abd10f73e50668cb4bb278a79b7b3fadd30215ac6458299b0e5a09a29c3586ec07597aae6bd93f5cbedfcef43a8aeea51829cd28fc13850cdbcd324c28d5
+"@fontsource/public-sans@npm:~4.5.11":
+  version: 4.5.12
+  resolution: "@fontsource/public-sans@npm:4.5.12"
+  checksum: 65e98407bb33a6aebd0a9c83b82f0548a4f69a3ef8c2d25d0f0491c0b847269d71d398389e7e1c52e5c8e5a47bdc3e936961329598503fd8d2058a23ffc873f8
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.4.2":
-  version: 1.5.0
-  resolution: "@floating-ui/core@npm:1.5.0"
+"@formatjs/ecma402-abstract@npm:1.18.0":
+  version: 1.18.0
+  resolution: "@formatjs/ecma402-abstract@npm:1.18.0"
   dependencies:
-    "@floating-ui/utils": ^0.1.3
-  checksum: 54b4fe26b3c228746ac5589f97303abf158b80aa5f8b99027259decd68d1c2030c4c637648ebd33dfe78a4212699453bc2bd7537fd5a594d3bd3e63d362f666f
+    "@formatjs/intl-localematcher": 0.5.2
+    tslib: ^2.4.0
+  checksum: 22be7f02397d565de621bba5d57135bf7a360b4f3f04e7d75194854f47c22fa8cc2e43ede2c6d1dea885d3cb5df6f58e82ea7ba457a7b3e208403372cd6b90f3
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.5.1":
-  version: 1.5.3
-  resolution: "@floating-ui/dom@npm:1.5.3"
+"@formatjs/fast-memoize@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@formatjs/fast-memoize@npm:2.2.0"
   dependencies:
-    "@floating-ui/core": ^1.4.2
-    "@floating-ui/utils": ^0.1.3
-  checksum: 00053742064aac70957f0bd5c1542caafb3bfe9716588bfe1d409fef72a67ed5e60450d08eb492a77f78c22ed1ce4f7955873cc72bf9f9caf2b0f43ae3561c21
+    tslib: ^2.4.0
+  checksum: 8697fe72a7ece252d600a7d08105f2a2f758e2dd96f54ac0a4c508b1205a559fc08835635e1f8e5ca9dcc3ee61ce1fca4a0e7047b402f29fc96051e293a280ff
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "@floating-ui/react-dom@npm:2.0.4"
+"@formatjs/icu-messageformat-parser@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.7.3"
   dependencies:
-    "@floating-ui/dom": ^1.5.1
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 91b2369e25f84888486e48c1656117468248906034ed482d411bb9ed1061b908dd32435b4ca3d0cd0ca6083291510a98ce74d76c671d5cc25b0c41e5fa824bae
+    "@formatjs/ecma402-abstract": 1.18.0
+    "@formatjs/icu-skeleton-parser": 1.7.0
+    tslib: ^2.4.0
+  checksum: 3efd07e26dfd768cfb4ebee72787f150eb7c65849610d0b08b09ffd26f127ce2a7027dc901a3a2ee536597a26bce289bff3f3d9de8247c274e364c0666f685d6
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.1.3":
-  version: 0.1.6
-  resolution: "@floating-ui/utils@npm:0.1.6"
-  checksum: b34d4b5470869727f52e312e08272edef985ba5a450a76de0917ba0a9c6f5df2bdbeb99448e2c60f39b177fb8981c772ff1831424e75123471a27ebd5b52c1eb
+"@formatjs/icu-skeleton-parser@npm:1.7.0":
+  version: 1.7.0
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.7.0"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.18.0
+    tslib: ^2.4.0
+  checksum: a461d95b0a39a52d2acb776cb60818188f32ca5d8be7d97440b892bb30564e852410c3fffe96c4c5e6793934f3f694958da8297bd7e3b0cbe114f11223a57013
   languageName: node
   linkType: hard
 
-"@fontsource/public-sans@npm:~4.5.11":
-  version: 4.5.12
-  resolution: "@fontsource/public-sans@npm:4.5.12"
-  checksum: 65e98407bb33a6aebd0a9c83b82f0548a4f69a3ef8c2d25d0f0491c0b847269d71d398389e7e1c52e5c8e5a47bdc3e936961329598503fd8d2058a23ffc873f8
+"@formatjs/intl-localematcher@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@formatjs/intl-localematcher@npm:0.5.2"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: a741d69e9d3b71bee19726484de4a296711d96dc27f588d995b9e2079d3bc5d06370b6e84136003197d558d45f9faf507321627a78d8cd986705b78ec701c016
   languageName: node
   linkType: hard
 
-"@iconify-icon/react@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "@iconify-icon/react@npm:1.0.7"
+"@internationalized/date@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "@internationalized/date@npm:3.5.0"
   dependencies:
-    iconify-icon: ^1.0.7
-  peerDependencies:
-    react: ">=16"
-  checksum: 9a94d7d8f4ee140836a776dc851da248a1a7a875213db3a16379c7c74976913f09582d0a0ea3a84b69eda581b6c15d98a93d9e6e7a31b9322e033039cbc45b35
+    "@swc/helpers": ^0.5.0
+  checksum: 621298a1686bad64212b1f2a497492dcc9d657a3789ea62a1a5ee1cb37719fa7a54944d4bb318bf22f709eccfcb6627e6d1aad9825aaa67c2150973ccca8c15d
   languageName: node
   linkType: hard
 
-"@iconify/types@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@iconify/types@npm:2.0.0"
-  checksum: 029f58542c160e9d4a746869cf2e475b603424d3adf3994c5cc8d0406c47e6e04a3b898b2707840c1c5b9bd5563a1660a34b110d89fce43923baca5222f4e597
+"@internationalized/message@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@internationalized/message@npm:3.1.1"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+    intl-messageformat: ^10.1.0
+  checksum: c8658847e80a2dd6f5a253bdc20ce45d304ffa2147248e6422d72714ac501edd0d4cce09e4baf7753cd393e4df7014df747425ff9658728cd1f892d71c3d591b
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "@internationalized/number@npm:3.4.0"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: 238161e726f49a32fd311c5a864b93fd6e7e0f465ce4c54b51558b028a9c24109d66332f48067114d01f3acd1eae4cfa436070013d88db7f1f4f8158c5ddfb9d
+  languageName: node
+  linkType: hard
+
+"@internationalized/string@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@internationalized/string@npm:3.1.1"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: 686b4d443dbf6794b5f32e0c3a0ee9333a64bfe2a01aec705fb71f5721f5c9e8aa25b380bdae85e21be0dc72103843642363efcaed437ebad3e7169e478b91ae
   languageName: node
   linkType: hard
 
@@ -1548,328 +1166,2380 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.24":
-  version: 5.0.0-beta.24
-  resolution: "@mui/base@npm:5.0.0-beta.24"
-  dependencies:
-    "@babel/runtime": ^7.23.2
-    "@floating-ui/react-dom": ^2.0.4
-    "@mui/types": ^7.2.9
-    "@mui/utils": ^5.14.18
-    "@popperjs/core": ^2.11.8
-    clsx: ^2.0.0
-    prop-types: ^15.8.1
+"@nextui-org/accordion@npm:2.0.28":
+  version: 2.0.28
+  resolution: "@nextui-org/accordion@npm:2.0.28"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/divider": 2.0.25
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-accordion": 2.0.2
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/button": ^3.8.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/tree": ^3.7.3
+    "@react-types/accordion": 3.0.0-alpha.17
+    "@react-types/shared": ^3.21.0
   peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: dbd6eb0af7cb89389b1dccd6a84d07128c41f60d297d8f1d484919950c9b45a5d8767042b622c74e311bce0368ee3f760afb34d80ad97af61f5b5650ae990c60
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 4b5e03fcbc57dde3486390a888fa76100e6ceb46c2b8f42ffe15066eb6cd22abcc27a9bcdb94c95750eef43bba6a83f77cd4b037ee7e0dacb8c885ee4b6787f4
+  languageName: node
+  linkType: hard
+
+"@nextui-org/aria-utils@npm:2.0.15":
+  version: 2.0.15
+  resolution: "@nextui-org/aria-utils@npm:2.0.15"
+  dependencies:
+    "@nextui-org/react-rsc-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system": 2.0.15
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/collections": ^3.10.2
+    "@react-types/overlays": ^3.8.3
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 423dff2bb2646332faa471baa1a19ed846cac126cb63d5f654ef2e671aa272a6048c9953050f5e0957852a6f305b1666586f21155a913b6ce4608e9e4984886a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/autocomplete@npm:2.0.9":
+  version: 2.0.9
+  resolution: "@nextui-org/autocomplete@npm:2.0.9"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/button": 2.0.26
+    "@nextui-org/input": 2.1.16
+    "@nextui-org/listbox": 2.1.16
+    "@nextui-org/popover": 2.1.14
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/scroll-shadow": 2.1.12
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/spinner": 2.0.24
+    "@nextui-org/use-aria-button": 2.0.6
+    "@react-aria/combobox": ^3.7.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/i18n": ^3.8.4
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/combobox": ^3.7.1
+    "@react-types/combobox": ^3.8.1
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 951aa2a3046478b1785f2e80c97a9c5a91046e0b3d6ee94967eb56fd4fbb007daa98ed04d46d128ab47c8e3bc713558aaf2aa14d15e1ae02b93a4f7769d72783
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/core-downloads-tracker@npm:5.14.18"
-  checksum: 3d367797282e4b93eacee997667d62bc4eeac979e9664724e9db8d632278d8629f2a141894cf53d706f1d2a9f19965bffe2858aa2bc9833722e674cd560b896e
+"@nextui-org/avatar@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/avatar@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-image": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: b19897f75dd6d4d28277f900c9995cc248c3faa96e58c84dc723a2c9e4f89075e14723a2acf511defe61f7b71aca779ce553bef53b7bc70163b73052cc23321a
   languageName: node
   linkType: hard
 
-"@mui/joy@npm:^5.0.0-beta.15":
-  version: 5.0.0-beta.15
-  resolution: "@mui/joy@npm:5.0.0-beta.15"
+"@nextui-org/badge@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/badge@npm:2.0.24"
   dependencies:
-    "@babel/runtime": ^7.23.2
-    "@mui/base": 5.0.0-beta.24
-    "@mui/core-downloads-tracker": ^5.14.18
-    "@mui/system": ^5.14.18
-    "@mui/types": ^7.2.9
-    "@mui/utils": ^5.14.18
-    clsx: ^2.0.0
-    prop-types: ^15.8.1
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
   peerDependencies:
-    "@emotion/react": ^11.5.0
-    "@emotion/styled": ^11.3.0
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 7cc43979716ab96d8c60575970a53dfc0661f4fdc0c430a30eeee3cb077137292fa84bc6465fac35204fc66425232bb9e9b04d65aaf5197363b14c1ab7f1786d
-  languageName: node
-  linkType: hard
-
-"@mui/material@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/material@npm:5.14.18"
-  dependencies:
-    "@babel/runtime": ^7.23.2
-    "@mui/base": 5.0.0-beta.24
-    "@mui/core-downloads-tracker": ^5.14.18
-    "@mui/system": ^5.14.18
-    "@mui/types": ^7.2.9
-    "@mui/utils": ^5.14.18
-    "@types/react-transition-group": ^4.4.8
-    clsx: ^2.0.0
-    csstype: ^3.1.2
-    prop-types: ^15.8.1
-    react-is: ^18.2.0
-    react-transition-group: ^4.4.5
-  peerDependencies:
-    "@emotion/react": ^11.5.0
-    "@emotion/styled": ^11.3.0
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 488322f09638a71bb5d4bb5c027dde69d5cf89bcfd433594e3b90fea9fefa302bc85b9d2bf386493bf68d360107b59c6d148f46a68477e7f472f4f2d14d698a3
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 82f2e3fd69e3480abf42e0e2bf27ba0f35ca441b952af58a0424c7fc21a387063c99073ee537a20a2185afda5e6c2890945e2963b119e572cec08b0f8b8468c1
+  languageName: node
+  linkType: hard
+
+"@nextui-org/breadcrumbs@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/breadcrumbs@npm:2.0.4"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@react-aria/breadcrumbs": ^3.5.7
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/utils": ^3.21.1
+    "@react-types/breadcrumbs": ^3.7.1
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 92a267c584f01a8d6233b652f557defc7e72074b887f877c050fa6d91f1e3fcc29c5ccf45e46ea66db2c0e9013a6e19abb9b3c6c3bee67f97867885dd82ed9fb
+  languageName: node
+  linkType: hard
+
+"@nextui-org/button@npm:2.0.26":
+  version: 2.0.26
+  resolution: "@nextui-org/button@npm:2.0.26"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/ripple": 2.0.24
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/spinner": 2.0.24
+    "@nextui-org/use-aria-button": 2.0.6
+    "@react-aria/button": ^3.8.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/button": ^3.9.0
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: e949a9bdf4321dd82b808bfb9186a0fdd4db5236abe0479302a819fbc7331e6910078b8d5ef6d0de7843a5d2c1789fe1c0ac8f2ab8ab0fde07a5318e35bde2c0
+  languageName: node
+  linkType: hard
+
+"@nextui-org/card@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/card@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/ripple": 2.0.24
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-button": 2.0.6
+    "@react-aria/button": ^3.8.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: bbdd0459d2d1f58674009ecf048fe7e87b8e63293e975235cbc847b81c3b413bf09e2deefc52627cf3031cf2e9dbf4e22cbdaa06c47e7b986ca41ea8e103ec7e
+  languageName: node
+  linkType: hard
+
+"@nextui-org/checkbox@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/checkbox@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/checkbox": ^3.11.2
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/checkbox": ^3.5.1
+    "@react-stately/toggle": ^3.6.3
+    "@react-types/checkbox": ^3.5.2
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 30eb0f536fd7555632db654118bc03964c493e3ae12e0ab1a91f6fb24d21524292a207d276b12757e929dc57a192223dcd86acdfd6d56207692fba369bc4a845
+  languageName: node
+  linkType: hard
+
+"@nextui-org/chip@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/chip@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/checkbox": ^3.5.2
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: d12c1291640999345d4c18a261aff5c168de1a171a61bb432d3831fbbba2a3003af9ffc351d3a7d16bcb08ed9865b98c4ba90f79bdbe7c51b18e710fd0402aa8
+  languageName: node
+  linkType: hard
+
+"@nextui-org/code@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/code@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 7e13a49334d7993a444094096913061064aa650c702f4443f49efd4a7e15b9b88e93d54eef34204df04218c10d24faaf9d8f68ed8ffcebeac389adf69f700206
+  languageName: node
+  linkType: hard
+
+"@nextui-org/divider@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/divider@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-rsc-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 970fecb7db1745e5417f43e44e8fc88cdb97b82e6b0ebed7ebb9f5529565570d7b1bd81584b7367a9c6071a5fc89758552f3f5d8c53f0c7530e46b9483d6e60f
+  languageName: node
+  linkType: hard
+
+"@nextui-org/dropdown@npm:2.1.16":
+  version: 2.1.16
+  resolution: "@nextui-org/dropdown@npm:2.1.16"
+  dependencies:
+    "@nextui-org/menu": 2.0.17
+    "@nextui-org/popover": 2.1.14
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/menu": ^3.11.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/menu": ^3.5.6
+    "@react-types/menu": ^3.9.5
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 61b9264039767cb7a33f9f6fa7ac6440907d0292f6f8508ff66202b227ec04641713b07032b602caea0a5b8ac4f1e9b5f65d244ea7d70cb610558de7d381b5b9
+  languageName: node
+  linkType: hard
+
+"@nextui-org/framer-transitions@npm:2.0.15":
+  version: 2.0.15
+  resolution: "@nextui-org/framer-transitions@npm:2.0.15"
+  dependencies:
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system": 2.0.15
+  peerDependencies:
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 60891a76f50c879c9e99c8e9dd4673e3198af8a2618dd02dd9486e342d6f532359f19d3cc1bdbde093d9a5cffe1dd878c29ad5b4cd1a741af620977a82bedf29
+  languageName: node
+  linkType: hard
+
+"@nextui-org/image@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/image@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-image": 2.0.4
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: ffd158d4dcb251fbdd902c8a1bce8500f192398b5353ec9aa56581d7086abf8aa4ddb95f7c4bd1d01fe7ac3326b0739a88f089929d2f9844f4e25f9f0f04c195
+  languageName: node
+  linkType: hard
+
+"@nextui-org/input@npm:2.1.16":
+  version: 2.1.16
+  resolution: "@nextui-org/input@npm:2.1.16"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/textfield": ^3.12.2
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/utils": ^3.8.0
+    "@react-types/shared": ^3.21.0
+    "@react-types/textfield": ^3.8.1
+    react-textarea-autosize: ^8.5.2
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 5c7f76067814f00f01d5a5029dbe89f4aa2febd1b67f9ebf4cbda447678ef5345dbf8b39a5b0dda9651e5e96ee731b2ae472d0bd4c14525b9476824746c72176
+  languageName: node
+  linkType: hard
+
+"@nextui-org/kbd@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/kbd@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+    "@react-aria/utils": ^3.21.1
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 3449fa8a74b994f8dd2bdbbf0190764485e09790a1fe082f14e39858a1e217117801566f35d68b708a51e288facffd9d2ed07345e4f645a9735f3fdaf6eca2d8
+  languageName: node
+  linkType: hard
+
+"@nextui-org/link@npm:2.0.26":
+  version: 2.0.26
+  resolution: "@nextui-org/link@npm:2.0.26"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-link": 2.0.15
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/link": ^3.6.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/link": ^3.5.1
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: bb860fa90f4593b7540be35d6c79e0053406204da5b296e2a0b332dd9dfdae91797358f086bde14d926bcfae284fb4cffb9b58a2a4469caf2e3ef9aaf42d5f24
+  languageName: node
+  linkType: hard
+
+"@nextui-org/listbox@npm:2.1.16":
+  version: 2.1.16
+  resolution: "@nextui-org/listbox@npm:2.1.16"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/divider": 2.0.25
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@nextui-org/use-is-mobile": 2.0.6
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/listbox": ^3.11.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/list": ^3.10.0
+    "@react-types/menu": ^3.9.5
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: f709ae54523878bfdd5d32b8d02a8ead951ee9c9c518a7292f6381889e99ec094026e80b50ba7e00da8b56692c033ede1f7515615e9c87bee9140fd2a0c71157
+  languageName: node
+  linkType: hard
+
+"@nextui-org/menu@npm:2.0.17":
+  version: 2.0.17
+  resolution: "@nextui-org/menu@npm:2.0.17"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/divider": 2.0.25
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@nextui-org/use-is-mobile": 2.0.6
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/menu": ^3.11.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/menu": ^3.5.6
+    "@react-stately/tree": ^3.7.3
+    "@react-types/menu": ^3.9.5
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 629347bbb481fa3273dd456b4b6a0deae405a17bdb22bc70b26043ab3c80400ef4773737b399c0abf0ef426f69818d18859e0cb0f75457f6636761202e44e3f4
+  languageName: node
+  linkType: hard
+
+"@nextui-org/modal@npm:2.0.28":
+  version: 2.0.28
+  resolution: "@nextui-org/modal@npm:2.0.28"
+  dependencies:
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-button": 2.0.6
+    "@nextui-org/use-aria-modal-overlay": 2.0.6
+    "@nextui-org/use-disclosure": 2.0.6
+    "@react-aria/dialog": ^3.5.7
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/overlays": ^3.6.3
+    "@react-types/overlays": ^3.8.3
+    react-remove-scroll: ^2.5.6
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: bd4ad387c83144fedd7dd7148e872bb62d9d40d5884ac2fbb12ec6206a6118b280dbf8e9e4a192d36161943579535d5c0fb0fd4696a8fff84015b5980f24239f
+  languageName: node
+  linkType: hard
+
+"@nextui-org/navbar@npm:2.0.27":
+  version: 2.0.27
+  resolution: "@nextui-org/navbar@npm:2.0.27"
+  dependencies:
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-toggle-button": 2.0.6
+    "@nextui-org/use-scroll-position": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/toggle": ^3.6.3
+    "@react-stately/utils": ^3.8.0
+    react-remove-scroll: ^2.5.6
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 35831fd09320a1543aeac51b9c7dee18a199294ff3bf0e01bded662045bd3a34c2a6dd8d919363c9faeb3d5d88e8f195e5087ad70a3f0fe81ac56f91108d9a8a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/pagination@npm:2.0.26":
+  version: 2.0.26
+  resolution: "@nextui-org/pagination@npm:2.0.26"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@nextui-org/use-pagination": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    scroll-into-view-if-needed: 3.0.10
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 599c36795ff82ac717e92f3128667756f8f78d2503ff3c9e8c2dd080b9e2ddc33145b83b3120b759bdea989766a1c5b03f532970e1d8053d6da71ecf9199e420
+  languageName: node
+  linkType: hard
+
+"@nextui-org/popover@npm:2.1.14":
+  version: 2.1.14
+  resolution: "@nextui-org/popover@npm:2.1.14"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/button": 2.0.26
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-button": 2.0.6
+    "@react-aria/dialog": ^3.5.7
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/overlays": ^3.6.3
+    "@react-types/button": ^3.9.0
+    "@react-types/overlays": ^3.8.3
+    react-remove-scroll: ^2.5.6
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: a491bf5777ca7ac456b0eda6a276525a5848829b49ab2150f298c4f97acf4e00353f1227d2fa3261dcd9891daf377e0ed0242369a55ee35080173d80ca669908
+  languageName: node
+  linkType: hard
+
+"@nextui-org/progress@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/progress@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-is-mounted": 2.0.4
+    "@react-aria/i18n": ^3.8.4
+    "@react-aria/progress": ^3.4.7
+    "@react-aria/utils": ^3.21.1
+    "@react-types/progress": ^3.5.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: e993037beb12bfac0bd87ea196c795ee9bb0f71508e3eddf0da9a125065b88244f3352657647620b0d550b32353c0f9cfc876831c21e38b3d365a4bfb3f0e214
+  languageName: node
+  linkType: hard
+
+"@nextui-org/radio@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/radio@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/radio": ^3.8.2
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/radio": ^3.9.1
+    "@react-types/radio": ^3.5.2
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 7d621b75f3ab70653123a4acac2c1ea1675ff68fcf880f0f5e6dc5c910a83e1cec860887097c95584e02ccf79d548ad668d16d417d068cbaa9d5fe8700593b8e
+  languageName: node
+  linkType: hard
+
+"@nextui-org/react-rsc-utils@npm:2.0.10":
+  version: 2.0.10
+  resolution: "@nextui-org/react-rsc-utils@npm:2.0.10"
+  checksum: 66a39be78bfbfbe4feb62152499d18029f795f6e966916fbbe37d462ffd2b3f8ce85bc91e95944918527e2bac59d8a0d66c7607e8806a4ab7931e3831f65740f
+  languageName: node
+  linkType: hard
+
+"@nextui-org/react-utils@npm:2.0.10":
+  version: 2.0.10
+  resolution: "@nextui-org/react-utils@npm:2.0.10"
+  dependencies:
+    "@nextui-org/react-rsc-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+  peerDependencies:
+    react: ">=18"
+  checksum: de66c732c8eee49543b36a4fe346bb6e50403f4dbd3c845e0cb1c3328c88f35c2c459a187d1b45b1a6fc470c42c1c933d5cfa2ab76e0a0d16db1ad0c2f3c2564
+  languageName: node
+  linkType: hard
+
+"@nextui-org/react@npm:^2.2.9":
+  version: 2.2.9
+  resolution: "@nextui-org/react@npm:2.2.9"
+  dependencies:
+    "@nextui-org/accordion": 2.0.28
+    "@nextui-org/autocomplete": 2.0.9
+    "@nextui-org/avatar": 2.0.24
+    "@nextui-org/badge": 2.0.24
+    "@nextui-org/breadcrumbs": 2.0.4
+    "@nextui-org/button": 2.0.26
+    "@nextui-org/card": 2.0.24
+    "@nextui-org/checkbox": 2.0.25
+    "@nextui-org/chip": 2.0.25
+    "@nextui-org/code": 2.0.24
+    "@nextui-org/divider": 2.0.25
+    "@nextui-org/dropdown": 2.1.16
+    "@nextui-org/image": 2.0.24
+    "@nextui-org/input": 2.1.16
+    "@nextui-org/kbd": 2.0.25
+    "@nextui-org/link": 2.0.26
+    "@nextui-org/listbox": 2.1.16
+    "@nextui-org/menu": 2.0.17
+    "@nextui-org/modal": 2.0.28
+    "@nextui-org/navbar": 2.0.27
+    "@nextui-org/pagination": 2.0.26
+    "@nextui-org/popover": 2.1.14
+    "@nextui-org/progress": 2.0.24
+    "@nextui-org/radio": 2.0.25
+    "@nextui-org/ripple": 2.0.24
+    "@nextui-org/scroll-shadow": 2.1.12
+    "@nextui-org/select": 2.1.20
+    "@nextui-org/skeleton": 2.0.24
+    "@nextui-org/slider": 2.2.5
+    "@nextui-org/snippet": 2.0.30
+    "@nextui-org/spacer": 2.0.24
+    "@nextui-org/spinner": 2.0.24
+    "@nextui-org/switch": 2.0.25
+    "@nextui-org/system": 2.0.15
+    "@nextui-org/table": 2.0.28
+    "@nextui-org/tabs": 2.0.26
+    "@nextui-org/theme": 2.1.17
+    "@nextui-org/tooltip": 2.0.29
+    "@nextui-org/user": 2.0.25
+    "@react-aria/visually-hidden": ^3.8.6
+  peerDependencies:
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 0a73e86162f8a59d8fc6d96b728324ce826ac0833e1b002bb7636d25208ed5a42e8861379a00263c253fa91f2caf419c5fda6658f3d02858f290d2bd1b556a5c
+  languageName: node
+  linkType: hard
+
+"@nextui-org/ripple@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/ripple@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 1ead52d37a1dfbf0a906444fc5d462f4c56e3951415999a66718fb2bf92cb96b93fed70c54f97cd98997431e2c4cb5b495e90ad96da6ccb4f17f437cf4007a3e
+  languageName: node
+  linkType: hard
+
+"@nextui-org/scroll-shadow@npm:2.1.12":
+  version: 2.1.12
+  resolution: "@nextui-org/scroll-shadow@npm:2.1.12"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-data-scroll-overflow": 2.1.2
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 9f26658cfe43951648893a480db482d8e2468aac81521c6146ab7d6cd6fc6ef1d813469981df5066897b59b90d4a3ed534da6be600a26e48f76dae8d7d01794a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/select@npm:2.1.20":
+  version: 2.1.20
+  resolution: "@nextui-org/select@npm:2.1.20"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/listbox": 2.1.16
+    "@nextui-org/popover": 2.1.14
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/scroll-shadow": 2.1.12
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/spinner": 2.0.24
+    "@nextui-org/use-aria-button": 2.0.6
+    "@nextui-org/use-aria-multiselect": 2.1.3
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 3521be11ee8dbaa4a478b6d83d88685cdd2558c29e532b6d61763fcb2cb225a4e484eeb062b6a8896956c6397949e2265f09e15d9328caa9033829a9ae6ae74a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/shared-icons@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/shared-icons@npm:2.0.6"
+  peerDependencies:
+    react: ">=18"
+  checksum: a784c9a2fbcb8f51e34bd3eab0f038cde87073f97faae6d8e7e2e930967bc4b892c3cca1a70ddee0d9594c43c7c2df5e5eca5c70109db4d381716760ee7ce5a4
+  languageName: node
+  linkType: hard
+
+"@nextui-org/shared-utils@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/shared-utils@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: 9557bce2a13acaee9909f4fcf1fe3887f3aa506a323b25a87ce0d26dfe5be982beadcdd61e7608439a3d50c7e2a302ed682716b8d2c59ebd1f0cce3025c8bfba
+  languageName: node
+  linkType: hard
+
+"@nextui-org/skeleton@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/skeleton@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 7b7123dae289e6eccce0a587c84bb2666c631b5cee973a9663bbd659c3f7f6201bb66d10b468a592a2d70616e18bde398abd51d29d8882cc428ef2e0372d65f5
+  languageName: node
+  linkType: hard
+
+"@nextui-org/slider@npm:2.2.5":
+  version: 2.2.5
+  resolution: "@nextui-org/slider@npm:2.2.5"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/tooltip": 2.0.29
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/i18n": ^3.8.4
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/slider": ^3.7.2
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/slider": ^3.4.4
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 3437caa4673733200752de86f43d411538974255377e8a117934a6de43e3866211125f3bb2299fa624988387cc319795aeb770d4b842e32ac854a020c22d7ddc
+  languageName: node
+  linkType: hard
+
+"@nextui-org/snippet@npm:2.0.30":
+  version: 2.0.30
+  resolution: "@nextui-org/snippet@npm:2.0.30"
+  dependencies:
+    "@nextui-org/button": 2.0.26
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/tooltip": 2.0.29
+    "@nextui-org/use-clipboard": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/utils": ^3.21.1
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: c92f7bc70bb616ef5f1a319ebef1b64cc34de14a8635bbeb6e30709d349a135f18e6d2a736b21b61bf7f52138dd2c93d750da7c974fb78f4959951bc55e9c4b1
+  languageName: node
+  linkType: hard
+
+"@nextui-org/spacer@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/spacer@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 27c37d16994c02a929dd07420ea4f518f0edc7ad5c90c4059a4d08a4e07944f9c6bef13534906aad2287bd843b9769597a13df2d916822b9f595205a71aa56fd
+  languageName: node
+  linkType: hard
+
+"@nextui-org/spinner@npm:2.0.24":
+  version: 2.0.24
+  resolution: "@nextui-org/spinner@npm:2.0.24"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/system-rsc": 2.0.11
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 13d9c27273128c314a6c7a01ceba7924ae0a1cfa94bd47f77dde4d0272a779b0e59e9a7f7d7f46b0d9314f196d17220ba12e340927ac7b580e49816070f87a52
+  languageName: node
+  linkType: hard
+
+"@nextui-org/switch@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/switch@npm:2.0.25"
+  dependencies:
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/switch": ^3.5.6
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/toggle": ^3.6.3
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: d4a42a49c00abd434caaa6cf5d12f0731efbcb8ee59c6a3c1c8664c1f264501e3916867521e229d6434fd7ac95f789162d3c471513964784c0ba5ed6b4729136
+  languageName: node
+  linkType: hard
+
+"@nextui-org/system-rsc@npm:2.0.11":
+  version: 2.0.11
+  resolution: "@nextui-org/system-rsc@npm:2.0.11"
+  dependencies:
+    clsx: ^1.2.1
+  peerDependencies:
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    tailwind-variants: ">=0.1.13"
+  checksum: 153ec2633cbb2afd5ceb6b9d1c9042707369e062fe348c1fcedf3ab91b69062bebb191e953f4da2f7e5b248e91727cc6e2f285e05f170679320f9cb24a37050a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/system@npm:2.0.15":
+  version: 2.0.15
+  resolution: "@nextui-org/system@npm:2.0.15"
+  dependencies:
+    "@nextui-org/system-rsc": 2.0.11
+    "@react-aria/i18n": ^3.8.4
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/utils": ^3.8.0
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: e56fd859a1823e5c4afdf8bcd9c577838fb453000299be786f2bca3390be52b5aa50565b6827ef70a1b80d1a13722516ab06f1eda823cfdb7c01fd8a9d491d5b
+  languageName: node
+  linkType: hard
+
+"@nextui-org/table@npm:2.0.28":
+  version: 2.0.28
+  resolution: "@nextui-org/table@npm:2.0.28"
+  dependencies:
+    "@nextui-org/checkbox": 2.0.25
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-icons": 2.0.6
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/spacer": 2.0.24
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/table": ^3.13.1
+    "@react-aria/utils": ^3.21.1
+    "@react-aria/visually-hidden": ^3.8.6
+    "@react-stately/table": ^3.11.2
+    "@react-stately/virtualizer": ^3.6.4
+    "@react-types/grid": ^3.2.2
+    "@react-types/table": ^3.9.0
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 64362870d7f82977b4706147d3eeedfc672f80757fd853c1310714fe24867d27e617a177fd87b274984a60e9952a2a0c5cf90f45bf5a8cb3aaca141f70c81771
+  languageName: node
+  linkType: hard
+
+"@nextui-org/tabs@npm:2.0.26":
+  version: 2.0.26
+  resolution: "@nextui-org/tabs@npm:2.0.26"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@nextui-org/use-is-mounted": 2.0.4
+    "@nextui-org/use-update-effect": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/tabs": ^3.8.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/tabs": ^3.6.1
+    "@react-types/shared": ^3.21.0
+    "@react-types/tabs": ^3.3.3
+    scroll-into-view-if-needed: 3.0.10
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 268060d8386b5eca72262be5ce37b4807f9d835fc2c0077c0736e25a6c635fbc7fb302e33b20cf2131b49e16b8861010c85b5121099fbddcc39a613f66739aab
+  languageName: node
+  linkType: hard
+
+"@nextui-org/theme@npm:2.1.17":
+  version: 2.1.17
+  resolution: "@nextui-org/theme@npm:2.1.17"
+  dependencies:
+    color: ^4.2.3
+    color2k: ^2.0.2
+    deepmerge: 4.3.1
+    flat: ^5.0.2
+    lodash.foreach: ^4.5.0
+    lodash.get: ^4.4.2
+    lodash.kebabcase: ^4.1.1
+    lodash.mapkeys: ^4.6.0
+    lodash.omit: ^4.5.0
+    tailwind-variants: ^0.1.18
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 6651943f5da0c44312e02767582e66458b503ac277ebfd9c32e8a7d1c19189e1e527f574d03cf35ba9d87e123bdf6dcd453802c92d159103632e881b892655f7
+  languageName: node
+  linkType: hard
+
+"@nextui-org/tooltip@npm:2.0.29":
+  version: 2.0.29
+  resolution: "@nextui-org/tooltip@npm:2.0.29"
+  dependencies:
+    "@nextui-org/aria-utils": 2.0.15
+    "@nextui-org/framer-transitions": 2.0.15
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/tooltip": ^3.6.4
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/tooltip": ^3.4.5
+    "@react-types/overlays": ^3.8.3
+    "@react-types/tooltip": ^3.4.5
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    framer-motion: ">=4.0.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: afda8080dca927b821fd419c3dcf08c9c639d459c100cc7f0909a05661608ce33e11f6739797296be5eab970a14f67b4b3ed45477f03360abf32be857bc6908a
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-accordion@npm:2.0.2":
+  version: 2.0.2
+  resolution: "@nextui-org/use-aria-accordion@npm:2.0.2"
+  dependencies:
+    "@react-aria/button": ^3.8.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/selection": ^3.17.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/tree": ^3.7.3
+    "@react-types/accordion": 3.0.0-alpha.17
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+  checksum: e1a4d95cdbc0cb0bf2162ab4f3d9f9fa7a6e8b95f7a5f42d55acb3c6b48974d6d1da9e202d8191444553d36f4566d6aa3d7584fc451dbdfa62b563d49b41ee96
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-button@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/use-aria-button@npm:2.0.6"
+  dependencies:
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/button": ^3.9.0
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+  checksum: ccc2f292dce188c4c62692825a148b6ccfe1d3647043b4590a2fb76062e891eaca8bf70a8fdaf4e042678d89d31ac4c54b31b36365ad45318f09a4be28c65ad7
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-link@npm:2.0.15":
+  version: 2.0.15
+  resolution: "@nextui-org/use-aria-link@npm:2.0.15"
+  dependencies:
+    "@nextui-org/use-aria-press": 2.0.1
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/utils": ^3.21.1
+    "@react-types/link": ^3.5.1
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+  checksum: dc41e9b6562378db80d98a4dad6767ff487dbd073932ffbd995c06ca16c0ed44721583618de9f1ceed560e161f99ffa351c3717c8391998cd64b6ec2b235ccd1
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-modal-overlay@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/use-aria-modal-overlay@npm:2.0.6"
+  dependencies:
+    "@react-aria/overlays": ^3.18.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/overlays": ^3.6.3
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: a5eda1b1f5bb9031cf87fd2862d7623627326779c72d88285117d94548034fc0130d28750d253bc254fb44eebff0eecda18365bf88eb7dfa0b9b02c635853660
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-multiselect@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@nextui-org/use-aria-multiselect@npm:2.1.3"
+  dependencies:
+    "@react-aria/i18n": ^3.8.4
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/label": ^3.7.2
+    "@react-aria/listbox": ^3.11.1
+    "@react-aria/menu": ^3.11.1
+    "@react-aria/selection": ^3.17.1
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/list": ^3.10.0
+    "@react-stately/menu": ^3.5.6
+    "@react-types/button": ^3.9.0
+    "@react-types/overlays": ^3.8.3
+    "@react-types/select": ^3.8.4
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 8ffabaf6ca63d704cf95d35e3a14df1d73926631cf4483ed3e7fa4bbe94a947a76882b795d451e6b0effff11d165b9c0a827df00027bc6ee197221efb3d251b4
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-press@npm:2.0.1":
+  version: 2.0.1
+  resolution: "@nextui-org/use-aria-press@npm:2.0.1"
+  dependencies:
+    "@react-aria/interactions": ^3.19.1
+    "@react-aria/ssr": ^3.8.0
+    "@react-aria/utils": ^3.21.1
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+  checksum: 144afd24ff5f451072f2fa2e8a6ed75cdc3df4df31c43731aba1f8cfc461aa2387d5678f7d6472fb2955a7ca0d5fdd3101d4eb7f063c3747a7e47f0043bbc566
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-aria-toggle-button@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/use-aria-toggle-button@npm:2.0.6"
+  dependencies:
+    "@nextui-org/use-aria-button": 2.0.6
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/toggle": ^3.6.3
+    "@react-types/button": ^3.9.0
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ">=18"
+  checksum: 0c7cb72e0159c427ff735aa66a29d43d1891bc2d420565368d9e5f513f0c2a2da1e34c55a876f42bb46ca03744fb06ee1e63f3492cb9e6bddb4185a5470afe38
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-callback-ref@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-callback-ref@npm:2.0.4"
+  dependencies:
+    "@nextui-org/use-safe-layout-effect": 2.0.4
+  peerDependencies:
+    react: ">=18"
+  checksum: 91cb2e2de25411315711285c45e1a6e4b196642c6ce3c36e72e5464a87652d97379795e96e2bb6f323e005b0c2d7ae4699818da7bf800791b3b7c58fa71a190c
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-clipboard@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-clipboard@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: c7f85d9249db6378bb2e199aed38221ed0332658f6bf06cd1d56732b816f2a94bc05eacc2ade9c791244d3b39dafbf760838075896ec1030e3fab60b17bea0cc
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-data-scroll-overflow@npm:2.1.2":
+  version: 2.1.2
+  resolution: "@nextui-org/use-data-scroll-overflow@npm:2.1.2"
+  dependencies:
+    "@nextui-org/shared-utils": 2.0.4
+  peerDependencies:
+    react: ">=18"
+  checksum: 87db7e4fc7fcdf712633aef869c1ddd558e7236f6e75b58ce0caffb44d12e4a59f0efa94ea53b153bfd1add05ef93e33ec3e3e5e25441ef37d8f56a29df3d9ca
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-disclosure@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/use-disclosure@npm:2.0.6"
+  dependencies:
+    "@nextui-org/use-callback-ref": 2.0.4
+    "@react-aria/utils": ^3.21.1
+    "@react-stately/utils": ^3.8.0
+  peerDependencies:
+    react: ">=18"
+  checksum: 2a3ad5063f5dc53d2d567465e1172d6bad1adad737aa1ac8c56ad2bd09657297189e770a4e1276493c676b8ebd15dab56ff025f7776a888cd8aeeb10b30ab4f6
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-image@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-image@npm:2.0.4"
+  dependencies:
+    "@nextui-org/use-safe-layout-effect": 2.0.4
+  peerDependencies:
+    react: ">=18"
+  checksum: ae872361316605571ad5a26b00301b2ad2576b5b3612646a1f9657293feaecf2014cbea603869e4242283637ef1f63fb54f8cc8930107ecbde94a99595a18b27
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-is-mobile@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@nextui-org/use-is-mobile@npm:2.0.6"
+  dependencies:
+    "@react-aria/ssr": ^3.8.0
+  peerDependencies:
+    react: ">=18"
+  checksum: 926717af38f034b90effb8c25bf517d176fdf191ea606c3ecfeef99b59e444fb170f565859f29ace462b8fd1cc50ec126204c25c015ae2765a5c8152a359bbd3
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-is-mounted@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-is-mounted@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: 97d7c78779fd7f917548f9c89a99a62d4f1add16538df5d5538f0c4329d9293a3e266b52f4c9e624c51b7c108bf53ab0b67ba3c07198687d15852521a38ae2db
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-pagination@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-pagination@npm:2.0.4"
+  dependencies:
+    "@nextui-org/shared-utils": 2.0.4
+  peerDependencies:
+    react: ">=18"
+  checksum: c2d91eda1f45e9d2c90c2ab0d47973aac220de88f639ae3bb5aadeea3ea699a417b2f782446b96272126e414321d7d6891d92924e02efee5cac4e14b28a0cb8d
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-safe-layout-effect@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-safe-layout-effect@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: dabd362e70711cc0f65ce8cc32e86981a91882624ed90031c6232c8d3c3dd4a1729a4b1a32ec45e0a25c2e5345608f3916a5f4a80ef16b5f626fc59557625e88
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-scroll-position@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-scroll-position@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: 1ffe6114f068469df130391fae9c86326cb3dc3ca26d26955ae319fcb8a8ba0b86b9e6041f5816debb2a6779d83db2bd8ad6cf0f52ea3b6c5987b595df0f98ba
+  languageName: node
+  linkType: hard
+
+"@nextui-org/use-update-effect@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@nextui-org/use-update-effect@npm:2.0.4"
+  peerDependencies:
+    react: ">=18"
+  checksum: 7a95a32cb6ccd23732bca73340789c543f7f36e1edb5372d72ba585d4ac714ad14ec510e62803f48af8367a958b5c19f7c6562608da2186dec8da5f4de1a11aa
+  languageName: node
+  linkType: hard
+
+"@nextui-org/user@npm:2.0.25":
+  version: 2.0.25
+  resolution: "@nextui-org/user@npm:2.0.25"
+  dependencies:
+    "@nextui-org/avatar": 2.0.24
+    "@nextui-org/react-utils": 2.0.10
+    "@nextui-org/shared-utils": 2.0.4
+    "@react-aria/focus": ^3.14.3
+    "@react-aria/utils": ^3.21.1
+  peerDependencies:
+    "@nextui-org/system": ">=2.0.0"
+    "@nextui-org/theme": ">=2.1.0"
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 8c70a81f9c2d0fcba389ccaa93f1434209624b16445c11be81e25949d466657534f76d03dd9027eec65699c23d555685d8d7b2329d12edaf9534902062a8a0c0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": 2.0.5
+    run-parallel: ^1.1.9
+  checksum: a970d595bd23c66c880e0ef1817791432dbb7acbb8d44b7e7d0e7a22f4521260d4a83f7f9fd61d44fda4610105577f8f58a60718105fb38352baed612fd79e59
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": 2.1.5
+    fastq: ^1.6.0
+  checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@npmcli/fs@npm:3.1.0"
+  dependencies:
+    semver: ^7.3.5
+  checksum: a50a6818de5fc557d0b0e6f50ec780a7a02ab8ad07e5ac8b16bf519e0ad60a144ac64f97d05c443c3367235d337182e1d012bbac0eb8dbae8dc7b40b193efd0e
+  languageName: node
+  linkType: hard
+
+"@npmcli/git@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@npmcli/git@npm:4.1.0"
+  dependencies:
+    "@npmcli/promise-spawn": ^6.0.0
+    lru-cache: ^7.4.4
+    npm-pick-manifest: ^8.0.0
+    proc-log: ^3.0.0
+    promise-inflight: ^1.0.1
+    promise-retry: ^2.0.1
+    semver: ^7.3.5
+    which: ^3.0.0
+  checksum: 37efb926593f294eb263297cdfffec9141234f977b89a7a6b95ff7a72576c1d7f053f4961bc4b5e79dea6476fe08e0f3c1ed9e4aeb84169e357ff757a6a70073
+  languageName: node
+  linkType: hard
+
+"@npmcli/package-json@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@npmcli/package-json@npm:4.0.1"
+  dependencies:
+    "@npmcli/git": ^4.1.0
+    glob: ^10.2.2
+    hosted-git-info: ^6.1.1
+    json-parse-even-better-errors: ^3.0.0
+    normalize-package-data: ^5.0.0
+    proc-log: ^3.0.0
+    semver: ^7.5.3
+  checksum: 699b80a72f1389b119d91131d312b514aa9ff6194377d90470dd91af95a63d497121db07cbc54d82a71d22c039edbc92b0666e7d699619550e1a6825391d756b
+  languageName: node
+  linkType: hard
+
+"@npmcli/promise-spawn@npm:^6.0.0":
+  version: 6.0.2
+  resolution: "@npmcli/promise-spawn@npm:6.0.2"
+  dependencies:
+    which: ^3.0.0
+  checksum: aa725780c13e1f97ab32ed7bcb5a207a3fb988e1d7ecdc3d22a549a22c8034740366b351c4dde4b011bcffcd8c4a7be6083d9cf7bc7e897b88837150de018528
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 6ad6a00fc4f2f2cfc6bff76fb1d88b8ee20bc0601e18ebb01b6d4be583733a860239a521a7fbca73b612e66705078809483549d2b18f370eb346c5155c8e4a0f
+  languageName: node
+  linkType: hard
+
+"@playwright/test@npm:^1.40.1":
+  version: 1.40.1
+  resolution: "@playwright/test@npm:1.40.1"
+  dependencies:
+    playwright: 1.40.1
+  bin:
+    playwright: cli.js
+  checksum: ae094e6cb809365c0707ee2b184e42d2a2542569ada020d2d44ca5866066941262bd9a67af185f86c2fb0133c9b712ea8cb73e2959a289e4261c5fd17077283c
+  languageName: node
+  linkType: hard
+
+"@react-aria/breadcrumbs@npm:^3.5.7":
+  version: 3.5.8
+  resolution: "@react-aria/breadcrumbs@npm:3.5.8"
+  dependencies:
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/link": ^3.6.2
+    "@react-aria/utils": ^3.22.0
+    "@react-types/breadcrumbs": ^3.7.2
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 88524d5ef11f395a0068905a7e5ca2025b98b406f8876950cfd23d4e73decff5721fcdd191ef280b5bcf32b4f2dfcee01cb0e8859061567af685257e9c917e95
+  languageName: node
+  linkType: hard
+
+"@react-aria/button@npm:^3.8.4":
+  version: 3.9.0
+  resolution: "@react-aria/button@npm:3.9.0"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/toggle": ^3.7.0
+    "@react-types/button": ^3.9.1
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 267788203dbbc0a006bfbb4cd02e90c1dd22c6130805dc797f46714d3464c641a77a025eead6cbd1bd150e1b83d9225ba3248af2dbb9aaae8bf06af7e50e1598
+  languageName: node
+  linkType: hard
+
+"@react-aria/checkbox@npm:^3.11.2":
+  version: 3.12.0
+  resolution: "@react-aria/checkbox@npm:3.12.0"
+  dependencies:
+    "@react-aria/form": ^3.0.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/toggle": ^3.9.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/checkbox": ^3.6.0
+    "@react-stately/form": ^3.0.0
+    "@react-stately/toggle": ^3.7.0
+    "@react-types/checkbox": ^3.6.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 37e68e1e4d85546da290e2dd156922e64802caabe319ca1701365cca22157b0c6176780b81e451f871d38c0bf7b67342009c0fce1ca86f48bb858912200591e7
+  languageName: node
+  linkType: hard
+
+"@react-aria/combobox@npm:^3.7.1":
+  version: 3.8.0
+  resolution: "@react-aria/combobox@npm:3.8.0"
+  dependencies:
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/listbox": ^3.11.2
+    "@react-aria/live-announcer": ^3.3.1
+    "@react-aria/menu": ^3.11.2
+    "@react-aria/overlays": ^3.19.0
+    "@react-aria/selection": ^3.17.2
+    "@react-aria/textfield": ^3.13.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/combobox": ^3.8.0
+    "@react-stately/form": ^3.0.0
+    "@react-types/button": ^3.9.1
+    "@react-types/combobox": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a8e9657d9aff3adeefc649096f26025b4aa989b951b367a0de2f52b8d210065fb14f13ed3fdc718ec198c19e5707677f53498ba3a55fd1d554da6626a7506482
+  languageName: node
+  linkType: hard
+
+"@react-aria/dialog@npm:^3.5.7":
+  version: 3.5.8
+  resolution: "@react-aria/dialog@npm:3.5.8"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/overlays": ^3.19.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/dialog": ^3.5.7
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 605f9be0d7b6f80924e4b1977531193c5ea677053a0039d442bd1d8e335f3dc3973fff7e3ff471c2d58b757b27e9e212a9691114c0ee46446cd4d7ac275d6a14
+  languageName: node
+  linkType: hard
+
+"@react-aria/focus@npm:^3.14.3, @react-aria/focus@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "@react-aria/focus@npm:3.15.0"
+  dependencies:
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+    clsx: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 28db7975faf3295b91a68ff61e77f02e3fa260a2b1f3376fd3fd52cade8f8c916f1c725d71b2ceddeb29999d4ddcf0e2a22f2ececaa4788f756977677985fc1c
+  languageName: node
+  linkType: hard
+
+"@react-aria/form@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@react-aria/form@npm:3.0.0"
+  dependencies:
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/form": ^3.0.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 564281ebf9c6157eb65e3611c37ddfbc74999ed4e033b4a9fbb1f96cac7543bbe1b06c3fea2d6d239017ff1a6e591881b311cb460398268b89aef4b831d94f33
+  languageName: node
+  linkType: hard
+
+"@react-aria/grid@npm:^3.8.5":
+  version: 3.8.5
+  resolution: "@react-aria/grid@npm:3.8.5"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/live-announcer": ^3.3.1
+    "@react-aria/selection": ^3.17.2
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/grid": ^3.8.3
+    "@react-stately/selection": ^3.14.1
+    "@react-stately/virtualizer": ^3.6.5
+    "@react-types/checkbox": ^3.6.0
+    "@react-types/grid": ^3.2.3
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 22bbe8e9680cb80391ac544f989e1ad76e97201e8063c3d9b34ac21aa072ef2b13df6979aa9837fd4914b9639d87fe46628b5a40261c7c879a33d30251b3a5be
+  languageName: node
+  linkType: hard
+
+"@react-aria/i18n@npm:^3.8.4, @react-aria/i18n@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-aria/i18n@npm:3.9.0"
+  dependencies:
+    "@internationalized/date": ^3.5.0
+    "@internationalized/message": ^3.1.1
+    "@internationalized/number": ^3.4.0
+    "@internationalized/string": ^3.1.1
+    "@react-aria/ssr": ^3.9.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 01d2f712eed47063265ecc9507c3bb6e7f3692f5c94781856400f1750d5470f2682b079c69026b99c1474435bc97672ceec9d51ce79d1bb615e8b4dac067895d
+  languageName: node
+  linkType: hard
+
+"@react-aria/interactions@npm:^3.19.1, @react-aria/interactions@npm:^3.20.0":
+  version: 3.20.0
+  resolution: "@react-aria/interactions@npm:3.20.0"
+  dependencies:
+    "@react-aria/ssr": ^3.9.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 25e1210d1002559f47e7855ac184a969481838cf6c567a6de8f0f86dfffb9aa86c90234ac35d49e5f16b3959fe075dcf8dca28e87f3d0001579005da35258ab1
+  languageName: node
+  linkType: hard
+
+"@react-aria/label@npm:^3.7.2, @react-aria/label@npm:^3.7.3":
+  version: 3.7.3
+  resolution: "@react-aria/label@npm:3.7.3"
+  dependencies:
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: c97f6fc3866009c0869a1169539d897b6540ea1ae9268e1fa694b86b3448ec1e4c6c16e320fa92c3df2448e0dd43300af781419cc7da9377400e280826bdac5a
+  languageName: node
+  linkType: hard
+
+"@react-aria/link@npm:^3.6.1, @react-aria/link@npm:^3.6.2":
+  version: 3.6.2
+  resolution: "@react-aria/link@npm:3.6.2"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/link": ^3.5.2
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9c7f4486148772dea59960434d53c8183e076764ce89b374c3f0525c4e07e7f729bd7b6b557af2795d800377df13efa24d6b093b95381df5b9c7f5703bbf787e
+  languageName: node
+  linkType: hard
+
+"@react-aria/listbox@npm:^3.11.1, @react-aria/listbox@npm:^3.11.2":
+  version: 3.11.2
+  resolution: "@react-aria/listbox@npm:3.11.2"
+  dependencies:
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/selection": ^3.17.2
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/list": ^3.10.1
+    "@react-types/listbox": ^3.4.6
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 25e6e132297c7d836f77fc1b7e9597fcd3dbda22fed292f7dc5d7dc69e47f7a5662fc2aaa1b6723512f5a24c8b1f9ae1a87110a390796a2d1402f3baf2e49ebe
+  languageName: node
+  linkType: hard
+
+"@react-aria/live-announcer@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "@react-aria/live-announcer@npm:3.3.1"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: df4e161247c87038eabf3f623a3ce18ef486f6c8a3e136b9c91bf3585312f48759cbd5d8ba6d0236231ee3070343798b9865a15a07afd9dabebafc0249a1fda7
+  languageName: node
+  linkType: hard
+
+"@react-aria/menu@npm:^3.11.1, @react-aria/menu@npm:^3.11.2":
+  version: 3.11.2
+  resolution: "@react-aria/menu@npm:3.11.2"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/overlays": ^3.19.0
+    "@react-aria/selection": ^3.17.2
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/menu": ^3.5.7
+    "@react-stately/tree": ^3.7.4
+    "@react-types/button": ^3.9.1
+    "@react-types/menu": ^3.9.6
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f2c3ee4077bd606dc4594ea1c107e3392745bb18c2639f95ab0a2e5120fe8eded473fa794908aebdbd4af708ce270646b0d19fb501a9f8a915b2cd11baa14cd0
+  languageName: node
+  linkType: hard
+
+"@react-aria/overlays@npm:^3.18.1, @react-aria/overlays@npm:^3.19.0":
+  version: 3.19.0
+  resolution: "@react-aria/overlays@npm:3.19.0"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/ssr": ^3.9.0
+    "@react-aria/utils": ^3.22.0
+    "@react-aria/visually-hidden": ^3.8.7
+    "@react-stately/overlays": ^3.6.4
+    "@react-types/button": ^3.9.1
+    "@react-types/overlays": ^3.8.4
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 53712ecdf4833378b3a2ea787d768717aac29dec93fe997fea0974fab769bff7d2d6ad228a2a25fbad75d906445e7fa755e778a63f367f71524a3a8634bbdb7a
+  languageName: node
+  linkType: hard
+
+"@react-aria/progress@npm:^3.4.7":
+  version: 3.4.8
+  resolution: "@react-aria/progress@npm:3.4.8"
+  dependencies:
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/utils": ^3.22.0
+    "@react-types/progress": ^3.5.1
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: fdd30e055d95f3516301609768ab34f24dca06139e55a7ce3d38b11ed1d751d608f7d451b4dd9fa0b588edb8ba4ab5fc9a7a99866c5d27b6ae6d4247a8659a9f
+  languageName: node
+  linkType: hard
+
+"@react-aria/radio@npm:^3.8.2":
+  version: 3.9.0
+  resolution: "@react-aria/radio@npm:3.9.0"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/form": ^3.0.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/radio": ^3.10.0
+    "@react-types/radio": ^3.6.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b226ce81e4d624a1f298768cd1e0ee48fed45489d623230e260337bb82afeeea6d84b2f15a9ac92c47809b11ad402ae195b2a7203d26442fcd798c88cfd7334d
+  languageName: node
+  linkType: hard
+
+"@react-aria/selection@npm:^3.17.1, @react-aria/selection@npm:^3.17.2":
+  version: 3.17.2
+  resolution: "@react-aria/selection@npm:3.17.2"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/selection": ^3.14.1
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b707a07f095904884916ba68b9517e5c2754f3408d8a16e9d9c20aed412db9e39a8012b48867dd3a751e715e61c86d56d93c7c7bbf9bfc897d2c22a20faa6f5f
+  languageName: node
+  linkType: hard
+
+"@react-aria/slider@npm:^3.7.2":
+  version: 3.7.3
+  resolution: "@react-aria/slider@npm:3.7.3"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/slider": ^3.4.5
+    "@react-types/shared": ^3.22.0
+    "@react-types/slider": ^3.7.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 216d47eca70c25450123a4d72574dcbd21528db3c523dbf1c34d07663246e17de2586c92133cb81bdfa0068cec74bafe7b82a43344d0ff8977901c537ced729f
+  languageName: node
+  linkType: hard
+
+"@react-aria/ssr@npm:^3.8.0, @react-aria/ssr@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-aria/ssr@npm:3.9.0"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7b708494e7c59c4cda8c21f8580d989e7758e854b043d597a0513ee2b08c86e9b877d9f6d5eea9df758bf1b1abdb5adfcba1871e38578ecdf1fe561980addda9
+  languageName: node
+  linkType: hard
+
+"@react-aria/switch@npm:^3.5.6":
+  version: 3.5.7
+  resolution: "@react-aria/switch@npm:3.5.7"
+  dependencies:
+    "@react-aria/toggle": ^3.9.0
+    "@react-stately/toggle": ^3.7.0
+    "@react-types/switch": ^3.5.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4b39d6a71229da2a190ecaa5c1624c5eac38bd1a2eec57062f0e51c5aa69e41813492ede5db1580ae6df86d8ec084eafd8cdda1940898756bc61d4b2feddcb49
+  languageName: node
+  linkType: hard
+
+"@react-aria/table@npm:^3.13.1":
+  version: 3.13.2
+  resolution: "@react-aria/table@npm:3.13.2"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/grid": ^3.8.5
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/live-announcer": ^3.3.1
+    "@react-aria/utils": ^3.22.0
+    "@react-aria/visually-hidden": ^3.8.7
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/flags": ^3.0.0
+    "@react-stately/table": ^3.11.3
+    "@react-stately/virtualizer": ^3.6.5
+    "@react-types/checkbox": ^3.6.0
+    "@react-types/grid": ^3.2.3
+    "@react-types/shared": ^3.22.0
+    "@react-types/table": ^3.9.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2b5134445601220f18aa0953310bed8b058eaaa9789a55b14c9dd28acd68ecd6f23a780e46befa631eda5aeb0a584000d44b9b5b92dc6d8faa792d38585804b5
+  languageName: node
+  linkType: hard
+
+"@react-aria/tabs@npm:^3.8.1":
+  version: 3.8.2
+  resolution: "@react-aria/tabs@npm:3.8.2"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/i18n": ^3.9.0
+    "@react-aria/selection": ^3.17.2
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/tabs": ^3.6.2
+    "@react-types/shared": ^3.22.0
+    "@react-types/tabs": ^3.3.4
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 68ced36bb3ee801531129f9ac27f4f6aaf37a80ec5c8990131911a14e3f34cb6e09c7d7e11a7d19573b02510fbcbd79e35487f68809220c77e4b0e91caa643ec
+  languageName: node
+  linkType: hard
+
+"@react-aria/textfield@npm:^3.12.2, @react-aria/textfield@npm:^3.13.0":
+  version: 3.13.0
+  resolution: "@react-aria/textfield@npm:3.13.0"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/form": ^3.0.0
+    "@react-aria/label": ^3.7.3
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/form": ^3.0.0
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@react-types/textfield": ^3.9.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ed41dd6a420ffe18f169e3370286b6f210c6986a73f32c3a525951631bcbba0165b9bd16e1a5f872d53a674fd3a8e5f1aedf967fb9b0371cfdf6d09579ea2d01
+  languageName: node
+  linkType: hard
+
+"@react-aria/toggle@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-aria/toggle@npm:3.9.0"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/toggle": ^3.7.0
+    "@react-types/checkbox": ^3.6.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a6c3ca65d24f93d5fc38a6e2a74115bdc669daf866dab9001a0428989a01e81770e4a815c249c9465b1969c5026ae7b1efa6e6a8df1cb6236c22eda0d94e4599
+  languageName: node
+  linkType: hard
+
+"@react-aria/tooltip@npm:^3.6.4":
+  version: 3.6.5
+  resolution: "@react-aria/tooltip@npm:3.6.5"
+  dependencies:
+    "@react-aria/focus": ^3.15.0
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-stately/tooltip": ^3.4.6
+    "@react-types/shared": ^3.22.0
+    "@react-types/tooltip": ^3.4.6
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6f65a5889e5a59257c8740f2877ab9b2f3e882881aa55a24fe14fdfd1eaa50828dc54c238275d638c2c74453a564cd27b04b077450297de56435913f8f90321d
+  languageName: node
+  linkType: hard
+
+"@react-aria/utils@npm:^3.21.1, @react-aria/utils@npm:^3.22.0":
+  version: 3.22.0
+  resolution: "@react-aria/utils@npm:3.22.0"
+  dependencies:
+    "@react-aria/ssr": ^3.9.0
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+    clsx: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4ed769920d76eac437dbf31a09ac597bddbcf1f47f6c74336d1e19acbf2fda9a9e4bf00fe0da789512604dddb0ea16599dc9da49a58b74de3a8d7b72015dd787
+  languageName: node
+  linkType: hard
+
+"@react-aria/visually-hidden@npm:^3.8.6, @react-aria/visually-hidden@npm:^3.8.7":
+  version: 3.8.7
+  resolution: "@react-aria/visually-hidden@npm:3.8.7"
+  dependencies:
+    "@react-aria/interactions": ^3.20.0
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 72cc9e6614bf424c1af298fa3e8dbd79400bb8290d37e5d278de2df4cd54417ee9a00fb69295727dad187bd1b7cb3e893e82be023c3a4f0f2accf698f5002b82
+  languageName: node
+  linkType: hard
+
+"@react-stately/checkbox@npm:^3.5.1, @react-stately/checkbox@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@react-stately/checkbox@npm:3.6.0"
+  dependencies:
+    "@react-stately/form": ^3.0.0
+    "@react-stately/utils": ^3.9.0
+    "@react-types/checkbox": ^3.6.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f8dbe86094e47965556be2228e0c376edc70c198233ff4d2e1d29bdf55122b49231d318fa8e720b167336b65a12b2233d8be3409fb5cc7ded7aa3f4f7a3a26bd
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/private-theming@npm:5.14.18"
+"@react-stately/collections@npm:^3.10.2, @react-stately/collections@npm:^3.10.3":
+  version: 3.10.3
+  resolution: "@react-stately/collections@npm:3.10.3"
   dependencies:
-    "@babel/runtime": ^7.23.2
-    "@mui/utils": ^5.14.18
-    prop-types: ^15.8.1
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
   peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: e7ba8e945f589db16ed05d507b0821d2e07b3d760bf78c9f745a75d75b5a94d1e546278629de15b090de289a9244591bfa2c09bb9f9f8679fb4e1d8cec360833
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f1c9732b67c90f1a5035c696d4326ef3710a8cbbfd3d6c64d88080c77d6e785d5de1484a9507f5bf9dcad2bd5ba25682899cd6376b2554b9210004d359f8d739
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/styled-engine@npm:5.14.18"
+"@react-stately/combobox@npm:^3.7.1, @react-stately/combobox@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "@react-stately/combobox@npm:3.8.0"
   dependencies:
-    "@babel/runtime": ^7.23.2
-    "@emotion/cache": ^11.11.0
-    csstype: ^3.1.2
-    prop-types: ^15.8.1
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/form": ^3.0.0
+    "@react-stately/list": ^3.10.1
+    "@react-stately/menu": ^3.5.7
+    "@react-stately/select": ^3.6.0
+    "@react-stately/utils": ^3.9.0
+    "@react-types/combobox": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
   peerDependencies:
-    "@emotion/react": ^11.4.1
-    "@emotion/styled": ^11.3.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-  checksum: 6eba307d95ef462f8b80aaa50ec1db7409d19cead985eba28e86aec066ad4bc70b0daa6d89158a7aae88ea43d614cace5f890cbebe0d8636573e894b7da9cae1
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d13206b9d78348f9289a128b3674ada7c01b6dc182b8b28da5ab8cb902f843e46e5600dbe0ed190830733abafe06bf5909a76f1065c9b2e832cc93e9165787c7
+  languageName: node
+  linkType: hard
+
+"@react-stately/flags@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@react-stately/flags@npm:3.0.0"
+  dependencies:
+    "@swc/helpers": ^0.4.14
+  checksum: 7bf5c08707d939a62d5739d2933e4057bc3f3587709521584000248dbdfb268423927eec4ee84a005197f6c8da54d8036d4eda094e50b930166f1dc5ac4be2ce
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/system@npm:5.14.18"
+"@react-stately/form@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@react-stately/form@npm:3.0.0"
   dependencies:
-    "@babel/runtime": ^7.23.2
-    "@mui/private-theming": ^5.14.18
-    "@mui/styled-engine": ^5.14.18
-    "@mui/types": ^7.2.9
-    "@mui/utils": ^5.14.18
-    clsx: ^2.0.0
-    csstype: ^3.1.2
-    prop-types: ^15.8.1
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
   peerDependencies:
-    "@emotion/react": ^11.5.0
-    "@emotion/styled": ^11.3.0
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 8f7c4f3555ee64467826e1a40cfdb34b5c02520fd9f27779b8e6aa97cb9bbd27d98386a194d2e4c44b148babe5f67e3a715f8a09c03a1d71f2f14ddf60045174
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: cd0866ab6a87b00fc7986537da02c6857b5b08c9f01a9e91d4bd8372254fbfc8f8c7ca226582a833d347e7f0934a0ee61c6b52779901977846abe623c97b3791
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.9":
-  version: 7.2.9
-  resolution: "@mui/types@npm:7.2.9"
+"@react-stately/grid@npm:^3.8.3":
+  version: 3.8.3
+  resolution: "@react-stately/grid@npm:3.8.3"
+  dependencies:
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/selection": ^3.14.1
+    "@react-types/grid": ^3.2.3
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
   peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 4888a1cf9a1adbae1c2f53ba9f8a0cf23eb5e0954bca00b958c240c87b5287771cb5e99bedb61a2c04f5dcbdef13a5b1f238153e98d8959ba51c5470db2c4b32
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7870791a69ad387164729efc8fbb32c83519259482fb8ffa11ca59bb51e7388ac579110c378efb13c1589a3be61eb0021dd0095f0f34c83d70117945e82ff3fb
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.14.18":
-  version: 5.14.18
-  resolution: "@mui/utils@npm:5.14.18"
+"@react-stately/list@npm:^3.10.0, @react-stately/list@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "@react-stately/list@npm:3.10.1"
   dependencies:
-    "@babel/runtime": ^7.23.2
-    "@types/prop-types": ^15.7.10
-    prop-types: ^15.8.1
-    react-is: ^18.2.0
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/selection": ^3.14.1
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
   peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: f24badcb6b026b392b94919f65c7f3bea6cfb0f741c1b8ebd74b02bba9ffc61f72e35bdea887e47dfd97d37ff465863aa29c7c5cfd33fb83224f4ff2300432b3
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 57908e73fb498c0f490992e2f92ee5f314ef805dcc0699805a83bf6212efc7fad672210a01a6407424e82fea50ce136352d4e8561c688e1cf3d1048f722c2a08
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@react-stately/menu@npm:^3.5.6, @react-stately/menu@npm:^3.5.7":
+  version: 3.5.7
+  resolution: "@react-stately/menu@npm:3.5.7"
   dependencies:
-    "@nodelib/fs.stat": 2.0.5
-    run-parallel: ^1.1.9
-  checksum: a970d595bd23c66c880e0ef1817791432dbb7acbb8d44b7e7d0e7a22f4521260d4a83f7f9fd61d44fda4610105577f8f58a60718105fb38352baed612fd79e59
+    "@react-stately/overlays": ^3.6.4
+    "@react-types/menu": ^3.9.6
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: efb47a115d52e05a1ad7bb934ad6062e32e67072f5173a513ccc9817c87ccc2534df13cd614531ff72d5590fa541fb6014dcde400a7bd5ce4acc4d22c5035107
   languageName: node
   linkType: hard
 
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+"@react-stately/overlays@npm:^3.6.3, @react-stately/overlays@npm:^3.6.4":
+  version: 3.6.4
+  resolution: "@react-stately/overlays@npm:3.6.4"
+  dependencies:
+    "@react-stately/utils": ^3.9.0
+    "@react-types/overlays": ^3.8.4
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 39a3a6543449cfecf341b514a07c90e0ee796b0e67672807517ce64e2452af6151e343f2141f7f219400ccd17d4e6e7f8fb5094e3a224ab8381be0e6a7f5dde1
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@react-stately/radio@npm:^3.10.0, @react-stately/radio@npm:^3.9.1":
+  version: 3.10.0
+  resolution: "@react-stately/radio@npm:3.10.0"
   dependencies:
-    "@nodelib/fs.scandir": 2.1.5
-    fastq: ^1.6.0
-  checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53
+    "@react-stately/form": ^3.0.0
+    "@react-stately/utils": ^3.9.0
+    "@react-types/radio": ^3.6.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 43f2fad6bc605b83c83b560123fa4bf22480c251392a98807eaff36eb9164a05a1d0238c6673b68a25521a8693e133f6953849e57213ce275bbd373ede24344f
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@react-stately/select@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@react-stately/select@npm:3.6.0"
+  dependencies:
+    "@react-stately/form": ^3.0.0
+    "@react-stately/list": ^3.10.1
+    "@react-stately/menu": ^3.5.7
+    "@react-types/select": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 712b7408aa5c58b5c6402df1de44e80013a25cc1cf6dc7f9a38f540d2e87d851198ef3549a9877b39a46d8786de20ce19a7bd25a1f01b162813ac683b258e1df
+  languageName: node
+  linkType: hard
+
+"@react-stately/selection@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-stately/selection@npm:3.14.1"
   dependencies:
-    semver: ^7.3.5
-  checksum: a50a6818de5fc557d0b0e6f50ec780a7a02ab8ad07e5ac8b16bf519e0ad60a144ac64f97d05c443c3367235d337182e1d012bbac0eb8dbae8dc7b40b193efd0e
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 56ef39b51f70164e8d5485461c3b94ba1f7fec9c42991d85553bda71d477881413cd7a49a468dc234c6abedde0724ac0b1da306746eb1febec1a166004d8218c
   languageName: node
   linkType: hard
 
-"@npmcli/git@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "@npmcli/git@npm:4.1.0"
+"@react-stately/slider@npm:^3.4.4, @react-stately/slider@npm:^3.4.5":
+  version: 3.4.5
+  resolution: "@react-stately/slider@npm:3.4.5"
   dependencies:
-    "@npmcli/promise-spawn": ^6.0.0
-    lru-cache: ^7.4.4
-    npm-pick-manifest: ^8.0.0
-    proc-log: ^3.0.0
-    promise-inflight: ^1.0.1
-    promise-retry: ^2.0.1
-    semver: ^7.3.5
-    which: ^3.0.0
-  checksum: 37efb926593f294eb263297cdfffec9141234f977b89a7a6b95ff7a72576c1d7f053f4961bc4b5e79dea6476fe08e0f3c1ed9e4aeb84169e357ff757a6a70073
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@react-types/slider": ^3.7.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ca7224438840936a78d66b2c3060fd174cf1d5626fcb2bc5e9c6225a30280eed8599649a1c98d712b3c3e91099e59140b938fa505474cfe35c6b7db9af9dcbc3
   languageName: node
   linkType: hard
 
-"@npmcli/package-json@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@npmcli/package-json@npm:4.0.1"
+"@react-stately/table@npm:^3.11.2, @react-stately/table@npm:^3.11.3":
+  version: 3.11.3
+  resolution: "@react-stately/table@npm:3.11.3"
   dependencies:
-    "@npmcli/git": ^4.1.0
-    glob: ^10.2.2
-    hosted-git-info: ^6.1.1
-    json-parse-even-better-errors: ^3.0.0
-    normalize-package-data: ^5.0.0
-    proc-log: ^3.0.0
-    semver: ^7.5.3
-  checksum: 699b80a72f1389b119d91131d312b514aa9ff6194377d90470dd91af95a63d497121db07cbc54d82a71d22c039edbc92b0666e7d699619550e1a6825391d756b
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/flags": ^3.0.0
+    "@react-stately/grid": ^3.8.3
+    "@react-stately/selection": ^3.14.1
+    "@react-stately/utils": ^3.9.0
+    "@react-types/grid": ^3.2.3
+    "@react-types/shared": ^3.22.0
+    "@react-types/table": ^3.9.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8da2a3704c01f09e033ab9a05f2292de6ebe95753a24bc573e0a926812349a3ebc6aa131261ab3dcf814cbabae33a466d0b4926308f276227d3244b8a80b14ed
   languageName: node
   linkType: hard
 
-"@npmcli/promise-spawn@npm:^6.0.0":
-  version: 6.0.2
-  resolution: "@npmcli/promise-spawn@npm:6.0.2"
+"@react-stately/tabs@npm:^3.6.1, @react-stately/tabs@npm:^3.6.2":
+  version: 3.6.2
+  resolution: "@react-stately/tabs@npm:3.6.2"
   dependencies:
-    which: ^3.0.0
-  checksum: aa725780c13e1f97ab32ed7bcb5a207a3fb988e1d7ecdc3d22a549a22c8034740366b351c4dde4b011bcffcd8c4a7be6083d9cf7bc7e897b88837150de018528
+    "@react-stately/list": ^3.10.1
+    "@react-types/shared": ^3.22.0
+    "@react-types/tabs": ^3.3.4
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6cc064bd38ceb9ba812020d457dc38a502b8a746c4a1b6e1d5c0c27c0ceaa0236d0b5c0777880c08e011ad88bc892c48a98150b953fbd6d0bcb2a6410244b8ad
   languageName: node
   linkType: hard
 
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 6ad6a00fc4f2f2cfc6bff76fb1d88b8ee20bc0601e18ebb01b6d4be583733a860239a521a7fbca73b612e66705078809483549d2b18f370eb346c5155c8e4a0f
+"@react-stately/toggle@npm:^3.6.3, @react-stately/toggle@npm:^3.7.0":
+  version: 3.7.0
+  resolution: "@react-stately/toggle@npm:3.7.0"
+  dependencies:
+    "@react-stately/utils": ^3.9.0
+    "@react-types/checkbox": ^3.6.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6552b8da1317625683f08fa7dd7585c2cd29a30e55291f7df3fbbcc6ad45e9b0ec5c3a1261891866db215e79d0f5ddbddbfc63abab51a325522a5d523cc6376e
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.40.1":
-  version: 1.40.1
-  resolution: "@playwright/test@npm:1.40.1"
+"@react-stately/tooltip@npm:^3.4.5, @react-stately/tooltip@npm:^3.4.6":
+  version: 3.4.6
+  resolution: "@react-stately/tooltip@npm:3.4.6"
   dependencies:
-    playwright: 1.40.1
-  bin:
-    playwright: cli.js
-  checksum: ae094e6cb809365c0707ee2b184e42d2a2542569ada020d2d44ca5866066941262bd9a67af185f86c2fb0133c9b712ea8cb73e2959a289e4261c5fd17077283c
+    "@react-stately/overlays": ^3.6.4
+    "@react-types/tooltip": ^3.4.6
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6d8623d5418a38135aedef1d16aa6fa400b777904893920a80d78faf2559a287787eac6f409a5eac3b2d15e65eab9eee8e83c80768753eea53b3707938f98b8b
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.8":
-  version: 2.11.8
-  resolution: "@popperjs/core@npm:2.11.8"
-  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+"@react-stately/tree@npm:^3.7.3, @react-stately/tree@npm:^3.7.4":
+  version: 3.7.4
+  resolution: "@react-stately/tree@npm:3.7.4"
+  dependencies:
+    "@react-stately/collections": ^3.10.3
+    "@react-stately/selection": ^3.14.1
+    "@react-stately/utils": ^3.9.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7aeeb32b29e2c9184bcda5dd4c9573dd17d43a7d8b1cd1863a6e75aa7ce0e6185e856edd2330836a6a460a7cf239e7f5a1499e6dcc14a34a84be6b79dd45636e
   languageName: node
   linkType: hard
 
-"@remix-run/cloudflare-pages@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/cloudflare-pages@npm:2.3.0"
+"@react-stately/utils@npm:^3.8.0, @react-stately/utils@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-stately/utils@npm:3.9.0"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: aae38bc45086e086c47141e516f8608b6ad1a0a3c637c1da8b409515b978db0210ed102ca30135a4f733ae2265fecd1b9634cb21b7075fa48895fe7b1cfc6960
+  languageName: node
+  linkType: hard
+
+"@react-stately/virtualizer@npm:^3.6.4, @react-stately/virtualizer@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-stately/virtualizer@npm:3.6.5"
+  dependencies:
+    "@react-aria/utils": ^3.22.0
+    "@react-types/shared": ^3.22.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7bf8f82e3837d3db6aac5c8a5b1d083a8754e4f8b999444b4841ced8b4d777ede9276014f512f7910b427a2698994d33ca204468b614b54dc53622256d5e0827
+  languageName: node
+  linkType: hard
+
+"@react-types/accordion@npm:3.0.0-alpha.17":
+  version: 3.0.0-alpha.17
+  resolution: "@react-types/accordion@npm:3.0.0-alpha.17"
+  dependencies:
+    "@react-types/shared": ^3.21.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2b31e327b188f1df4ac13d57905cc85fe9d1cdb0dfc0c0963c3f1e1df7c7b5c2be7178e5584a96bca450723a326dc9f242f3f18737d7783f4c6fb3e5ee151518
+  languageName: node
+  linkType: hard
+
+"@react-types/breadcrumbs@npm:^3.7.1, @react-types/breadcrumbs@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-types/breadcrumbs@npm:3.7.2"
+  dependencies:
+    "@react-types/link": ^3.5.2
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 39e07997778fc07a9ac96348218bb2192d893e990f0a5883ed4f9d00d7e47ef8270249c07a9121b07973bc830ad96f8603b42a497d3fd176e319eeee4f0066e9
+  languageName: node
+  linkType: hard
+
+"@react-types/button@npm:^3.9.0, @react-types/button@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-types/button@npm:3.9.1"
   dependencies:
-    "@remix-run/cloudflare": 2.3.0
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 5b73d20a8ab588231b62bd32c2171f8284bf1d7dfa4c67e54d436a4e5c663af9a6a1ee93bf5deb9f08308616fe248d2a6300685ef8188b8de3c956194d834a9e
+  languageName: node
+  linkType: hard
+
+"@react-types/checkbox@npm:^3.5.2, @react-types/checkbox@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@react-types/checkbox@npm:3.6.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 867691d8af9832c9f90c6a8231fedadfc2700b177badb03d7175b0cf6c978e7bd488c2ff3b305231fbcd09f0eafe25f3d678f77c02e31ea7b36b463a15639945
+  languageName: node
+  linkType: hard
+
+"@react-types/combobox@npm:^3.8.1, @react-types/combobox@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-types/combobox@npm:3.9.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 38195595a87bd9d74b1949725b7f9ad5e4eab796da48355f2d79373aad23c311a54901aab7881f7d20339c70d8a1caccb16d3dcd7c0d92c28fc8e0fbed210f17
+  languageName: node
+  linkType: hard
+
+"@react-types/dialog@npm:^3.5.7":
+  version: 3.5.7
+  resolution: "@react-types/dialog@npm:3.5.7"
+  dependencies:
+    "@react-types/overlays": ^3.8.4
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: dc134dc0903b442b681c5c4a7b19c4eed14a8f8ee121aeb7a29bedf078b284395db653f8770f14718048734454fe1dea71221435c09375bd96098555a018181d
+  languageName: node
+  linkType: hard
+
+"@react-types/grid@npm:^3.2.2, @react-types/grid@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "@react-types/grid@npm:3.2.3"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: fef37ec725123ad30792f345198319b3081b584e59f6ccf2788ee03897278de8dfeb252d7f9636505dd76431b7d32c3c055ce2cbe554d8353d98ea530f4686c0
+  languageName: node
+  linkType: hard
+
+"@react-types/link@npm:^3.5.1, @react-types/link@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "@react-types/link@npm:3.5.2"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b7409bc9b00878d55a2caacd547641959a216b89b26bab6b96d505506b3200d672dafe87b0c747123073e04298b3a540468d80f7689a4c05f4953057fda171dc
+  languageName: node
+  linkType: hard
+
+"@react-types/listbox@npm:^3.4.6":
+  version: 3.4.6
+  resolution: "@react-types/listbox@npm:3.4.6"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e829857ff24f37f5a7660ad19e6629793241177f94df78193b80b294301e35b1193397edc426cb98e807a342ce47f1d2e83f71caf8bb9b904b4196c86d6e6062
+  languageName: node
+  linkType: hard
+
+"@react-types/menu@npm:^3.9.5, @react-types/menu@npm:^3.9.6":
+  version: 3.9.6
+  resolution: "@react-types/menu@npm:3.9.6"
+  dependencies:
+    "@react-types/overlays": ^3.8.4
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: c97cf795272247742fd5bee54fdb567d5f3e671094f25eb5abad5461c85cdd6a6be0e3ed4ab5811f98a8695bed8de50955132c43b9dade5ec7582a75435c6189
+  languageName: node
+  linkType: hard
+
+"@react-types/overlays@npm:^3.8.3, @react-types/overlays@npm:^3.8.4":
+  version: 3.8.4
+  resolution: "@react-types/overlays@npm:3.8.4"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 921903c871373de0bb862b0958d1fc6d66da527be7e5ae5a32cfe323dcfce95efab1fc948ab477870a083df44cf9aed2dea21c0b11b37da808344a317ecfa22e
+  languageName: node
+  linkType: hard
+
+"@react-types/progress@npm:^3.5.0, @react-types/progress@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@react-types/progress@npm:3.5.1"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1bc35e8df15a6087b0697faceec9a38a551dbd891ba73c5a23500531cd295e0f6ed75040a2d123281aa84567c4a92746b6b7e2a1185593c5d90f03b79e36668e
+  languageName: node
+  linkType: hard
+
+"@react-types/radio@npm:^3.5.2, @react-types/radio@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@react-types/radio@npm:3.6.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 0a6ab53bc02715f1a0934e1f2ab750c3394483479518bf13a0f00dc18c9d134cd30d0cc1ee034af7aa699b704227c06279e3bde768e4fa5ea3adce57c0d5ea60
+  languageName: node
+  linkType: hard
+
+"@react-types/select@npm:^3.8.4, @react-types/select@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-types/select@npm:3.9.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ba563e9ed2e37e05f44cab8d75ac033199bb0b016cbead711e1bbbda557168ea5139c04e57e75936675f18441961c3a85118898c15c272adf78a7a1594bbb1e8
+  languageName: node
+  linkType: hard
+
+"@react-types/shared@npm:^3.21.0, @react-types/shared@npm:^3.22.0":
+  version: 3.22.0
+  resolution: "@react-types/shared@npm:3.22.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 108d171c006ee86d01418bb2ca0e54915e8cdb276ecd82cad43bd8aa3a360654a95983b60dbf196c7b004e0307690ae7b0315d051b015277699a552619ec2b29
+  languageName: node
+  linkType: hard
+
+"@react-types/slider@npm:^3.7.0":
+  version: 3.7.0
+  resolution: "@react-types/slider@npm:3.7.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 489d0d46c54b79757952ba93cebf51ecbe9606e356f9c3ff77aba4c2f734e0c052260de5ba69c6aa2d282a2364e66829c3700a7e5157ba5cb99d91640823ec64
+  languageName: node
+  linkType: hard
+
+"@react-types/switch@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "@react-types/switch@npm:3.5.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 92f780a53b864dcd6a754631105963d3d0cf7a94a38d307540acc4adc269940be1e4be0c9723c71abb7c9de9d9a2a373b2a02a7e0e7fb3c2065e43b68f326ea1
+  languageName: node
+  linkType: hard
+
+"@react-types/table@npm:^3.9.0, @react-types/table@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-types/table@npm:3.9.1"
+  dependencies:
+    "@react-types/grid": ^3.2.3
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f12aec327d5eef717f8ec2ac8abbc2ac8a765ab3c235aa20eb9a08d3458ad66b0cac9aaf4a0292c8733a12be42f6e328a11579b0e138f98ed2ee9e4badfd6ec5
+  languageName: node
+  linkType: hard
+
+"@react-types/tabs@npm:^3.3.3, @react-types/tabs@npm:^3.3.4":
+  version: 3.3.4
+  resolution: "@react-types/tabs@npm:3.3.4"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 52d187cbd8f6c119060cb391ef4ab4836989632d255b8fa42925dbe95fea966a7de2b334e3452d32a1f341b059e1a99a13546aa2fdd3ef6acb28c6fa93d08ae1
+  languageName: node
+  linkType: hard
+
+"@react-types/textfield@npm:^3.8.1, @react-types/textfield@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@react-types/textfield@npm:3.9.0"
+  dependencies:
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7e3d47d1f4b6dcd9a32f8b206ed79a4d9839da1424134ba85c22d20ebd6e15d49fdca2120b682319d1108bbf06dac2f0803ad37b46f8394417a960475ca09af5
+  languageName: node
+  linkType: hard
+
+"@react-types/tooltip@npm:^3.4.5, @react-types/tooltip@npm:^3.4.6":
+  version: 3.4.6
+  resolution: "@react-types/tooltip@npm:3.4.6"
+  dependencies:
+    "@react-types/overlays": ^3.8.4
+    "@react-types/shared": ^3.22.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6956cba440be8ee4cc048d2d53aae8ef11424f187568d6f75c3807663cbd5de008a57803f06e8cd2f3b2aac9e9ac7907dec476270ff65f4347fd4f3cc504c3e1
+  languageName: node
+  linkType: hard
+
+"@remix-run/cloudflare-pages@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/cloudflare-pages@npm:2.4.0"
+  dependencies:
+    "@remix-run/cloudflare": 2.4.0
   peerDependencies:
     "@cloudflare/workers-types": ^4.0.0
     typescript: ^5.1.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 85d4567ca454a458ddac1a8de4232edef6140ddf950065002ad8347d0c4b7bcb53a404d5b58d7ac703eb27ef2ddb9901db4637c4ca6334ee72fc5e12927172e1
+  checksum: 08dc39630d91db244144f737793e0a60a417c1c00ba3651c7e756c6cdeffc1eb0e6cee62460a3ade1b38306636fdc6c93b574f0424807f427df42c5cad7476f4
   languageName: node
   linkType: hard
 
-"@remix-run/cloudflare@npm:2.3.0, @remix-run/cloudflare@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/cloudflare@npm:2.3.0"
+"@remix-run/cloudflare@npm:2.4.0, @remix-run/cloudflare@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/cloudflare@npm:2.4.0"
   dependencies:
     "@cloudflare/kv-asset-handler": ^0.1.3
-    "@remix-run/server-runtime": 2.3.0
+    "@remix-run/server-runtime": 2.4.0
   peerDependencies:
     "@cloudflare/workers-types": ^4.0.0
     typescript: ^5.1.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: feca4108c1494248f3fe2110186a35680ae2e8a36499a7231199bd77277da4a1bfbfb3f1efe7a4295fe078d51e5d16b8f9aeacca8457d8157fe8f8c2f4219e29
+  checksum: ee365be2caff7d5316afda08717090938e93a3de8e207f0d75e6a90d73a65c8c91e0e4111fabd3e32f7371f6d3edf4fcd6b4a662044bf8fddf9be8830d4076f7
   languageName: node
   linkType: hard
 
-"@remix-run/dev@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/dev@npm:2.3.0"
+"@remix-run/dev@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/dev@npm:2.4.0"
   dependencies:
     "@babel/core": ^7.21.8
     "@babel/generator": ^7.21.5
@@ -1881,9 +3551,9 @@ __metadata:
     "@babel/types": ^7.22.5
     "@mdx-js/mdx": ^2.3.0
     "@npmcli/package-json": ^4.0.1
-    "@remix-run/node": 2.3.0
-    "@remix-run/router": 1.12.0-pre.0
-    "@remix-run/server-runtime": 2.3.0
+    "@remix-run/node": 2.4.0
+    "@remix-run/router": 1.14.0
+    "@remix-run/server-runtime": 2.4.0
     "@types/mdx": ^2.0.5
     "@vanilla-extract/integration": ^6.2.0
     arg: ^5.0.1
@@ -1908,7 +3578,6 @@ __metadata:
     minimatch: ^9.0.0
     node-fetch: ^2.6.9
     ora: ^5.4.1
-    parse-multipart-data: ^1.5.0
     picocolors: ^1.0.0
     picomatch: ^2.3.1
     pidtree: ^0.6.0
@@ -1925,12 +3594,11 @@ __metadata:
     set-cookie-parser: ^2.6.0
     tar-fs: ^2.1.1
     tsconfig-paths: ^4.0.0
-    undici: ^5.22.1
     ws: ^7.4.5
   peerDependencies:
-    "@remix-run/serve": ^2.3.0
+    "@remix-run/serve": ^2.4.0
     typescript: ^5.1.0
-    vite: ^4.4.9 || ^5.0.0
+    vite: ^5.0.0
   peerDependenciesMeta:
     "@remix-run/serve":
       optional: true
@@ -1940,16 +3608,16 @@ __metadata:
       optional: true
   bin:
     remix: dist/cli.js
-  checksum: e28827077cb80396823d4c4656b6f1449d5c5cce502c97ff46aa54f47348f703110ddc3ac34fb5239a5960b3c4427fe7fdf72f26ca5461e756cbd5b7426b2ec1
+  checksum: f272bb63f52cf3e5d11c0070951d3096910ad2f20814fbaf8101224c9268dc7607e3e9ec100cea8ca635084b71ef924014a8b27f882931ed348707e2c8e4e45e
   languageName: node
   linkType: hard
 
-"@remix-run/node@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/node@npm:2.3.0"
+"@remix-run/node@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/node@npm:2.4.0"
   dependencies:
-    "@remix-run/server-runtime": 2.3.0
-    "@remix-run/web-fetch": ^4.4.1
+    "@remix-run/server-runtime": 2.4.0
+    "@remix-run/web-fetch": ^4.4.2
     "@remix-run/web-file": ^3.1.0
     "@remix-run/web-stream": ^1.1.0
     "@web3-storage/multipart-parser": ^1.0.0
@@ -1961,17 +3629,18 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: ad284933ee6c456d58a856b4d11f78a8f524de59b65eec9e9ece7abe22500ae3162a56a55cb30953548f6657dcb24ed733049aecca6a55b5f55c8662bb0dea21
+  checksum: 53db4cb4a9bdace4b00acb36ec6f4ed7016c28f24b54dad3ae4ddd7c60ec091add43b78e75acaf6f250180e96279c650c1aea56111b9bc03758b5f0411af6475
   languageName: node
   linkType: hard
 
-"@remix-run/react@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/react@npm:2.3.0"
+"@remix-run/react@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/react@npm:2.4.0"
   dependencies:
-    "@remix-run/router": 1.12.0
-    "@remix-run/server-runtime": 2.3.0
-    react-router-dom: 6.19.0
+    "@remix-run/router": 1.14.0
+    "@remix-run/server-runtime": 2.4.0
+    react-router: 6.21.0
+    react-router-dom: 6.21.0
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
@@ -1979,29 +3648,22 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: a65c3b819ed2e256d9724c7bb0ea0e76b163a6b58578bae8ebeefdbb6f99eaa21ba612c354c761a4c5c10a6e4726bbbb3d0c36b49bf47289cfd8d7fd247073f8
-  languageName: node
-  linkType: hard
-
-"@remix-run/router@npm:1.12.0":
-  version: 1.12.0
-  resolution: "@remix-run/router@npm:1.12.0"
-  checksum: 0528a5c9dac443f90aef30b65fed39c6654b5c2db1d01d700b212d783958935b4d800250530430d78eacf03f3baa104edeae75a29cfb13b3180cbfca3352e645
+  checksum: b607f7315ce4d52a5eb23eb62318a7377528e19202664539f76c4dff7e4e35bb42e3b6347f87090b48ed295f85669f64cf8e9530c2265677c5f93fc9bbc84cdc
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.12.0-pre.0":
-  version: 1.12.0-pre.0
-  resolution: "@remix-run/router@npm:1.12.0-pre.0"
-  checksum: 07e0b8e80ea1326096ea1f4aa646141215f817a42c6033a82ea7850ce06fbeeb9b282cda2fa46586015695e61aceb9215094a2cfe16cee37f8efed0c864bf6af
+"@remix-run/router@npm:1.14.0":
+  version: 1.14.0
+  resolution: "@remix-run/router@npm:1.14.0"
+  checksum: 573138c1f5d93130bf950fa1abf209280abf831a065eecb70965d55239ffda3a53a75a0e15c79cea408734efefcac03041fc07a29e98adaca9aa309a1d1c9656
   languageName: node
   linkType: hard
 
-"@remix-run/server-runtime@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@remix-run/server-runtime@npm:2.3.0"
+"@remix-run/server-runtime@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@remix-run/server-runtime@npm:2.4.0"
   dependencies:
-    "@remix-run/router": 1.12.0
+    "@remix-run/router": 1.14.0
     "@types/cookie": ^0.5.3
     "@web3-storage/multipart-parser": ^1.0.0
     cookie: ^0.5.0
@@ -2012,7 +3674,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: cce9d12c03bfec77ffbd3f804695125e4d386800d3d6a03dd23aa23372a587af22a16cc12ac049c8a1b1b7aa8751058b532bef1687d493542368d2b24bfe2537
+  checksum: 0959c3b854effd1b47e65e3d9e994ec95621823a92b694e90f0568507ca0a05f5c1d6551ffcb3c8603b8a60d73e92a90629c583e4ea379974c4e397d72d97baa
   languageName: node
   linkType: hard
 
@@ -2026,9 +3688,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/web-fetch@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "@remix-run/web-fetch@npm:4.4.1"
+"@remix-run/web-fetch@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "@remix-run/web-fetch@npm:4.4.2"
   dependencies:
     "@remix-run/web-blob": ^3.1.0
     "@remix-run/web-file": ^3.1.0
@@ -2038,7 +3700,7 @@ __metadata:
     abort-controller: ^3.0.0
     data-uri-to-buffer: ^3.0.1
     mrmime: ^1.0.0
-  checksum: cb0dfea27fa2e2c50d86aa8c4641a8916f090286f19c1d0f9363d63bfe0cc2703e91a547f7ba4d8a67145759a4c51de2a56eda35efbd3d1c4ac35a4f8f35d55d
+  checksum: 21e3a693b9a9976bddfa4fb119786ce839284df5ea4072d1c01cf6ca36ccc74491583963b33b63c733fdf3215b852d5c36034f770038dfdd8f6f2fd56709ce2a
   languageName: node
   linkType: hard
 
@@ -2309,6 +3971,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.4.14":
+  version: 0.4.36
+  resolution: "@swc/helpers@npm:0.4.36"
+  dependencies:
+    legacy-swc-helpers: "npm:@swc/helpers@=0.4.14"
+    tslib: ^2.4.0
+  checksum: 20b9f021a9711633d709ef1c231423eb079cb7ed14ad191dc9583b0b46684a95d0e87c3efd7472e7673ddbd30eb200c21490ab43ad251df8f845cd09df3d236f
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.3
+  resolution: "@swc/helpers@npm:0.5.3"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 61c3f7ccd47fc70ad91437df88be6b458cdc11e311cb331288827d7c50befffc72aa18fe913ec2a9e70fbf44e4b818bed38bfd7c329d689e1ff3c198d084cd02
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -2405,13 +4086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/parse-json@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@types/parse-json@npm:4.0.0"
-  checksum: fd6bce2b674b6efc3db4c7c3d336bd70c90838e8439de639b909ce22f3720d21344f52427f1d9e57b265fcb7f6c018699b99e5e0c208a1a4823014269a6bf35b
-  languageName: node
-  linkType: hard
-
 "@types/phoenix@npm:^1.5.4":
   version: 1.6.4
   resolution: "@types/phoenix@npm:1.6.4"
@@ -2426,13 +4100,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:^15.7.10":
-  version: 15.7.11
-  resolution: "@types/prop-types@npm:15.7.11"
-  checksum: 7519ff11d06fbf6b275029fe03fff9ec377b4cb6e864cac34d87d7146c7f5a7560fd164bdc1d2dbe00b60c43713631251af1fd3d34d46c69cd354602bc0c7c54
-  languageName: node
-  linkType: hard
-
 "@types/react-dom@npm:~18.0.6":
   version: 18.0.11
   resolution: "@types/react-dom@npm:18.0.11"
@@ -2442,15 +4109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.8":
-  version: 4.4.9
-  resolution: "@types/react-transition-group@npm:4.4.9"
-  dependencies:
-    "@types/react": "*"
-  checksum: be9e256e53919a7cf3b4a075f6d01c0a2dd3a67911dd28276aa6158be4beade4ca5327cbf1f096c28b413e04989f069122319b02e5a09c280d903a0accea9ead
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*, @types/react@npm:~18.0.17":
   version: 18.0.28
   resolution: "@types/react@npm:18.0.28"
@@ -2614,14 +4272,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.2.0":
+"acorn-walk@npm:^8.0.2":
   version: 8.2.0
   resolution: "acorn-walk@npm:8.2.0"
   checksum: 1715e76c01dd7b2d4ca472f9c58968516a4899378a63ad5b6c2d668bba8da21a71976c14ec5f5b75f887b6317c4ae0b897ab141c831d741dc76024d8745f1ad1
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.8.0, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.9.0":
   version: 8.10.0
   resolution: "acorn@npm:8.10.0"
   bin:
@@ -2715,6 +4373,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"any-promise@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "any-promise@npm:1.3.0"
+  checksum: 0ee8a9bdbe882c90464d75d1f55cf027f5458650c4bd1f0467e65aec38ccccda07ca5844969ee77ed46d04e7dded3eaceb027e8d32f385688523fe305fa7e1de
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
@@ -2742,7 +4407,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:^5.0.1":
+"arg@npm:^5.0.1, arg@npm:^5.0.2":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
   checksum: 6c69ada1a9943d332d9e5382393e897c500908d91d5cb735a01120d5f71daf1b339b7b8980cbeaba8fd1afc68e658a739746179e4315a26e8a28951ff9930078
@@ -2763,15 +4428,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"as-table@npm:^1.0.36":
-  version: 1.0.55
-  resolution: "as-table@npm:1.0.55"
-  dependencies:
-    printable-characters: ^1.0.42
-  checksum: 341c99d9e99a702c315b3f0744d49b4764b26ef7ddd32bafb9e1706626560c0e599100521fc1b17f640e804bd0503ce70b2ba519c023da6edf06bdd9086dccd9
-  languageName: node
-  linkType: hard
-
 "astring@npm:^1.8.0":
   version: 1.8.6
   resolution: "astring@npm:1.8.6"
@@ -2823,17 +4479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "babel-plugin-macros@npm:3.1.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    cosmiconfig: ^7.0.0
-    resolve: ^1.19.0
-  checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6
-  languageName: node
-  linkType: hard
-
 "bail@npm:^2.0.0":
   version: 2.0.2
   resolution: "bail@npm:2.0.2"
@@ -2873,13 +4518,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"blake3-wasm@npm:^2.1.5":
-  version: 2.1.5
-  resolution: "blake3-wasm@npm:2.1.5"
-  checksum: 5088e929c722b52b9c28701c1760ab850a963692056a417b894c943030e3267f12138ae6409e79069b8d7d0401a411426147e8d812b65a49e303fa432af18871
-  languageName: node
-  linkType: hard
-
 "body-parser@npm:1.20.1":
   version: 1.20.1
   resolution: "body-parser@npm:1.20.1"
@@ -3062,10 +4700,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"callsites@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "callsites@npm:3.1.0"
-  checksum: 072d17b6abb459c2ba96598918b55868af677154bec7e73d222ef95a8fdb9bbf7dae96a8421085cdad8cd190d86653b5b6dc55a4484f2e5b2e27d5e0c3fc15b3
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
   languageName: node
   linkType: hard
 
@@ -3076,16 +4714,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"capnp-ts@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "capnp-ts@npm:0.7.0"
-  dependencies:
-    debug: ^4.3.1
-    tslib: ^2.2.0
-  checksum: 9ab495a887c5d5fd56afa3cc930733cd8c6c0743c52c2e79c46675eb5c7753e5578f71348628a4b3d9f03e5269bc71f811e58af18d0b0557607c4ee56189cfbb
-  languageName: node
-  linkType: hard
-
 "ccount@npm:^2.0.0":
   version: 2.0.1
   resolution: "ccount@npm:2.0.1"
@@ -3216,10 +4844,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "clsx@npm:2.0.0"
-  checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+"clsx@npm:^1.1.1, clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
   languageName: node
   linkType: hard
 
@@ -3274,6 +4902,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color2k@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "color2k@npm:2.0.3"
+  checksum: 0748e16e43c1740045af61f44de5d181f3f7a2a9cb0d5cccdccee23d04e3f107f02aaafebb7ca3335cca1d11849c6321aba702eb2f893e993a77f65761de7661
+  languageName: node
+  linkType: hard
+
 "color@npm:^4.2.3":
   version: 4.2.3
   resolution: "color@npm:4.2.3"
@@ -3300,6 +4935,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977
+  languageName: node
+  linkType: hard
+
+"compute-scroll-into-view@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "compute-scroll-into-view@npm:3.1.0"
+  checksum: 224549d6dd1d40342230de5c6d69cac5c3ed5c2f6a4437310f959aadc8db1d20b03da44a6e0de14d9419c6f9130ce51ec99a91b11bde55d4640f10551c89c213
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -3330,7 +4979,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.7.0":
   version: 1.9.0
   resolution: "convert-source-map@npm:1.9.0"
   checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
@@ -3375,19 +5024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^7.0.0":
-  version: 7.1.0
-  resolution: "cosmiconfig@npm:7.1.0"
-  dependencies:
-    "@types/parse-json": ^4.0.0
-    import-fresh: ^3.2.1
-    parse-json: ^5.0.0
-    path-type: ^4.0.0
-    yaml: ^1.10.0
-  checksum: c53bf7befc1591b2651a22414a5e786cd5f2eeaa87f3678a3d49d6069835a9d8d1aef223728e98aa8fec9a95bf831120d245096db12abe019fecb51f5696c96f
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -3431,7 +5067,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.7, csstype@npm:^3.1.2":
+"csstype@npm:^3.0.7":
   version: 3.1.2
   resolution: "csstype@npm:3.1.2"
   checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
@@ -3448,13 +5084,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-uri-to-buffer@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "data-uri-to-buffer@npm:2.0.2"
-  checksum: 152bec5e77513ee253a7c686700a1723246f582dad8b614e8eaaaba7fa45a15c8671ae4b8f4843f4f3a002dae1d3e7a20f852f7d7bdc8b4c15cfe7adfdfb07f8
-  languageName: node
-  linkType: hard
-
 "data-uri-to-buffer@npm:^3.0.1":
   version: 3.0.1
   resolution: "data-uri-to-buffer@npm:3.0.1"
@@ -3482,7 +5111,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.3.1, debug@npm:^4.3.3, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -3540,7 +5169,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2":
+"deepmerge@npm:4.3.1, deepmerge@npm:^4.2.2":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 2024c6a980a1b7128084170c4cf56b0fd58a63f2da1660dcfe977415f27b17dbe5888668b59d0b063753f3220719d5e400b7f113609489c90160bb9a5518d052
@@ -3609,6 +5238,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "dexie-react-hooks@npm:~1.1.1":
   version: 1.1.1
   resolution: "dexie-react-hooks@npm:1.1.1"
@@ -3627,6 +5263,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: d5d98719d58b3c2fa59663c4c42ba9716f1fd01245c31d5fce31915bd3aa26e6aac149788e007358f778ebbd68a2256eb5973e8ca6f221df221ba060115acf2e
+  languageName: node
+  linkType: hard
+
 "diff@npm:^5.0.0":
   version: 5.1.0
   resolution: "diff@npm:5.1.0"
@@ -3634,13 +5277,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1":
-  version: 5.2.1
-  resolution: "dom-helpers@npm:5.2.1"
-  dependencies:
-    "@babel/runtime": ^7.8.7
-    csstype: ^3.0.2
-  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: d7381bca22ed11933a1ccf376db7a94bee2c57aa61e490f680124fa2d1cd27e94eba641d9f45be57caab4f9a6579de0983466f620a2cd6230d7ec93312105ae7
   languageName: node
   linkType: hard
 
@@ -3753,15 +5393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"error-ex@npm:^1.3.1":
-  version: 1.3.2
-  resolution: "error-ex@npm:1.3.2"
-  dependencies:
-    is-arrayish: ^0.2.1
-  checksum: c1c2b8b65f9c91b0f9d75f0debaa7ec5b35c266c2cac5de412c1a6de86d4cbae04ae44e510378cb14d032d0645a36925d0186f8bb7367bcc629db256b743a001
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^1.3.1":
   version: 1.4.1
   resolution: "es-module-lexer@npm:1.4.1"
@@ -3814,83 +5445,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:0.17.19":
-  version: 0.17.19
-  resolution: "esbuild@npm:0.17.19"
-  dependencies:
-    "@esbuild/android-arm": 0.17.19
-    "@esbuild/android-arm64": 0.17.19
-    "@esbuild/android-x64": 0.17.19
-    "@esbuild/darwin-arm64": 0.17.19
-    "@esbuild/darwin-x64": 0.17.19
-    "@esbuild/freebsd-arm64": 0.17.19
-    "@esbuild/freebsd-x64": 0.17.19
-    "@esbuild/linux-arm": 0.17.19
-    "@esbuild/linux-arm64": 0.17.19
-    "@esbuild/linux-ia32": 0.17.19
-    "@esbuild/linux-loong64": 0.17.19
-    "@esbuild/linux-mips64el": 0.17.19
-    "@esbuild/linux-ppc64": 0.17.19
-    "@esbuild/linux-riscv64": 0.17.19
-    "@esbuild/linux-s390x": 0.17.19
-    "@esbuild/linux-x64": 0.17.19
-    "@esbuild/netbsd-x64": 0.17.19
-    "@esbuild/openbsd-x64": 0.17.19
-    "@esbuild/sunos-x64": 0.17.19
-    "@esbuild/win32-arm64": 0.17.19
-    "@esbuild/win32-ia32": 0.17.19
-    "@esbuild/win32-x64": 0.17.19
-  dependenciesMeta:
-    "@esbuild/android-arm":
-      optional: true
-    "@esbuild/android-arm64":
-      optional: true
-    "@esbuild/android-x64":
-      optional: true
-    "@esbuild/darwin-arm64":
-      optional: true
-    "@esbuild/darwin-x64":
-      optional: true
-    "@esbuild/freebsd-arm64":
-      optional: true
-    "@esbuild/freebsd-x64":
-      optional: true
-    "@esbuild/linux-arm":
-      optional: true
-    "@esbuild/linux-arm64":
-      optional: true
-    "@esbuild/linux-ia32":
-      optional: true
-    "@esbuild/linux-loong64":
-      optional: true
-    "@esbuild/linux-mips64el":
-      optional: true
-    "@esbuild/linux-ppc64":
-      optional: true
-    "@esbuild/linux-riscv64":
-      optional: true
-    "@esbuild/linux-s390x":
-      optional: true
-    "@esbuild/linux-x64":
-      optional: true
-    "@esbuild/netbsd-x64":
-      optional: true
-    "@esbuild/openbsd-x64":
-      optional: true
-    "@esbuild/sunos-x64":
-      optional: true
-    "@esbuild/win32-arm64":
-      optional: true
-    "@esbuild/win32-ia32":
-      optional: true
-    "@esbuild/win32-x64":
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: ac11b1a5a6008e4e37ccffbd6c2c054746fc58d0ed4a2f9ee643bd030cfcea9a33a235087bc777def8420f2eaafb3486e76adb7bdb7241a9143b43a69a10afd8
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:0.17.6":
   version: 0.17.6
   resolution: "esbuild@npm:0.17.6"
@@ -4066,13 +5620,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-string-regexp@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "escape-string-regexp@npm:4.0.0"
-  checksum: 98b48897d93060f2322108bf29db0feba7dd774be96cd069458d1453347b25ce8682ecc39859d4bca2203cc0ab19c237bcc71755eff49a0f8d90beadeeba5cc5
-  languageName: node
-  linkType: hard
-
 "escodegen@npm:^2.0.0":
   version: 2.0.0
   resolution: "escodegen@npm:2.0.0"
@@ -4173,13 +5720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "estree-walker@npm:0.6.1"
-  checksum: 9d6f82a4921f11eec18f8089fb3cce6e53bcf45a8e545c42a2674d02d055fb30f25f90495f8be60803df6c39680c80dcee7f944526867eb7aa1fc9254883b23d
-  languageName: node
-  linkType: hard
-
 "estree-walker@npm:^3.0.0":
   version: 3.0.3
   resolution: "estree-walker@npm:3.0.3"
@@ -4236,7 +5776,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exit-hook@npm:2.2.1, exit-hook@npm:^2.2.1":
+"exit-hook@npm:2.2.1":
   version: 2.2.1
   resolution: "exit-hook@npm:2.2.1"
   checksum: 1aa8359b6c5590a012d6cadf9cd337d227291bfcaa8970dc585d73dffef0582af34ed8ac56f6164f8979979fb417cff1eb49f03cdfd782f9332a30c773f0ada0
@@ -4319,7 +5859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.3.1":
+"fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -4398,13 +5938,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-root@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "find-root@npm:1.1.0"
-  checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^5.0.0":
   version: 5.0.0
   resolution: "find-up@npm:5.0.0"
@@ -4415,6 +5948,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flat@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "flat@npm:5.0.2"
+  bin:
+    flat: cli.js
+  checksum: 12a1536ac746db74881316a181499a78ef953632ddd28050b7a3a43c62ef5462e3357c8c29d76072bb635f147f7a9a1f0c02efef6b4be28f8db62ceb3d5c7f5d
+  languageName: node
+  linkType: hard
+
 "follow-redirects@npm:^1.15.0":
   version: 1.15.3
   resolution: "follow-redirects@npm:1.15.3"
@@ -4469,6 +6011,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^10.16.16":
+  version: 10.16.16
+  resolution: "framer-motion@npm:10.16.16"
+  dependencies:
+    "@emotion/is-prop-valid": ^0.8.2
+    tslib: ^2.4.0
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  dependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 992d755faab7171aecd4b548ea4c3baf6a9172b9348a98033e594a46a9f3f90c6f5854898d48884c3ecf7db4fc2ae3f05e27e125b4c5b397e836d765265577c1
+  languageName: node
+  linkType: hard
+
 "fresh@npm:0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
@@ -4614,6 +6177,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
+  languageName: node
+  linkType: hard
+
 "get-port@npm:^5.1.1":
   version: 5.1.1
   resolution: "get-port@npm:5.1.1"
@@ -4621,16 +6191,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-source@npm:^2.0.12":
-  version: 2.0.12
-  resolution: "get-source@npm:2.0.12"
-  dependencies:
-    data-uri-to-buffer: ^2.0.0
-    source-map: ^0.6.1
-  checksum: c73368fee709594ba38682ec1a96872aac6f7d766396019611d3d2358b68186a7847765a773ea0db088c42781126cc6bc09e4b87f263951c74dae5dcea50ad42
-  languageName: node
-  linkType: hard
-
 "get-stream@npm:^6.0.0":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
@@ -4654,10 +6214,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-to-regexp@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "glob-to-regexp@npm:0.4.1"
-  checksum: e795f4e8f06d2a15e86f76e4d92751cf8bbfcf0157cea5c2f0f35678a8195a750b34096b1256e436f0cebc1883b5ff0888c47348443e69546a5a87f9e1eb1167
+"glob-parent@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "glob-parent@npm:6.0.2"
+  dependencies:
+    is-glob: ^4.0.3
+  checksum: c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
+  languageName: node
+  linkType: hard
+
+"glob@npm:7.1.6":
+  version: 7.1.6
+  resolution: "glob@npm:7.1.6"
+  dependencies:
+    fs.realpath: ^1.0.0
+    inflight: ^1.0.4
+    inherits: 2
+    minimatch: ^3.0.4
+    once: ^1.3.0
+    path-is-absolute: ^1.0.0
+  checksum: 351d549dd90553b87c2d3f90ce11aed9e1093c74130440e7ae0592e11bbcd2ce7f0ebb8ba6bfe63aaf9b62166a7f4c80cb84490ae5d78408bb2572bf7d4ee0a6
   languageName: node
   linkType: hard
 
@@ -4712,6 +6288,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.1.10":
+  version: 2.1.13
+  resolution: "goober@npm:2.1.13"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 0c00b90d26d1a2fad432e311fd4f47bc9fef1eee2a733158d9e2c72a89cf76d414090d063a8d20fe378f2b2b8087df0a83b0f00a3244d1466b97a0d3b14344a7
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -4845,7 +6430,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -4929,15 +6514,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconify-icon@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "iconify-icon@npm:1.0.7"
-  dependencies:
-    "@iconify/types": ^2.0.0
-  checksum: 49bdf42e435fbd914b8802fa6199389f1508e1bfaeee546387f04f8e34eda9f9e349a0c775302e054e55c11814097057b010a525c34a916c07e9c96b0ed143c8
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -4972,16 +6548,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.2.1":
-  version: 3.3.0
-  resolution: "import-fresh@npm:3.3.0"
-  dependencies:
-    parent-module: ^1.0.0
-    resolve-from: ^4.0.0
-  checksum: 2cacfad06e652b1edc50be650f7ec3be08c5e5a6f6d12d035c440a42a8cc028e60a5b99ca08a77ab4d6b1346da7d971915828f33cdab730d3d42f08242d09baa
-  languageName: node
-  linkType: hard
-
 "imurmurhash@npm:^0.1.4":
   version: 0.1.4
   resolution: "imurmurhash@npm:0.1.4"
@@ -5027,6 +6593,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intl-messageformat@npm:^10.1.0":
+  version: 10.5.8
+  resolution: "intl-messageformat@npm:10.5.8"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.18.0
+    "@formatjs/fast-memoize": 2.2.0
+    "@formatjs/icu-messageformat-parser": 2.7.3
+    tslib: ^2.4.0
+  checksum: f0fc0c4ce4f711ac46227e1b41e1494bfadfd047e4581299ef4fbf79dcbd85fcc9851e7051432a02239fab9673c212a50f03060b5f83a930c286d4ba6c2261de
+  languageName: node
+  linkType: hard
+
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: ^1.0.0
+  checksum: cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip@npm:^2.0.0":
   version: 2.0.0
   resolution: "ip@npm:2.0.0"
@@ -5068,13 +6655,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arrayish@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "is-arrayish@npm:0.2.1"
-  checksum: eef4417e3c10e60e2c810b6084942b3ead455af16c4509959a27e490e7aee87cfb3f38e01bbde92220b528a0ee1a18d52b787e1458ee86174d8c7f0e58cd488f
-  languageName: node
-  linkType: hard
-
 "is-arrayish@npm:^0.3.1":
   version: 0.3.2
   resolution: "is-arrayish@npm:0.3.2"
@@ -5105,21 +6685,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.8.1":
-  version: 2.13.0
-  resolution: "is-core-module@npm:2.13.0"
+"is-core-module@npm:^2.13.0":
+  version: 2.13.1
+  resolution: "is-core-module@npm:2.13.1"
   dependencies:
-    has: ^1.0.3
-  checksum: 053ab101fb390bfeb2333360fd131387bed54e476b26860dc7f5a700bbf34a0ec4454f7c8c4d43e8a0030957e4b3db6e16d35e1890ea6fb654c833095e040355
+    hasown: ^2.0.0
+  checksum: 256559ee8a9488af90e4bad16f5583c6d59e92f0742e9e8bb4331e758521ee86b810b93bae44f390766ffbc518a0488b18d9dab7da9a5ff997d499efc9403f7c
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.9.0":
-  version: 2.11.0
-  resolution: "is-core-module@npm:2.11.0"
+"is-core-module@npm:^2.8.1":
+  version: 2.13.0
+  resolution: "is-core-module@npm:2.13.0"
   dependencies:
     has: ^1.0.3
-  checksum: f96fd490c6b48eb4f6d10ba815c6ef13f410b0ba6f7eb8577af51697de523e5f2cd9de1c441b51d27251bf0e4aebc936545e33a5d26d5d51f28d25698d4a8bab
+  checksum: 053ab101fb390bfeb2333360fd131387bed54e476b26860dc7f5a700bbf34a0ec4454f7c8c4d43e8a0030957e4b3db6e16d35e1890ea6fb654c833095e040355
   languageName: node
   linkType: hard
 
@@ -5160,7 +6740,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -5318,6 +6898,15 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.19.1":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: a7bd5d63921c170eaec91eecd686388181c7828e1fa0657ab374b9372bfc1f383cf4b039e6b272383d5cb25607509880af814a39abdff967322459cca41f2961
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -5393,13 +6982,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"json-parse-even-better-errors@npm:^2.3.0":
-  version: 2.3.1
-  resolution: "json-parse-even-better-errors@npm:2.3.1"
-  checksum: 798ed4cf3354a2d9ccd78e86d2169515a0097a5c133337807cdf7f1fc32e1391d207ccfc276518cc1d7d8d4db93288b8a50ba4293d212ad1336e52a8ec0a941f
-  languageName: node
-  linkType: hard
-
 "json-parse-even-better-errors@npm:^3.0.0":
   version: 3.0.0
   resolution: "json-parse-even-better-errors@npm:3.0.0"
@@ -5443,6 +7025,15 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"legacy-swc-helpers@npm:@swc/helpers@=0.4.14":
+  version: 0.4.14
+  resolution: "@swc/helpers@npm:0.4.14"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 273fd3f3fc461a92f3790cc551ea054745c6d6959afbe1232e6d7aa1c722bbc114d308aab96bef5c78fc0303c85c7b472ef00e2253251cc89737f3b1af56e5a5
+  languageName: node
+  linkType: hard
+
 "levn@npm:~0.3.0":
   version: 0.3.0
   resolution: "levn@npm:0.3.0"
@@ -5453,7 +7044,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.5":
+"lilconfig@npm:^2.0.5, lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
   checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117
@@ -5511,6 +7102,41 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"lodash.foreach@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.foreach@npm:4.5.0"
+  checksum: a940386b158ca0d62994db41fc16529eb8ae67138f29ced38e91f912cb5435d1b0ed34b18e6f7b9ddfc32ab676afc6dfec60d1e22633d8e3e4b33413402ab4ad
+  languageName: node
+  linkType: hard
+
+"lodash.get@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "lodash.get@npm:4.4.2"
+  checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545
+  languageName: node
+  linkType: hard
+
+"lodash.kebabcase@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "lodash.kebabcase@npm:4.1.1"
+  checksum: 5a6c59161914e1bae23438a298c7433e83d935e0f59853fa862e691164696bc07f6dfa4c313d499fbf41ba8d53314e9850416502376705a357d24ee6ca33af78
+  languageName: node
+  linkType: hard
+
+"lodash.mapkeys@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "lodash.mapkeys@npm:4.6.0"
+  checksum: d433d377b3944c39366741f94ca4be4fb591a6df483fd9e3458da46904d94e2b2471fd7e2d42345e05deb1dc188614ce05cd5b2979a74a7a0f3fbc2cb367c3ca
+  languageName: node
+  linkType: hard
+
+"lodash.omit@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.omit@npm:4.5.0"
+  checksum: 434645e49fe84ab315719bd5a9a3a585a0f624aa4160bc09157dd041a414bcc287c15840365c1379476a3f3eda41fbe838976c3f7bdecbbf4c5478e86c471a30
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -5535,7 +7161,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -5578,15 +7204,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.25.3":
-  version: 0.25.9
-  resolution: "magic-string@npm:0.25.9"
-  dependencies:
-    sourcemap-codec: ^1.4.8
-  checksum: 9a0e55a15c7303fc360f9572a71cffba1f61451bc92c5602b1206c9d17f492403bf96f946dfce7483e66822d6b74607262e24392e87b0ac27b786e69a40e9b1a
-  languageName: node
-  linkType: hard
-
 "make-fetch-happen@npm:^11.0.3":
   version: 11.1.1
   resolution: "make-fetch-happen@npm:11.1.1"
@@ -6169,7 +7786,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4":
+"micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
   dependencies:
@@ -6213,15 +7830,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"mime@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "mime@npm:3.0.0"
-  bin:
-    mime: cli.js
-  checksum: f43f9b7bfa64534e6b05bd6062961681aeb406a5b53673b53b683f27fcc4e739989941836a355eef831f4478923651ecc739f4a5f6e20a76487b432bfd4db928
-  languageName: node
-  linkType: hard
-
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -6236,27 +7844,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"miniflare@npm:3.20231025.0":
-  version: 3.20231025.0
-  resolution: "miniflare@npm:3.20231025.0"
-  dependencies:
-    acorn: ^8.8.0
-    acorn-walk: ^8.2.0
-    capnp-ts: ^0.7.0
-    exit-hook: ^2.2.1
-    glob-to-regexp: ^0.4.1
-    source-map-support: 0.5.21
-    stoppable: ^1.1.0
-    undici: ^5.22.1
-    workerd: 1.20231025.0
-    ws: ^8.11.0
-    youch: ^3.2.2
-    zod: ^3.20.6
-  checksum: 7c931dbbb883b0aee7f6dba51cc4eeeb0f6e4534da842eafec0319c4391536579d50d273a637bca10b0da40fdb5ca6e06f1e071b0bdbcd01b6c0b99973f3e0e4
-  languageName: node
-  linkType: hard
-
-"minimatch@npm:^3.1.1":
+"minimatch@npm:^3.0.4, minimatch@npm:^3.1.1":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -6379,17 +7967,13 @@ isbot@latest:
     "@argos-ci/playwright": ^1.3.2
     "@biomejs/biome": 1.4.1
     "@cloudflare/workers-types": ^4.20230821.0
-    "@emotion/react": ^11.11.1
-    "@emotion/styled": ^11.11.0
     "@fontsource/public-sans": ~4.5.11
-    "@iconify-icon/react": ^1.0.7
-    "@mui/joy": ^5.0.0-beta.15
-    "@mui/material": ^5.14.18
+    "@nextui-org/react": ^2.2.9
     "@playwright/test": ^1.40.1
-    "@remix-run/cloudflare": ^2.3.0
-    "@remix-run/cloudflare-pages": ^2.3.0
-    "@remix-run/dev": ^2.3.0
-    "@remix-run/react": ^2.3.0
+    "@remix-run/cloudflare": ^2.4.0
+    "@remix-run/cloudflare-pages": ^2.4.0
+    "@remix-run/dev": ^2.4.0
+    "@remix-run/react": ^2.4.0
     "@sentry/remix": ^7.81.1
     "@supabase/auth-ui-react": ^0.4.6
     "@supabase/ssr": ^0.0.10
@@ -6400,19 +7984,22 @@ isbot@latest:
     "@types/wicg-file-system-access": ~2020.9.5
     dexie: ~3.2.2
     dexie-react-hooks: ~1.1.1
+    framer-motion: ^10.16.16
     isbot: latest
     jsdom: ^21.1.1
     moment: ~2.29.4
+    next-themes: ^0.2.1
     posthog-js: ^1.94.4
     react: ~18
     react-dom: ~18
+    react-hot-toast: ^2.4.1
     remix-island: ^0.1.2
+    tailwindcss: ^3.3.6
     teaful: ~0.11.1
     typescript: ^5.0.4
     use-count-up: ^3.0.1
     wavesurfer.js: ^7.3.3
     web-audio-beat-detector: ~8.1.37
-    wrangler: latest
     zod: ^3.22.3
   languageName: unknown
   linkType: soft
@@ -6487,16 +8074,18 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"mustache@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "mustache@npm:4.2.0"
-  bin:
-    mustache: bin/mustache
-  checksum: 928fcb63e3aa44a562bfe9b59ba202cccbe40a46da50be6f0dd831b495be1dd7e38ca4657f0ecab2c1a89dc7bccba0885eab7ee7c1b215830da765758c7e0506
+"mz@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "mz@npm:2.7.0"
+  dependencies:
+    any-promise: ^1.0.0
+    object-assign: ^4.0.1
+    thenify-all: ^1.0.0
+  checksum: 8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.3, nanoid@npm:^3.3.6":
+"nanoid@npm:^3.3.6":
   version: 3.3.6
   resolution: "nanoid@npm:3.3.6"
   bin:
@@ -6528,6 +8117,17 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"next-themes@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "next-themes@npm:0.2.1"
+  peerDependencies:
+    next: "*"
+    react: "*"
+    react-dom: "*"
+  checksum: ebc248b956138e73436c4ed0a0f0a877a0a48a33156db577029b8b8469e48b5c777d61abf2baeb75953378febea74e067a4869ff90b4a3e94fce123289b862ba
+  languageName: node
+  linkType: hard
+
 "next-tick@npm:^1.1.0":
   version: 1.1.0
   resolution: "next-tick@npm:1.1.0"
@@ -6577,14 +8177,7 @@ isbot@latest:
   peerDependenciesMeta:
     encoding:
       optional: true
-  checksum: 3bc1655203d47ee8e313c0d96664b9673a3d4dd8002740318e9d27d14ef306693a4b2ef8d6525775056fd912a19e23f3ac0d7111ad8925877b7567b29a625592
-  languageName: node
-  linkType: hard
-
-"node-forge@npm:^1":
-  version: 1.3.1
-  resolution: "node-forge@npm:1.3.1"
-  checksum: 08fb072d3d670599c89a1704b3e9c649ff1b998256737f0e06fbd1a5bf41cae4457ccaee32d95052d80bbafd9ffe01284e078c8071f0267dc9744e51c5ed42a9
+  checksum: 3bc1655203d47ee8e313c0d96664b9673a3d4dd8002740318e9d27d14ef306693a4b2ef8d6525775056fd912a19e23f3ac0d7111ad8925877b7567b29a625592
   languageName: node
   linkType: hard
 
@@ -6725,13 +8318,20 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
+"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 80b4904bb3857c52cc1bfd0b52c0352532ca12ed3b8a6ff06a90cd209dfda1b95cee059a7625eb9da29537027f68ac4619363491eedb2f5d3dddbba97494fd6c
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.9.0":
   version: 1.12.3
   resolution: "object-inspect@npm:1.12.3"
@@ -6838,15 +8438,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"parent-module@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "parent-module@npm:1.0.1"
-  dependencies:
-    callsites: ^3.0.0
-  checksum: 6ba8b255145cae9470cf5551eb74be2d22281587af787a2626683a6c20fbb464978784661478dd2a3f1dad74d1e802d403e1b03c1a31fab310259eec8ac560ff
-  languageName: node
-  linkType: hard
-
 "parse-entities@npm:^4.0.0":
   version: 4.0.1
   resolution: "parse-entities@npm:4.0.1"
@@ -6863,18 +8454,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^5.0.0":
-  version: 5.2.0
-  resolution: "parse-json@npm:5.2.0"
-  dependencies:
-    "@babel/code-frame": ^7.0.0
-    error-ex: ^1.3.1
-    json-parse-even-better-errors: ^2.3.0
-    lines-and-columns: ^1.1.6
-  checksum: 62085b17d64da57f40f6afc2ac1f4d95def18c4323577e1eced571db75d9ab59b297d1d10582920f84b15985cbfc6b6d450ccbf317644cfa176f3ed982ad87e2
-  languageName: node
-  linkType: hard
-
 "parse-ms@npm:^2.1.0":
   version: 2.1.0
   resolution: "parse-ms@npm:2.1.0"
@@ -6882,13 +8461,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"parse-multipart-data@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "parse-multipart-data@npm:1.5.0"
-  checksum: a385fb6609a7b393ee7e82042d5f923beaa7fb7d81d430db560869b719574f62f39a30e77fd711fbfa6fe3e212a8e6f81fd2126a80876a3c13dc1ae975eb5d91
-  languageName: node
-  linkType: hard
-
 "parse5@npm:^7.1.2":
   version: 7.1.2
   resolution: "parse5@npm:7.1.2"
@@ -6950,20 +8522,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:^6.2.0":
-  version: 6.2.1
-  resolution: "path-to-regexp@npm:6.2.1"
-  checksum: f0227af8284ea13300f4293ba111e3635142f976d4197f14d5ad1f124aebd9118783dd2e5f1fe16f7273743cc3dbeddfb7493f237bb27c10fdae07020cc9b698
-  languageName: node
-  linkType: hard
-
-"path-type@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "path-type@npm:4.0.0"
-  checksum: 5b1e2daa247062061325b8fdbfd1fb56dde0a448fb1455453276ea18c60685bdad23a445dc148cf87bc216be1573357509b7d4060494a6fd768c7efad833ee45
-  languageName: node
-  linkType: hard
-
 "pathe@npm:^1.1.0, pathe@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathe@npm:1.1.1"
@@ -7016,6 +8574,20 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"pify@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
+  languageName: node
+  linkType: hard
+
+"pirates@npm:^4.0.1":
+  version: 4.0.6
+  resolution: "pirates@npm:4.0.6"
+  checksum: 46a65fefaf19c6f57460388a5af9ab81e3d7fd0e7bc44ca59d753cb5c4d0df97c6c6e583674869762101836d68675f027d60f841c105d72734df9dfca97cbcc6
+  languageName: node
+  linkType: hard
+
 "pkg-types@npm:^1.0.3":
   version: 1.0.3
   resolution: "pkg-types@npm:1.0.3"
@@ -7060,6 +8632,30 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"postcss-import@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "postcss-import@npm:15.1.0"
+  dependencies:
+    postcss-value-parser: ^4.0.0
+    read-cache: ^1.0.0
+    resolve: ^1.1.7
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 7bd04bd8f0235429009d0022cbf00faebc885de1d017f6d12ccb1b021265882efc9302006ba700af6cab24c46bfa2f3bc590be3f9aee89d064944f171b04e2a3
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: ^2.0.1
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 5c1e83efeabeb5a42676193f4357aa9c88f4dc1b3c4a0332c132fe88932b33ea58848186db117cf473049fc233a980356f67db490bd0a7832ccba9d0b3fd3491
+  languageName: node
+  linkType: hard
+
 "postcss-load-config@npm:^4.0.1":
   version: 4.0.1
   resolution: "postcss-load-config@npm:4.0.1"
@@ -7140,7 +8736,18 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
+"postcss-nested@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "postcss-nested@npm:6.0.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.11
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 7ddb0364cd797de01e38f644879189e0caeb7ea3f78628c933d91cc24f327c56d31269384454fc02ecaf503b44bfa8e08870a7c4cc56b23bc15640e1894523fa
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
   version: 6.0.13
   resolution: "postcss-selector-parser@npm:6.0.13"
   dependencies:
@@ -7150,7 +8757,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.1.0":
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
@@ -7168,7 +8775,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.27":
+"postcss@npm:^8.4.23, postcss@npm:^8.4.27":
   version: 8.4.32
   resolution: "postcss@npm:8.4.32"
   dependencies:
@@ -7235,13 +8842,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"printable-characters@npm:^1.0.42":
-  version: 1.0.42
-  resolution: "printable-characters@npm:1.0.42"
-  checksum: 2724aa02919d7085933af0f8f904bd0de67a6b53834f2e5b98fc7aa3650e20755c805e8c85bcf96c09f678cb16a58b55640dd3a2da843195fce06b1ccb0c8ce4
-  languageName: node
-  linkType: hard
-
 "proc-log@npm:^3.0.0":
   version: 3.0.0
   resolution: "proc-log@npm:3.0.0"
@@ -7280,7 +8880,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -7442,6 +9042,18 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"react-hot-toast@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "react-hot-toast@npm:2.4.1"
+  dependencies:
+    goober: ^2.1.10
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 3e337816db574782454bf09c63a8aca546bf9c5be3f83d0494d24bdcfd97ca2db64d4c151c4ab0184d2342d7a7226403e6812e70caf03c8b55a07787bb4ad0f2
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -7449,13 +9061,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -7463,42 +9068,92 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:6.19.0":
-  version: 6.19.0
-  resolution: "react-router-dom@npm:6.19.0"
+"react-remove-scroll-bar@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "react-remove-scroll-bar@npm:2.3.4"
+  dependencies:
+    react-style-singleton: ^2.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.5.6":
+  version: 2.5.7
+  resolution: "react-remove-scroll@npm:2.5.7"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.4
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: e0dbb6856beaed2cff4996d9ca62d775686ff72e3e9de34043034d932223b588993b2fc7a18644750dd3d73eb19bd3f2cedb8d91f0e424c1ef8403010da24b1d
+  languageName: node
+  linkType: hard
+
+"react-router-dom@npm:6.21.0":
+  version: 6.21.0
+  resolution: "react-router-dom@npm:6.21.0"
   dependencies:
-    "@remix-run/router": 1.12.0
-    react-router: 6.19.0
+    "@remix-run/router": 1.14.0
+    react-router: 6.21.0
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 04453ca48eb900a4a6aa8b8e48368fa78d4ce8a9b69df108d9f53071a904349b18672a66c94252eb847ae4369e30bbe4ec7244bb6529b10fd474774e48f03669
+  checksum: ea9dfc1e089c0623c7cb45f2a1da807a3505e8c816d5a7021d3d0d04a7a9541850b45f00195b8fa3cc5f981d59170bc27f1ba81407f0d39346642e9759a2c059
   languageName: node
   linkType: hard
 
-"react-router@npm:6.19.0":
-  version: 6.19.0
-  resolution: "react-router@npm:6.19.0"
+"react-router@npm:6.21.0":
+  version: 6.21.0
+  resolution: "react-router@npm:6.21.0"
   dependencies:
-    "@remix-run/router": 1.12.0
+    "@remix-run/router": 1.14.0
   peerDependencies:
     react: ">=16.8"
-  checksum: f7e3396b8f4299638029dc726cb02d9c05c8906dc5277e5f9d899ef113d8cec49dfab7d34cd496826f8c1a95666141f3eede446c4438ef56720fdb72c66473fb
+  checksum: e9e50767cf85e7e216aed97dcc280a8b0b83e4f0790274096991823046bb86aa1aaab3ba10a4de11bd89d73c9eeb880df1d50055e6e4f44fcdfad38adcd6c1b8
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.5":
-  version: 4.4.5
-  resolution: "react-transition-group@npm:4.4.5"
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
   dependencies:
-    "@babel/runtime": ^7.5.5
-    dom-helpers: ^5.0.1
-    loose-envify: ^1.4.0
-    prop-types: ^15.6.2
+    get-nonce: ^1.0.0
+    invariant: ^2.2.4
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
+  languageName: node
+  linkType: hard
+
+"react-textarea-autosize@npm:^8.5.2":
+  version: 8.5.3
+  resolution: "react-textarea-autosize@npm:8.5.3"
+  dependencies:
+    "@babel/runtime": ^7.20.13
+    use-composed-ref: ^1.3.0
+    use-latest: ^1.2.1
   peerDependencies:
-    react: ">=16.6.0"
-    react-dom: ">=16.6.0"
-  checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: b317c3763f37a89621bbafd0e6e2d068e7876790a5ae77f497adfd6ba9334ceea138c8a0b7d907bae0f79c765cb24e8b2ca2b8033b4144c0bce28571a3658921
   languageName: node
   linkType: hard
 
@@ -7511,6 +9166,15 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: ^2.3.0
+  checksum: cffc728b9ede1e0667399903f9ecaf3789888b041c46ca53382fa3a06303e5132774dc0a96d0c16aa702dbac1ea0833d5a868d414f5ab2af1e1438e19e6657c6
+  languageName: node
+  linkType: hard
+
 "readable-stream@npm:^2.0.0, readable-stream@npm:~2.3.6":
   version: 2.3.8
   resolution: "readable-stream@npm:2.3.8"
@@ -7553,13 +9217,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "regenerator-runtime@npm:0.14.0"
-  checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
-  languageName: node
-  linkType: hard
-
 "remark-frontmatter@npm:4.0.1":
   version: 4.0.1
   resolution: "remark-frontmatter@npm:4.0.1"
@@ -7650,13 +9307,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"resolve-from@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "resolve-from@npm:4.0.0"
-  checksum: f4ba0b8494846a5066328ad33ef8ac173801a51739eb4d63408c847da9a2e1c1de1e6cbbf72699211f3d13f8fc1325648b169bd15eb7da35688e30a5fb0e4a7f
-  languageName: node
-  linkType: hard
-
 "resolve.exports@npm:^2.0.2":
   version: 2.0.2
   resolution: "resolve.exports@npm:2.0.2"
@@ -7664,29 +9314,29 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.19.0":
-  version: 1.22.1
-  resolution: "resolve@npm:1.22.1"
+"resolve@npm:^1.1.7, resolve@npm:^1.22.2":
+  version: 1.22.8
+  resolution: "resolve@npm:1.22.8"
   dependencies:
-    is-core-module: ^2.9.0
+    is-core-module: ^2.13.0
     path-parse: ^1.0.7
     supports-preserve-symlinks-flag: ^1.0.0
   bin:
     resolve: bin/resolve
-  checksum: 07af5fc1e81aa1d866cbc9e9460fbb67318a10fa3c4deadc35c3ad8a898ee9a71a86a65e4755ac3195e0ea0cfbe201eb323ebe655ce90526fd61917313a34e4e
+  checksum: f8a26958aa572c9b064562750b52131a37c29d072478ea32e129063e2da7f83e31f7f11e7087a18225a8561cfe8d2f0df9dbea7c9d331a897571c0a2527dbb4c
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>":
-  version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
+"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>":
+  version: 1.22.8
+  resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
-    is-core-module: ^2.9.0
+    is-core-module: ^2.13.0
     path-parse: ^1.0.7
     supports-preserve-symlinks-flag: ^1.0.0
   bin:
     resolve: bin/resolve
-  checksum: 5656f4d0bedcf8eb52685c1abdf8fbe73a1603bb1160a24d716e27a57f6cecbe2432ff9c89c2bd57542c3a7b9d14b1882b73bfe2e9d7849c9a4c0b8b39f02b8b
+  checksum: 5479b7d431cacd5185f8db64bfcb7286ae5e31eb299f4c4f404ad8aa6098b77599563ac4257cb2c37a42f59dfc06a1bec2bcf283bb448f319e37f0feb9a09847
   languageName: node
   linkType: hard
 
@@ -7725,35 +9375,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"rollup-plugin-inject@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "rollup-plugin-inject@npm:3.0.2"
-  dependencies:
-    estree-walker: ^0.6.1
-    magic-string: ^0.25.3
-    rollup-pluginutils: ^2.8.1
-  checksum: a014972c80fe34b8c8154056fa2533a8440066a31de831e3793fc21b15d108d92c22d8f7f472397bd5783d7c5e04d8cbf112fb72c5a26e997726e4eb090edad1
-  languageName: node
-  linkType: hard
-
-"rollup-plugin-node-polyfills@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "rollup-plugin-node-polyfills@npm:0.2.1"
-  dependencies:
-    rollup-plugin-inject: ^3.0.0
-  checksum: e84645212c443aca3cfae2ba69f01c6d8c5c250f0bf651416b69a4572b60aae9da7cdd687de3ab9b903f7a1ab96b06b71f0c4927d1b02a37485360d2b563937b
-  languageName: node
-  linkType: hard
-
-"rollup-pluginutils@npm:^2.8.1":
-  version: 2.8.2
-  resolution: "rollup-pluginutils@npm:2.8.2"
-  dependencies:
-    estree-walker: ^0.6.1
-  checksum: 339fdf866d8f4ff6e408fa274c0525412f7edb01dc46b5ccda51f575b7e0d20ad72965773376fb5db95a77a7fcfcab97bf841ec08dbadf5d6b08af02b7a2cf5e
-  languageName: node
-  linkType: hard
-
 "rollup@npm:^3.27.1":
   version: 3.29.4
   resolution: "rollup@npm:3.29.4"
@@ -7832,12 +9453,12 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"selfsigned@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "selfsigned@npm:2.1.1"
+"scroll-into-view-if-needed@npm:3.0.10":
+  version: 3.0.10
+  resolution: "scroll-into-view-if-needed@npm:3.0.10"
   dependencies:
-    node-forge: ^1
-  checksum: aa9ce2150a54838978d5c0aee54d7ebe77649a32e4e690eb91775f71fdff773874a4fbafd0ac73d8ec3b702ff8a395c604df4f8e8868528f36fd6c15076fb43a
+    compute-scroll-into-view: ^3.0.2
+  checksum: eab326e527620883040e1937329bce28396ac67199098202fc785853b1576646ff1c987594f5630f78bfd84fda8486a793845c0f5c0b1ad70638c6d015578ebb
   languageName: node
   linkType: hard
 
@@ -8054,7 +9675,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:0.5.21, source-map-support@npm:^0.5.21":
+"source-map-support@npm:^0.5.21":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -8064,20 +9685,13 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.5.7":
-  version: 0.5.7
-  resolution: "source-map@npm:0.5.7"
-  checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
-  languageName: node
-  linkType: hard
-
 "source-map@npm:^0.7.0, source-map@npm:^0.7.3":
   version: 0.7.4
   resolution: "source-map@npm:0.7.4"
@@ -8085,13 +9699,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"sourcemap-codec@npm:^1.4.8":
-  version: 1.4.8
-  resolution: "sourcemap-codec@npm:1.4.8"
-  checksum: b57981c05611afef31605732b598ccf65124a9fcb03b833532659ac4d29ac0f7bfacbc0d6c5a28a03e84c7510e7e556d758d0bb57786e214660016fb94279316
-  languageName: node
-  linkType: hard
-
 "space-separated-tokens@npm:^2.0.0":
   version: 2.0.2
   resolution: "space-separated-tokens@npm:2.0.2"
@@ -8142,16 +9749,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"stacktracey@npm:^2.1.8":
-  version: 2.1.8
-  resolution: "stacktracey@npm:2.1.8"
-  dependencies:
-    as-table: ^1.0.36
-    get-source: ^2.0.12
-  checksum: abd8316b4e120884108f5a47b2f61abdcaeaa118afd95f3c48317cb057fff43d697450ba00de3f9fe7fee61ee72644ccda4db990a8e4553706644f7c17522eab
-  languageName: node
-  linkType: hard
-
 "standardized-audio-context@npm:^25.3.38":
   version: 25.3.41
   resolution: "standardized-audio-context@npm:25.3.41"
@@ -8170,13 +9767,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"stoppable@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "stoppable@npm:1.1.0"
-  checksum: 63104fcbdece130bc4906fd982061e763d2ef48065ed1ab29895e5ad00552c625f8a4c50c9cd2e3bfa805c8a2c3bfdda0f07c5ae39694bd2d5cb0bee1618d1e9
-  languageName: node
-  linkType: hard
-
 "stream-shift@npm:^1.0.0":
   version: 1.0.1
   resolution: "stream-shift@npm:1.0.1"
@@ -8306,10 +9896,21 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.2.0":
-  version: 4.2.0
-  resolution: "stylis@npm:4.2.0"
-  checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584
+"sucrase@npm:^3.32.0":
+  version: 3.34.0
+  resolution: "sucrase@npm:3.34.0"
+  dependencies:
+    "@jridgewell/gen-mapping": ^0.3.2
+    commander: ^4.0.0
+    glob: 7.1.6
+    lines-and-columns: ^1.1.6
+    mz: ^2.7.0
+    pirates: ^4.0.1
+    ts-interface-checker: ^0.1.9
+  bin:
+    sucrase: bin/sucrase
+    sucrase-node: bin/sucrase-node
+  checksum: 61860063bdf6103413698e13247a3074d25843e91170825a9752e4af7668ffadd331b6e99e92fc32ee5b3c484ee134936f926fa9039d5711fafff29d017a2110
   languageName: node
   linkType: hard
 
@@ -8345,6 +9946,57 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^1.14.0":
+  version: 1.14.0
+  resolution: "tailwind-merge@npm:1.14.0"
+  checksum: 8cf5d37f51b3b32e4bdd5544feaed34357bfba2f64f14834cc4a21ac29b0ae22d7255386467a0f1dadb3e38499389efbbabeddcd0b16571af5a0d346a4921877
+  languageName: node
+  linkType: hard
+
+"tailwind-variants@npm:^0.1.18":
+  version: 0.1.19
+  resolution: "tailwind-variants@npm:0.1.19"
+  dependencies:
+    tailwind-merge: ^1.14.0
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: a39d5a4d5627a5d86a971cab7b6c586e877556912a6ba4daa034ee9d3042cf22a4c3d00dc9ad587c5f434ac7cb92a92b0cd585e30626edb2a4df6fa848071b87
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "tailwindcss@npm:3.3.6"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.19.1
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 44632ac471248ecebcee1a2f15a0c3e9b8383513e71692b586aa2fe56dca12828ff70de3d340c898f27b27480e8475e5eb345fb2ebb813028bb2393578a34337
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1":
   version: 2.1.1
   resolution: "tar-fs@npm:2.1.1"
@@ -8419,6 +10071,24 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"thenify-all@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "thenify-all@npm:1.6.0"
+  dependencies:
+    thenify: ">= 3.1.0 < 4"
+  checksum: dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
+  languageName: node
+  linkType: hard
+
+"thenify@npm:>= 3.1.0 < 4":
+  version: 3.3.1
+  resolution: "thenify@npm:3.3.1"
+  dependencies:
+    any-promise: ^1.0.0
+  checksum: 84e1b804bfec49f3531215f17b4a6e50fd4397b5f7c1bccc427b9c656e1ecfb13ea79d899930184f78bc2f57285c54d9a50a590c8868f4f0cef5c1d9f898b05e
+  languageName: node
+  linkType: hard
+
 "through2@npm:^2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
@@ -8510,6 +10180,13 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"ts-interface-checker@npm:^0.1.9":
+  version: 0.1.13
+  resolution: "ts-interface-checker@npm:0.1.13"
+  checksum: 20c29189c2dd6067a8775e07823ddf8d59a33e2ffc47a1bd59a5cb28bb0121a2969a816d5e77eda2ed85b18171aa5d1c4005a6b88ae8499ec7cc49f78571cb5e
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^4.0.0":
   version: 4.2.0
   resolution: "tsconfig-paths@npm:4.2.0"
@@ -8521,7 +10198,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.2.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -8620,15 +10297,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"undici@npm:^5.22.1":
-  version: 5.27.2
-  resolution: "undici@npm:5.27.2"
-  dependencies:
-    "@fastify/busboy": ^2.0.0
-  checksum: 22bbdd763798700979986546d70072b67223189353d2a811efa9c6e44476161a0d1781ffe24115221f69a1b344b95d5926bd39a6eb760a2cd8804781cec0c5eb
-  languageName: node
-  linkType: hard
-
 "unified@npm:^10.0.0":
   version: 10.1.2
   resolution: "unified@npm:10.1.2"
@@ -8781,6 +10449,30 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-callback-ref@npm:1.3.0"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
+  languageName: node
+  linkType: hard
+
+"use-composed-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-composed-ref@npm:1.3.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: f771cbadfdc91e03b7ab9eb32d0fc0cc647755711801bf507e891ad38c4bbc5f02b2509acadf9c965ec9c5f2f642fd33bdfdfb17b0873c4ad0a9b1f5e5e724bf
+  languageName: node
+  linkType: hard
+
 "use-count-up@npm:^3.0.1":
   version: 3.0.1
   resolution: "use-count-up@npm:3.0.1"
@@ -8801,6 +10493,48 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"use-isomorphic-layout-effect@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
+  languageName: node
+  linkType: hard
+
+"use-latest@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "use-latest@npm:1.2.1"
+  dependencies:
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ed3f2ddddf6f21825e2ede4c2e0f0db8dcce5129802b69d1f0575fc1b42380436e8c76a6cd885d4e9aa8e292e60fb8b959c955f33c6a9123b83814a1a1875367
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: ^1.1.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
+  languageName: node
+  linkType: hard
+
 "utf-8-validate@npm:^5.0.2":
   version: 5.0.10
   resolution: "utf-8-validate@npm:5.0.10"
@@ -9153,61 +10887,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"workerd@npm:1.20231025.0":
-  version: 1.20231025.0
-  resolution: "workerd@npm:1.20231025.0"
-  dependencies:
-    "@cloudflare/workerd-darwin-64": 1.20231025.0
-    "@cloudflare/workerd-darwin-arm64": 1.20231025.0
-    "@cloudflare/workerd-linux-64": 1.20231025.0
-    "@cloudflare/workerd-linux-arm64": 1.20231025.0
-    "@cloudflare/workerd-windows-64": 1.20231025.0
-  dependenciesMeta:
-    "@cloudflare/workerd-darwin-64":
-      optional: true
-    "@cloudflare/workerd-darwin-arm64":
-      optional: true
-    "@cloudflare/workerd-linux-64":
-      optional: true
-    "@cloudflare/workerd-linux-arm64":
-      optional: true
-    "@cloudflare/workerd-windows-64":
-      optional: true
-  bin:
-    workerd: bin/workerd
-  checksum: ca9c119f51ab3ecdaa7a5dc917138e40d97a960101e98018307d224153677ef364229d6f5566927276ac8ef4af7e6734a44e029c7469c4b2cd9e6b9423a71a16
-  languageName: node
-  linkType: hard
-
-"wrangler@npm:latest":
-  version: 3.15.0
-  resolution: "wrangler@npm:3.15.0"
-  dependencies:
-    "@cloudflare/kv-asset-handler": ^0.2.0
-    "@esbuild-plugins/node-globals-polyfill": ^0.2.3
-    "@esbuild-plugins/node-modules-polyfill": ^0.2.2
-    blake3-wasm: ^2.1.5
-    chokidar: ^3.5.3
-    esbuild: 0.17.19
-    fsevents: ~2.3.2
-    miniflare: 3.20231025.0
-    nanoid: ^3.3.3
-    path-to-regexp: ^6.2.0
-    resolve.exports: ^2.0.2
-    selfsigned: ^2.0.1
-    source-map: 0.6.1
-    source-map-support: 0.5.21
-    xxhash-wasm: ^1.0.1
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  bin:
-    wrangler: bin/wrangler.js
-    wrangler2: bin/wrangler.js
-  checksum: 058c505c58bce8387bfd8fe051a8a9e50e5f7b564db15c07c33fcd7137f3dcc67f5bf507db1acb054ad54044d0e8756e08264e70c04722dd2be19f1e03d18a01
-  languageName: node
-  linkType: hard
-
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -9252,7 +10931,7 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.13.0":
+"ws@npm:^8.13.0":
   version: 8.13.0
   resolution: "ws@npm:8.13.0"
   peerDependencies:
@@ -9288,13 +10967,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"xxhash-wasm@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "xxhash-wasm@npm:1.0.2"
-  checksum: 11fec6e6196e37ad96cc958b7a4477dc30caf5b4da889a02a84f6f663ab8cd3c9be6ae405e66f0af0404301f27c39375191c5254f0409a793020e2093afd1409
-  languageName: node
-  linkType: hard
-
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"
@@ -9323,13 +10995,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"yaml@npm:^1.10.0":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
-  languageName: node
-  linkType: hard
-
 "yaml@npm:^2.1.1":
   version: 2.3.1
   resolution: "yaml@npm:2.3.1"
@@ -9373,24 +11038,6 @@ isbot@latest:
   languageName: node
   linkType: hard
 
-"youch@npm:^3.2.2":
-  version: 3.2.3
-  resolution: "youch@npm:3.2.3"
-  dependencies:
-    cookie: ^0.5.0
-    mustache: ^4.2.0
-    stacktracey: ^2.1.8
-  checksum: c0faced3813c1f81a1f98befbfe7f260d4933b99cd8ca16b0da48e6f69bacaf6f2b1172e83a666413dee7613c31705c4fcfbf4779e953ee3e7003eb1efc4a6c9
-  languageName: node
-  linkType: hard
-
-"zod@npm:^3.20.6":
-  version: 3.22.2
-  resolution: "zod@npm:3.22.2"
-  checksum: 231e2180c8eabb56e88680d80baff5cf6cbe6d64df3c44c50ebe52f73081ecd0229b1c7215b9552537f537a36d9e36afac2737ddd86dc14e3519bdbc777e82b9
-  languageName: node
-  linkType: hard
-
 "zod@npm:^3.22.3":
   version: 3.22.4
   resolution: "zod@npm:3.22.4"