diff --git a/app/page.tsx b/app/page.tsx
index 6b11987..11b25ec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
 		<main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center">
 			<button
 				onClick={handleCreateGame}
-				className="bg-gray-800 hover:bg-gray-700 text-white text-lg px-6 py-3 rounded-xl shadow transition cursor-pointer"
+				className="bg-slate-800 hover:bg-slate-700 text-yellow-400 hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
 			>
 				Create New Game
 			</button>
diff --git a/components/Card.tsx b/components/Card.tsx
index fa6365a..22c8f88 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -33,8 +33,8 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 			<>
 				{text.map((t, i) => (
 					<div key={i}>
-						<p>{t}</p>
-						{i < text.length - 1 && <hr className="my-2 border-gray-300" />}
+						<p className="text-yellow-400">{t}</p>
+						{i < text.length - 1 && <hr className="my-2 border-yellow-400" />}
 					</div>
 				))}
 			</>
@@ -54,14 +54,14 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 						<img
 							src={getURL(cardBack as TarokkaGameCard, settings)}
 							alt="Card Back"
-							className="rounded-lg border border-gray-600"
+							className="rounded-lg border border-yellow-500"
 						/>
 					</div>
 					<div className="absolute group inset-0 backface-hidden rotate-y-180">
 						<img
 							src={getURL(card, settings)}
 							alt={aria}
-							className="rounded-lg border border-gray-600 "
+							className="rounded-lg border border-yellow-500 "
 						/>
 					</div>
 				</div>
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 6d75865..0e59990 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -30,12 +30,15 @@ export default function CopyButton({
 		}
 	};
 
-	const ttContent =
-		Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip;
+	const ttContent = (
+		<span className="text-yellow-300">
+			{Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip}
+		</span>
+	);
 
 	return (
 		<button onClick={handleCopy} className={`cursor-pointer ${className}`}>
-			<ToolTip content={ttContent} className="w-full">
+			<ToolTip content={ttContent} className="w-full font-yellow-400">
 				<div className="flex items-center gap-2 w-full text-sm font-medium">
 					{title}
 					{copied ? (
diff --git a/components/Notes.tsx b/components/Notes.tsx
index bd06aea..813964c 100644
--- a/components/Notes.tsx
+++ b/components/Notes.tsx
@@ -42,7 +42,7 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 			className={`fixed bottom-4 right-4 z-50 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
 		>
 			<button
-				className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
+				className={`text-yellow-400 hover:text-yellow-300 p-2 transition-all duration-250 cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
 				onClick={() => setOpen((prev) => !prev)}
 			>
 				<ScrollText className="w-5 h-5" />
@@ -53,13 +53,13 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 				className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
 			>
 				<div
-					className={`fixed bottom-4 right-4 transition-all duration-250 text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`}
+					className={`fixed bottom-4 right-4 transition-all duration-250 bg-slate-800 border border-yellow-400 rounded-lg space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`}
 				>
 					<CopyButton
 						copy={notes.map((note) => note!.join('\n')).join('\n\n')}
-						className="absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full text-gray-300 hover:text-white"
+						className="text-yellow-400 hover:drop-shadow-[0_0_1px_#ffd700] absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full cursor-pointer"
 					/>
-					<div className="h-full overflow-scroll p-6 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
+					<div className="text-yellow-400 h-full overflow-scroll p-6 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
 						{notes.map((note, index) => (
 							<div key={index}>
 								<div className="flex flex-col gap-2">
@@ -67,7 +67,7 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 										<p key={index}>{blurb}</p>
 									))}
 								</div>
-								{index < notes.length - 1 && <hr className="my-3 border-gray-300" />}
+								{index < notes.length - 1 && <hr className="my-3 border-yellow-400" />}
 							</div>
 						))}
 					</div>
diff --git a/components/Settings.tsx b/components/Settings.tsx
index ba8e281..34a808d 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -45,6 +45,23 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 		});
 	};
 
+	const Links = () => (
+		<>
+			<CopyButton
+				title="Copy DM link"
+				copy={`${location.origin}/${gameData.dmID}`}
+				tooltip={`${location.origin}/${gameData.dmID}`}
+				className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
+			/>
+			<CopyButton
+				title="Copy Spectator link"
+				copy={`${location.origin}/${gameData.spectatorID}`}
+				tooltip={`${location.origin}/${gameData.spectatorID}`}
+				className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
+			/>
+		</>
+	);
+
 	const Permissions = () => (
 		<>
 			{Object.entries(gameData.settings)
@@ -57,17 +74,17 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 
 	const CardStyle = () => (
 		<fieldset className="flex flex-col">
-			<div className="text-xs text-gray-400 mb-1">Card style:</div>
+			<div className="text-xs mb-1">Card style:</div>
 			<div className="inline-flex overflow-hidden rounded-md w-full">
 				{cardStyleOptions.map((option, index) => (
 					<label
 						key={option}
 						className={`cursor-pointer px-4 py-2 text-sm font-medium transition
-                    ${gameData.settings.cardStyle === option ? 'bg-gray-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}
+                    ${gameData.settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
                     ${index === 0 ? 'rounded-l-md' : ''}
                     ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
                     ${index !== 0 && 'border-l border-gray-600'}
-                    border border-gray-600
+                    border border-yellow-500 hover:text-yellow-300
                   `}
 					>
 						<input
@@ -92,26 +109,15 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 				className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
 			>
 				<div
-					className={`fixed top-4 right-4 flex flex-col items-center justify-center text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
+					className={`fixed top-4 right-4 flex flex-col items-center justify-center bg-slate-800 text-yellow-400 rounded-lg border border-yellow-400 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
 				>
-					<CopyButton
-						title="Copy DM link"
-						copy={`${location.origin}/${gameData.dmID}`}
-						tooltip={`${location.origin}/${gameData.dmID}`}
-						className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
-					/>
-					<CopyButton
-						title="Copy Spectator link"
-						copy={`${location.origin}/${gameData.spectatorID}`}
-						tooltip={`${location.origin}/${gameData.spectatorID}`}
-						className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
-					/>
+					<Links />
 					<Permissions />
 					<CardStyle />
 				</div>
 			</Scrim>
 			<button
-				className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
+				className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
 				onClick={() => setOpen((prev) => !prev)}
 			>
 				<Gear className="w-5 h-5" />
diff --git a/components/Switch.tsx b/components/Switch.tsx
index 340d7e1..0931631 100644
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -6,20 +6,20 @@ export interface SwitchProps {
 
 export default function Switch({ label, value, toggleAction }: SwitchProps) {
 	return (
-		<label className="flex items-center justify-between w-full gap-2 cursor-pointer">
+		<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
 			<span className="text-sm capitalize">{label}</span>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
 				<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
 				<div
 					className={`block w-8 h-4 rounded-full transition ${
-						value ? 'bg-gray-500' : 'bg-gray-600'
+						value ? 'bg-slate-500' : 'bg-slate-600'
 					}`}
 				/>
 				<div
-					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-transform duration-200 ease-out transform
-            ${value ? 'translate-x-4 scale-110 shadow-[0_0_2px_2px_rgba(255,255,255,0.4)]' : 'scale-95'}
-            ${value ? 'bg-gray-100' : 'bg-gray-400'}`}
+					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
+            ${value ? 'translate-x-4 scale-110' : 'scale-95'}
+            ${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
 				/>
 			</div>
 		</label>
diff --git a/components/ToolTip.tsx b/components/ToolTip.tsx
index 2b40c23..7facd69 100644
--- a/components/ToolTip.tsx
+++ b/components/ToolTip.tsx
@@ -75,7 +75,7 @@ export default function Tooltip({
 			</div>
 			<div
 				ref={ttRef}
-				className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-black text-white rounded-xl border border-gray-300 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`}
+				className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-[#1e293b] rounded-lg border border-yellow-500 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`}
 				style={{
 					top: `${pos.y + offsetY}px`,
 					left: `${pos.x + offsetX}px`,