diff --git a/components/RevealScreen.tsx b/components/RevealScreen.tsx
index a51eab6..6845c9d 100644
--- a/components/RevealScreen.tsx
+++ b/components/RevealScreen.tsx
@@ -133,7 +133,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
   const ShapeIcon = SHAPES[correctOption.shape];
 
   return (
-    <div className={`flex flex-col items-center justify-center h-screen ${bgColor} text-white p-6 relative overflow-hidden transition-colors duration-500`}>
+    <div className={`flex flex-col items-center justify-center h-screen ${bgColor} text-white p-4 md:p-6 relative overflow-hidden transition-colors duration-500`}>
       
       {/* Dynamic Background Circles */}
       <motion.div 
@@ -148,15 +148,15 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
         transition={{ type: "spring", bounce: 0.6 }}
         className="flex flex-col items-center z-10"
       >
-        <div className="bg-white p-6 rounded-full shadow-[0_10px_0_rgba(0,0,0,0.2)] mb-8">
+        <div className="bg-white p-4 md:p-6 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] md:shadow-[0_10px_0_rgba(0,0,0,0.2)] mb-4 md:mb-8">
             {isCorrect ? (
-                <Check size={80} className="text-[#22c55e]" strokeWidth={4} />
+                <Check className="w-12 h-12 md:w-20 md:h-20 text-[#22c55e]" strokeWidth={4} />
             ) : (
-                <X size={80} className="text-[#ef4444]" strokeWidth={4} />
+                <X className="w-12 h-12 md:w-20 md:h-20 text-[#ef4444]" strokeWidth={4} />
             )}
         </div>
 
-        <h1 className="text-6xl md:text-8xl font-black font-display mb-4 drop-shadow-lg text-center">
+        <h1 className="text-4xl md:text-8xl font-black font-display mb-2 md:mb-4 drop-shadow-lg text-center">
             {isCorrect ? "Correct!" : "Incorrect"}
         </h1>
 
@@ -167,32 +167,32 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
             className="flex flex-col items-center"
         >
             {isCorrect ? (
-                <div className="flex flex-col items-center gap-4 mb-8">
-                    <div className="bg-black/20 px-8 py-4 rounded-3xl backdrop-blur-sm border-4 border-white/30 flex items-center gap-4">
-                        <span className="text-4xl font-black">+{pointsEarned}</span>
-                        <span className="font-bold uppercase opacity-80">Points</span>
+                <div className="flex flex-col items-center gap-2 md:gap-4 mb-4 md:mb-8">
+                    <div className="bg-black/20 px-4 md:px-8 py-2 md:py-4 rounded-2xl md:rounded-3xl backdrop-blur-sm border-2 md:border-4 border-white/30 flex items-center gap-2 md:gap-4">
+                        <span className="text-2xl md:text-4xl font-black">+{pointsEarned}</span>
+                        <span className="text-sm md:text-base font-bold uppercase opacity-80">Points</span>
                     </div>
                     {correctOption.reason && (
-                      <p className="text-center text-lg opacity-90 max-w-md bg-black/10 px-4 py-2 rounded-xl">
+                      <p className="text-center text-sm md:text-lg opacity-90 max-w-md bg-black/10 px-3 md:px-4 py-2 rounded-xl">
                         {correctOption.reason}
                       </p>
                     )}
                 </div>
             ) : (
-                <div className="text-2xl font-bold opacity-90 mb-8 max-w-md text-center">
+                <div className="text-base md:text-2xl font-bold opacity-90 mb-4 md:mb-8 max-w-xs md:max-w-md text-center px-4">
                     Don't worry, you can catch up in the next round!
                 </div>
             )}
 
             {/* Streak Indicator */}
             {streak > 1 && isCorrect && (
-                <div className="flex items-center gap-2 text-yellow-200 font-black text-2xl animate-pulse">
-                    <Flame fill="currentColor" />
+                <div className="flex items-center gap-2 text-yellow-200 font-black text-lg md:text-2xl animate-pulse">
+                    <Flame className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" />
                     <span>Answer Streak: {streak}</span>
                 </div>
             )}
             
-            <div className="mt-8 bg-black/20 px-6 py-2 rounded-xl text-xl font-bold">
+            <div className="mt-4 md:mt-8 bg-black/20 px-4 md:px-6 py-2 rounded-xl text-base md:text-xl font-bold">
                 Total Score: <AnimatedCounter from={newScore - (pointsEarned || 0)} to={newScore} />
             </div>
         </motion.div>
@@ -201,31 +201,31 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
       </motion.div>
 
       {!isCorrect && (
-           <div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${(isHost || isPresenter) ? 'pb-20' : ''}`}>
+           <div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${(isHost || isPresenter) ? 'pb-16 md:pb-20' : ''}`}>
              <motion.div 
                 initial={{ y: "100%" }}
                 animate={{ y: 0 }}
                 transition={{ delay: 0.5, type: 'spring' }}
-                className="bg-black/30 backdrop-blur-md p-6 pb-12"
+                className="bg-black/30 backdrop-blur-md p-4 md:p-6 pb-8 md:pb-12"
              >
                 {selectedOption && selectedOption.reason && (
-                  <div className="mb-4 pb-4 border-b border-white/20">
-                    <p className="text-center text-sm font-bold uppercase tracking-widest mb-2 opacity-70">Why your answer was wrong</p>
-                    <p className="text-center text-sm opacity-90 max-w-md mx-auto">
+                  <div className="mb-3 md:mb-4 pb-3 md:pb-4 border-b border-white/20">
+                    <p className="text-center text-xs md:text-sm font-bold uppercase tracking-widest mb-1 md:mb-2 opacity-70">Why your answer was wrong</p>
+                    <p className="text-center text-xs md:text-sm opacity-90 max-w-md mx-auto">
                       {selectedOption.reason}
                     </p>
                   </div>
                 )}
-                <p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p>
-                <div className="flex flex-col items-center gap-3">
-                    <div className="flex items-center gap-4">
-                        <div className={`${COLORS[correctOption.color]} p-3 rounded-xl shadow-lg`}>
-                            <ShapeIcon size={24} fill="currentColor" />
+                <p className="text-center text-xs md:text-sm font-bold uppercase tracking-widest mb-2 md:mb-4 opacity-70">The correct answer was</p>
+                <div className="flex flex-col items-center gap-2 md:gap-3">
+                    <div className="flex items-center gap-3 md:gap-4">
+                        <div className={`${COLORS[correctOption.color]} p-2 md:p-3 rounded-lg md:rounded-xl shadow-lg`}>
+                            <ShapeIcon className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" />
                         </div>
-                        <span className="text-2xl font-black">{correctOption.text}</span>
+                        <span className="text-xl md:text-2xl font-black">{correctOption.text}</span>
                     </div>
                     {correctOption.reason && (
-                      <p className="text-center text-sm opacity-80 max-w-md mt-2">
+                      <p className="text-center text-xs md:text-sm opacity-80 max-w-md mt-1 md:mt-2">
                         {correctOption.reason}
                       </p>
                     )}