diff --git a/packages/interface/src/components/os/TrafficLights.tsx b/packages/interface/src/components/os/TrafficLights.tsx
index 755b06b28..84a79017a 100644
--- a/packages/interface/src/components/os/TrafficLights.tsx
+++ b/packages/interface/src/components/os/TrafficLights.tsx
@@ -18,7 +18,7 @@ export const MacTrafficLights: React.FC<TrafficLightsProps> = (props) => {
 	return (
 		<div
 			data-tauri-drag-region
-			className={clsx('flex flex-row space-x-[8px] group', props.className)}
+			className={clsx('flex flex-row space-x-[7.5px] group', props.className)}
 		>
 			<TrafficLight type="close" onClick={props.onClose} colorful={focused} />
 			<TrafficLight type="minimize" onClick={props.onMinimize} colorful={focused} />
@@ -57,7 +57,7 @@ const TrafficLight: React.FC<TrafficLightProps> = (props) => {
 			className={clsx(
 				'rounded-full box-content w-[12px] h-[12px] border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F] flex justify-center items-center',
 				{
-					'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-400':
+					'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-300':
 						type === 'close' && colorful,
 					'border-yellow-900 !bg-[#F4BE4F] active:hover:!bg-yellow-600 dark:active:hover:!bg-yellow-200':
 						type === 'minimize' && colorful,