diff --git a/robot_ui/src/app/globals.css b/robot_ui/src/app/globals.css
index fbacd16..f9290ae 100644
--- a/robot_ui/src/app/globals.css
+++ b/robot_ui/src/app/globals.css
@@ -8,7 +8,7 @@
 	border-radius: 8px;
 	border: 3px solid #131313;
 	padding: 0.2rem 0.5rem;
-	transition: transform 0.2s ease-in;
+	transition: transform 0.15s ease-in;
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: bold;
@@ -17,3 +17,9 @@
 .btn:hover {
 	transform: scale(1.05);
 }
+
+.btn:disabled {
+	cursor: not-allowed;
+	transform: scale(1);
+	background-color: #e3a36f;
+}
diff --git a/robot_ui/src/components/Controls.tsx b/robot_ui/src/components/Controls.tsx
index 78944a7..0afa907 100644
--- a/robot_ui/src/components/Controls.tsx
+++ b/robot_ui/src/components/Controls.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 type Props = {
 	isMuted: boolean;
 	isPlaying: boolean;
@@ -8,17 +10,26 @@ type Props = {
 	onMuteClick: () => void;
 };
 const Controls: React.FC<Props> = ({ onNextClick, onPlayClick, onMuteClick, isMuted, isPlaying }) => {
+	const [ttsAvailable, setTtsAvailable] = useState<boolean>(false);
+
+	useEffect(() => {
+		const voices = window.speechSynthesis.getVoices();
+		if (window.speechSynthesis && voices.length > 0) {
+			setTtsAvailable(true);
+		}
+	}, []);
+
 	return (
 		<div className="flex flex-col gap-2 absolute top-[170px] right-4 z-10 w-44">
 			<button className="btn w-full" onClick={onNextClick}>
 				⏩ NEXT JOKE
 			</button>
 
-			<button className="btn w-full" onClick={onPlayClick}>
+			<button className="btn w-full" onClick={onPlayClick} disabled={!ttsAvailable || isMuted}>
 				{isPlaying ? '🛑 STOP' : '▶️ TELL ME JOKE'}
 			</button>
 
-			<button className="btn w-full" onClick={onMuteClick}>
+			<button className="btn w-full" onClick={onMuteClick} disabled={!ttsAvailable}>
 				{!isMuted ? '🔇 MUTE' : '🔊 UNMUTE'}
 			</button>
 		</div>
diff --git a/robot_ui/src/components/PlayJokes.tsx b/robot_ui/src/components/PlayJokes.tsx
index ea45053..e2ef0a8 100644
--- a/robot_ui/src/components/PlayJokes.tsx
+++ b/robot_ui/src/components/PlayJokes.tsx
@@ -13,13 +13,15 @@ import { writeLog } from '@/app/actions';
 
 const PlayJokes = () => {
 	const [joke, setJoke] = useState<string>();
-	const [isMuted, setIsMuted] = useState<boolean>(false);
+	const [isMuted, setIsMuted] = useState<boolean>(true);
 	const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
+	const [showDebugInfo, setShowDebugInfo] = useState(false);
+
 	const timeoutRef = useRef<NodeJS.Timeout>();
 
 	const { smileDegree, setVideoNode, startPrediction, stopPrediction } = useFaceLandmarkDetector();
+
 	const maxSmileDegree = useApplicationStore((state) => state.smileDegree);
-	const [showDebugInfo, setShowDebugInfo] = useState(false);
 	const uuid = useUserStore((state) => state.uuid);
 	const startTime = useUserStore((state) => state.startTime);
 	const studyRound = useUserStore((state) => state.studyRound);
@@ -45,13 +47,13 @@ const PlayJokes = () => {
 		const synth = window.speechSynthesis;
 		const voices = synth.getVoices();
 
-		// console.log(voices);
-		// console.log(voices.findIndex((voice) => voice.name.includes('Alicia'))); // alicia, zac
+		//console.log(voices);
+		//console.log(voices.findIndex((voice) => voice.name.includes('Steph'))); //steph, alicia, zac
 
 		const msg = new SpeechSynthesisUtterance(joke);
-		const voiceIndex = 174; // zac = 266 , alicia = 174//13300
-		msg.rate = 1;
-		msg.pitch = 1.2;
+		const voiceIndex = 10; // steph = 10 , zac = 266 , alicia = 174
+		msg.rate = 1.1;
+		msg.pitch = 1.1;
 		msg.voice = voices[voiceIndex];
 		msg.lang = voices[voiceIndex]?.lang;
 
@@ -96,6 +98,7 @@ const PlayJokes = () => {
 		if (window.speechSynthesis.speaking) {
 			window.speechSynthesis.cancel();
 		} else {
+			setIsMuted(false);
 			speakJoke();
 		}
 	};