diff --git a/frontend/app/learn/page.tsx b/frontend/app/learn/page.tsx
index 4ab6f01..6d4dc58 100644
--- a/frontend/app/learn/page.tsx
+++ b/frontend/app/learn/page.tsx
@@ -568,7 +568,7 @@ export default function LearnPage() {
      
               </div>
 
-            <div className="space-y-3">
+            <div className="space-y-3 mb-6">
               {quizOptions.map((option, idx) => (
                 <button
                   key={idx}
@@ -590,30 +590,35 @@ export default function LearnPage() {
             </div>
 
               {showResult && (
-                <div className={`mt-6 p-4 rounded-lg ${
+                <div className={`p-6 rounded-lg w-full mb-6 ${
                   selectedAnswer === currentCard.word
                     ? 'bg-green-50 border border-green-200'
                     : 'bg-red-50 border border-red-200'
                 }`}>
-                  <p className={`font-semibold ${
+                  <p className={`font-semibold text-left text-xl mb-4 ${
                     selectedAnswer === currentCard.word
                       ? 'text-green-700'
                       : 'text-red-700'
                   }`}>
                     {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                   </p>
+
                   {selectedAnswer !== currentCard.word && (
-                    <p className="text-gray-700 mt-2">
-                      正確答案是：<strong>{currentCard.word}</strong> {currentCard.pronunciation}
-                    </p>
+                    <div className="mb-4">
+                      <p className="text-gray-700 text-left">
+                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
+                      </p>
+                    </div>
                   )}
-                  {selectedAnswer === currentCard.word && (
-                    <p className="text-gray-700 mt-2">
-                      <strong>{currentCard.word}</strong> {currentCard.pronunciation}
-                    </p>
-                  )}
-                  <div className="mt-3 text-left">
-                    <AudioPlayer text={currentCard.word} />
+
+                  <div className="space-y-3">
+                    <div className="text-left">
+                      <div className="flex items-center text-gray-600">
+                        <strong>發音：</strong>
+                        <span className="mx-2">{currentCard.pronunciation}</span>
+                        <AudioPlayer text={currentCard.word} />
+                      </div>
+                    </div>
                   </div>
                 </div>
               )}
@@ -845,7 +850,7 @@ export default function LearnPage() {
               </div>
 
             {/* Word Options */}
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-2 gap-3 mb-6">
               {[currentCard.word, 'determine', 'achieve', 'consider'].map((word) => (
                 <button
                   key={word}
@@ -867,12 +872,12 @@ export default function LearnPage() {
             </div>
 
               {showResult && (
-                <div className={`mt-6 p-4 rounded-lg ${
+                <div className={`p-6 rounded-lg w-full mb-6 ${
                   selectedAnswer === currentCard.word
                     ? 'bg-green-50 border border-green-200'
                     : 'bg-red-50 border border-red-200'
                 }`}>
-                  <p className={`font-semibold ${
+                  <p className={`font-semibold text-left text-xl mb-4 ${
                     selectedAnswer === currentCard.word
                       ? 'text-green-700'
                       : 'text-red-700'
@@ -880,11 +885,11 @@ export default function LearnPage() {
                     {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                   </p>
                   {selectedAnswer !== currentCard.word && (
-                    <div className="mt-2">
-                      <p className="text-gray-700">
-                        正確答案是：<strong>{currentCard.word}</strong>
+                    <div className="mb-4">
+                      <p className="text-gray-700 text-left">
+                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
                       </p>
-                      <p className="text-gray-600 mt-1">
+                      <p className="text-gray-600 text-left mt-1">
                         發音：{currentCard.pronunciation}
                       </p>
                     </div>
diff --git a/frontend/components/VoiceRecorder.tsx b/frontend/components/VoiceRecorder.tsx
index c90e26c..4260d99 100644
--- a/frontend/components/VoiceRecorder.tsx
+++ b/frontend/components/VoiceRecorder.tsx
@@ -252,7 +252,6 @@ export default function VoiceRecorder({
               src={exampleImage}
               alt="Example context"
               className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
-              style={{ maxHeight: '400px', objectFit: 'contain' }}
             />
           </div>
         </div>