diff --git a/app/api/audioEvents.ts b/app/api/audioEvents.ts
index 7baf946..94c3148 100644
--- a/app/api/audioEvents.ts
+++ b/app/api/audioEvents.ts
@@ -67,13 +67,11 @@ const audioEvents = {
 			// 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 rgba(255, 255, 255, 0.15);
-				background-color: #0a1929;
+				border-top: 1px solid rgba(128,128,128,.3);
 			}
 
 			::-webkit-scrollbar-thumb {
@@ -85,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) {
diff --git a/app/api/renderWaveform.tsx b/app/api/renderWaveform.tsx
index ea230c8..9c2853b 100644
--- a/app/api/renderWaveform.tsx
+++ b/app/api/renderWaveform.tsx
@@ -163,7 +163,7 @@ const TrackView = ({ trackId }: { trackId: Track['id'] }) => {
 	const analyzing = analyzingTracks.has(trackId)
 
 	const containerClass =
-		'p-0 border-1 border-divider rounded bg-primary-50 overflow-hidden'
+		'p-0 border-1 border-divider rounded bg-default-50 overflow-hidden'
 
 	return (
 		<div
diff --git a/app/components/layout/DarkModeButton.tsx b/app/components/layout/DarkModeButton.tsx
index 9cdea00..350208f 100644
--- a/app/components/layout/DarkModeButton.tsx
+++ b/app/components/layout/DarkModeButton.tsx
@@ -7,7 +7,7 @@ const DarkMode = () => {
 
 	return (
 		<Tooltip
-			color="primary"
+			color="default"
 			size="sm"
 			content={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
 		>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index 189348e..f393e8b 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -5,11 +5,11 @@ import LoginButton from '~/components/layout/LoginButton.client'
 import Logo from '~/components/layout/MixpointLogo'
 
 const Header = () => (
-	<div className="p-4 flex flex-row bg-primary justify-between items-center border-b border-default sticky z-10">
+	<div className="p-4 flex flex-row bg-primary-50 justify-between items-center border-b border-default sticky z-10">
 		<Logo />
 		<div className="flex flex-row gap-x-2">
 			<LoginButton />
-			<Tooltip color="primary" size="sm" content="Discuss on GitHub">
+			<Tooltip color="default" size="sm" content="Discuss on GitHub">
 				<Button
 					isIconOnly
 					variant="light"
diff --git a/app/components/layout/LeftNav.tsx b/app/components/layout/LeftNav.tsx
index e82632a..71cd3e5 100644
--- a/app/components/layout/LeftNav.tsx
+++ b/app/components/layout/LeftNav.tsx
@@ -4,7 +4,7 @@ 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">
+	<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"
diff --git a/app/components/mixes/MixCard.tsx b/app/components/mixes/MixCard.tsx
index b5df6e0..e9b04df 100644
--- a/app/components/mixes/MixCard.tsx
+++ b/app/components/mixes/MixCard.tsx
@@ -40,10 +40,10 @@ const MixCard = ({
 	)
 
 	const loaderClassNames =
-		'p-0 border-1 border-divider rounded bg-primary-50 overflow-hidden'
+		'p-0 border-1 border-divider rounded bg-default-50 overflow-hidden'
 
 	return (
-		<div className="p-3 w-5/12 rounded border-1 border-divider bg-primary">
+		<div className="p-3 w-5/12 rounded border-1 border-divider bg-primary-50">
 			{!trackId ? (
 				<Dropzone className="h-full" trackSlot={trackSlot} />
 			) : (
diff --git a/app/components/mixes/VolumeMeter.tsx b/app/components/mixes/VolumeMeter.tsx
index e43b009..e53c3aa 100644
--- a/app/components/mixes/VolumeMeter.tsx
+++ b/app/components/mixes/VolumeMeter.tsx
@@ -24,7 +24,7 @@ const VolumeMeter = ({
 				style={{
 					width: `${100 - volumeMeter * 100}%`
 				}}
-				className="bg-primary h-full z-10 absolute top-0 right-0"
+				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 065d2d0..0ce58bb 100644
--- a/app/components/tracks/Controls.tsx
+++ b/app/components/tracks/Controls.tsx
@@ -396,10 +396,10 @@ const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 	return (
 		<Tabs
 			aria-label="Mix Controls"
-			variant="solid"
+			variant="bordered"
 			classNames={{
 				base: 'border-1 border-primary-300 rounded',
-				tabList: 'rounded h-7 bg-primary px-0 gap-.5',
+				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',
@@ -463,21 +463,6 @@ const MixpointControl = ({ trackId }: { trackId: Track['id'] }) => {
 					inputWrapper: 'border-1 bg-default-50 rounded px-2 h-6 min-h-0',
 					input: 'text-xs text-right text-default-600'
 				}}
-				// 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'
-				// }}
 			/>
 		</form>
 	)
@@ -512,7 +497,7 @@ const StemControl = ({
 			<div className="w-full">
 				<div
 					id={`zoomview-container_${trackId}_${stemType}`}
-					className="p-0 border-1 border-divider rounded bg-primary-50 overflow-hidden relative z-1 h-5"
+					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)
@@ -565,7 +550,7 @@ const CrossfaderControl = ({ stemType }: { stemType?: Stem }) => (
 		classNames={{
 			base: 'mb-3',
 			filler: 'bg-transparent',
-			thumb: 'h-4 w-5 bg-primary-600 border-1 border-primary-700'
+			thumb: 'h-5 w-3 bg-primary-400 border-1 border-primary-400'
 		}}
 	/>
 )
diff --git a/app/components/tracks/TrackDrawer.tsx b/app/components/tracks/TrackDrawer.tsx
index 4c64900..14c7a75 100644
--- a/app/components/tracks/TrackDrawer.tsx
+++ b/app/components/tracks/TrackDrawer.tsx
@@ -27,7 +27,8 @@ const TrackDrawer = () => {
 				classNames={{
 					base: 'border-t-1 border-primary-300',
 					trigger: 'p-0',
-					titleWrapper: 'flex-row justify-center'
+					titleWrapper: 'flex-row justify-center',
+					content: 'mx-4'
 				}}
 			>
 				<TrackTable />
diff --git a/app/components/tracks/TrackTable.tsx b/app/components/tracks/TrackTable.tsx
index c7e8da5..efe9156 100644
--- a/app/components/tracks/TrackTable.tsx
+++ b/app/components/tracks/TrackTable.tsx
@@ -442,6 +442,7 @@ const TrackTable = () => {
 			isCompact
 			removeWrapper
 			aria-label="Track table"
+			color="default"
 			checkboxesProps={{
 				classNames: {
 					wrapper: 'rounded'
@@ -548,7 +549,7 @@ const TrackTable = () => {
 	)
 
 	return (
-		<div className="p-4 m-4 bg-primary border-1 border-divider rounded h-fit">
+		<div className="p-4 bg-primary-50 border-1 border-divider rounded h-fit">
 			{tableHeader}
 			{tableBody}
 			{tableFooter}
diff --git a/app/global.css b/app/global.css
index 61a9563..d65232c 100644
--- a/app/global.css
+++ b/app/global.css
@@ -13,18 +13,6 @@ body {
   height: 100vh;
 }
 
-tr:hover .visibleOnHover {
-  visibility: 'visible';
-}
-
-.visibleOnHover {
-  visibility: 'hidden';
-}
-
-.visible {
-  visibility: 'visible'
-}
-
 /* wavesurfer ui tweaks */
 .wavesurfer-playhead {
   width: 0;
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index f1207b0..64ada8c 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -28,7 +28,9 @@ const Index: React.FunctionComponent = () => {
 				<>
 					<div className="grid grid-cols-[minmax(64px,200px),minmax(450px,1fr)] h-screen">
 						<LeftNav />
-						<TrackTable />
+						<div className="p-4">
+							<TrackTable />
+						</div>
 					</div>
 					<Heart />
 				</>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ffc4bad..ed92c89 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,9 +14,6 @@ export default ({
 	],
 	theme: {
 		extend: {
-			borderColor: {
-				default: '#c2e0ff14'
-			},
 			backgroundImage: {
 				lightGraph: lightGraphBackground,
 				darkGraph: darkGraphBackground
@@ -34,14 +31,17 @@ export default ({
 			themes: {
 				light: {
 					colors: {
-						background: 'rgba(255, 255, 255, 0.9)'
+						background: 'rgba(255, 255, 255, 0.9)',
+						primary: {
+							50: '#f0f7ff'
+						}
 					}
 				},
 				dark: {
 					colors: {
 						background: '#0e141a',
 						primary: {
-							DEFAULT: '#0a1929'
+							50: '#0a1929'
 						}
 					}
 				}