diff --git a/App.tsx b/App.tsx
index 58bbc72..48a1328 100644
--- a/App.tsx
+++ b/App.tsx
@@ -12,6 +12,7 @@ import { ConversationHistory } from './components/ConversationHistory';
 import { ScenarioSetup } from './components/ScenarioSetup';
 import { ApiKeySetup } from './components/ApiKeySetup';
 import { GearIcon } from './components/icons/GearIcon';
+import { ConversationHint } from './components/ConversationHint';
 
 const App: React.FC = () => {
   // SEO metadata - similar to Next.js metadata export
@@ -29,6 +30,7 @@ const App: React.FC = () => {
   const [hasStarted, setHasStarted] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [autoPlayMessageId, setAutoPlayMessageId] = useState<number | null>(null);
+  const [currentHint, setCurrentHint] = useState<string | null>(null);
 
   // Scenario mode state
   const [scenarioMode, setScenarioMode] = useState<ScenarioMode>('none');
@@ -221,7 +223,7 @@ const App: React.FC = () => {
         return;
       }
 
-      const { audioUrl, userText, modelText } = response;
+      const { audioUrl, userText, modelText, hint } = response;
 
       // Add messages to history (append for chronological order - newest last)
       const timestamp = Date.now();
@@ -229,10 +231,15 @@ const App: React.FC = () => {
       const newMessages: Message[] = [
         ...messages,
         { role: 'user', text: userText, timestamp },
-        { role: 'model', text: modelText, timestamp: modelTimestamp, audioUrl },
+        { role: 'model', text: modelText, timestamp: modelTimestamp, audioUrl, hint },
       ];
       setMessages(newMessages);
 
+      // Update current hint (only in scenario mode)
+      if (scenarioMode === 'practice' && hint) {
+        setCurrentHint(hint);
+      }
+
       // Set the new model message to auto-play
       setAutoPlayMessageId(modelTimestamp);
 
@@ -277,9 +284,10 @@ const App: React.FC = () => {
 
       // Clear shared conversation history
       clearHistory();
-      // Clear UI messages
+      // Clear UI messages and hint
       setMessages([]);
       setAutoPlayMessageId(null);
+      setCurrentHint(null);
       // Always reset Gemini session when clearing history, preserving scenario if active
       resetSession(activeScenario);
     } catch (error) {
@@ -289,6 +297,7 @@ const App: React.FC = () => {
       // Still clear UI messages even if resetSession fails
       setMessages([]);
       setAutoPlayMessageId(null);
+      setCurrentHint(null);
     }
   };
 
@@ -476,10 +485,11 @@ const App: React.FC = () => {
     setScenario(null);
     setScenarioOpenAI(null);
 
-    // Clear conversation
+    // Clear conversation and hint
     clearHistory();
     setMessages([]);
     setAutoPlayMessageId(null);
+    setCurrentHint(null);
   };
 
   // Status text for the landing view
@@ -616,6 +626,13 @@ const App: React.FC = () => {
               playbackSpeed={playbackSpeed}
               autoPlayMessageId={autoPlayMessageId}
             />
+            {/* Conversation hint - shown only in scenario practice mode; flex-shrink-0 keeps it visible below the scrollable history */}
+            <div className="flex-shrink-0">
+              <ConversationHint
+                hint={currentHint}
+                isVisible={scenarioMode === 'practice' && appState === AppState.IDLE}
+              />
+            </div>
           </main>
 
           {/* Sticky Footer - orb-mic + controls */}
diff --git a/components/ConversationHint.tsx b/components/ConversationHint.tsx
new file mode 100644
index 0000000..cf0295c
--- /dev/null
+++ b/components/ConversationHint.tsx
@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+
+interface ConversationHintProps {
+  hint: string | null;
+  isVisible: boolean;
+}
+
+export const ConversationHint: React.FC<ConversationHintProps> = ({ hint, isVisible }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  // Reset dismissed state when a new hint arrives
+  useEffect(() => {
+    if (hint) {
+      setIsDismissed(false);
+      setIsExpanded(false);
+    }
+  }, [hint]);
+
+  if (!hint || !isVisible || isDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="animate-hint-fade-in px-4 py-2">
+      <div className="bg-slate-800/60 backdrop-blur-sm border border-slate-700/50 rounded-xl overflow-hidden">
+        {/* Header row - toggle button and dismiss button as siblings */}
+        <div className="flex items-center">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex-1 flex items-center justify-between px-3 py-2 text-left hover:bg-slate-700/30 transition-colors"
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? 'Hide suggestion' : 'Show suggestion'}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-amber-400/80 text-sm" aria-hidden="true">💡</span>
+              <span className="text-slate-400 text-xs font-medium">
+                {isExpanded ? 'Hide suggestion' : 'Need a hint?'}
+              </span>
+            </div>
+            <svg
+              className={`w-4 h-4 text-slate-500 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDismissed(true);
+            }}
+            className="text-slate-500 hover:text-slate-300 p-2 mr-1 rounded transition-colors"
+            title="Dismiss hint"
+            aria-label="Dismiss hint"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Expanded view - shows the actual hint */}
+        {isExpanded && (
+          <div className="px-3 pb-3 animate-hint-expand">
+            <div className="pt-1 border-t border-slate-700/50">
+              <p className="text-slate-200 text-sm mt-2 leading-relaxed">
+                {hint}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/components/ConversationHistory.tsx b/components/ConversationHistory.tsx
index 24616b5..e57af6e 100644
--- a/components/ConversationHistory.tsx
+++ b/components/ConversationHistory.tsx
@@ -144,7 +144,7 @@ export const ConversationHistory: React.FC<ConversationHistoryProps> = ({
 
   // Messages are now in chronological order (oldest first, newest last)
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex flex-col w-full flex-grow min-h-0">
       {/* Clear button header */}
       <div className="flex items-center justify-between px-4 py-2 flex-shrink-0">
         <div className="flex items-center gap-2">
diff --git a/index.html b/index.html
index cdd0a33..b7325fb 100644
--- a/index.html
+++ b/index.html
@@ -82,6 +82,33 @@
       .chat-scrollbar::-webkit-scrollbar-thumb:hover {
         background: rgba(100, 116, 139, 0.5);
       }
+      /* Hint animations */
+      @keyframes hint-fade-in {
+        from {
+          opacity: 0;
+          transform: translateY(8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes hint-expand {
+        from {
+          opacity: 0;
+          max-height: 0;
+        }
+        to {
+          opacity: 1;
+          max-height: 200px;
+        }
+      }
+      .animate-hint-fade-in {
+        animation: hint-fade-in 0.3s ease-out;
+      }
+      .animate-hint-expand {
+        animation: hint-expand 0.2s ease-out;
+      }
     </style>
   <script type="importmap">
 {
diff --git a/services/geminiService.ts b/services/geminiService.ts
index 21d34ed..9c34db5 100644
--- a/services/geminiService.ts
+++ b/services/geminiService.ts
@@ -2,7 +2,7 @@ import { GoogleGenAI, Chat, Modality, Type } from "@google/genai";
 import { base64ToBytes, pcmToWav } from "./audioUtils";
 import { VoiceResponse, Scenario } from "../types";
 import { getConversationHistory, addToHistory } from "./conversationHistory";
-import { generateScenarioSystemInstruction, generateScenarioSummaryPrompt } from "./scenarioService";
+import { generateScenarioSystemInstruction, generateScenarioSummaryPrompt, parseHintFromResponse } from "./scenarioService";
 import { getApiKeyOrEnv } from "./apiKeyService";
 
 // Gemini TTS output format constants
@@ -327,19 +327,24 @@ export const sendVoiceMessage = async (
       ],
     });
 
-    const modelText = chatResponse.text; // Access text property directly
+    const rawModelText = chatResponse.text; // Access text property directly
 
-    if (!modelText) {
+    if (!rawModelText) {
       throw new Error("No text response received from chat model.");
     }
 
-    // Sync to shared conversation history
+    // Parse hint from response (only present in scenario mode)
+    const { text: modelText, hint } = activeScenario
+      ? parseHintFromResponse(rawModelText)
+      : { text: rawModelText, hint: null };
+
+    // Sync to shared conversation history (use text without hint markers)
     addToHistory("user", userText);
     addToHistory("assistant", modelText);
     // Update sync counter - we've now synced this new message pair
     syncedMessageCount += 2;
 
-    // Step 3: Send Text Response to TTS Model to get Audio
+    // Step 3: Send Text Response to TTS Model to get Audio (use text without hint)
     const systemPrompt = `You are to read out the following text in a friendly, encouraging tone. When speaking French, use a natural French accent. You MUST output ONLY AUDIO, not TEXT. Again, ONLY AUDIO, not TEXT. Here's the text enclosed in <text> tags: <text>${modelText}</text>`;
     const ttsResponse = await ai.models.generateContent({
         model: 'gemini-2.5-flash-preview-tts',
@@ -381,7 +386,8 @@ export const sendVoiceMessage = async (
     return {
       audioUrl,
       userText,
-      modelText
+      modelText,
+      hint: hint || undefined
     };
 
   } catch (error) {
diff --git a/services/openaiService.ts b/services/openaiService.ts
index 35d4e6d..ec7aaf3 100644
--- a/services/openaiService.ts
+++ b/services/openaiService.ts
@@ -1,7 +1,7 @@
 import { base64ToBlob } from "./audioUtils";
 import { VoiceResponse, Scenario } from "../types";
 import { getConversationHistory, addToHistory } from "./conversationHistory";
-import { generateScenarioSystemInstruction, generateScenarioSummaryPrompt } from "./scenarioService";
+import { generateScenarioSystemInstruction, generateScenarioSummaryPrompt, parseHintFromResponse } from "./scenarioService";
 import { getApiKeyOrEnv } from "./apiKeyService";
 
 const SYSTEM_INSTRUCTION = `
@@ -335,13 +335,18 @@ export const sendVoiceMessageOpenAI = async (
       throw new Error(`OpenAI Chat Error: Missing or invalid message content. Status: ${chatRes.status}`);
     }
 
-    const modelText = firstChoice.message.content;
+    const rawModelText = firstChoice.message.content;
 
-    // Add user and assistant messages to shared conversation history
+    // Parse hint from response (only present in scenario mode)
+    const { text: modelText, hint } = activeScenario
+      ? parseHintFromResponse(rawModelText)
+      : { text: rawModelText, hint: null };
+
+    // Add user and assistant messages to shared conversation history (use text without hint markers)
     addToHistory("user", userText);
     addToHistory("assistant", modelText);
 
-    // --- Step 3: TTS (gpt-4o-mini-tts) ---
+    // --- Step 3: TTS (gpt-4o-mini-tts) --- (use text without hint)
     const ttsRes = await fetch("https://api.openai.com/v1/audio/speech", {
       method: "POST",
       headers: {
@@ -368,7 +373,8 @@ export const sendVoiceMessageOpenAI = async (
     return {
       audioUrl,
       userText,
-      modelText
+      modelText,
+      hint: hint || undefined
     };
 
   } catch (error) {
diff --git a/services/scenarioService.ts b/services/scenarioService.ts
index 272b101..52b76bd 100644
--- a/services/scenarioService.ts
+++ b/services/scenarioService.ts
@@ -101,17 +101,46 @@ GUIDELINES:
    - Do not say "Here is the translation" or explain the format
 6. When the scenario reaches its natural end, congratulate the user and offer to practice again or try a variation
 
-HINTS:
+ON-DEMAND HINTS:
 If the user says "hint", "help", "aide", "je ne sais pas", or seems stuck (very short response, hesitation words like "um", "euh", "uh"), provide a helpful suggestion in this format:
 - First say (in character): "Peut-être vous voulez dire..." (Perhaps you want to say...)
 - Then give a hint in French (what they might say next)
 - Then the English translation of the hint
 - Then wait for them to try again
 
+PROACTIVE HINTS (REQUIRED):
+At the END of EVERY response, you MUST include a hint section in EXACTLY this format:
+
+---HINT---
+[Brief description of what the user should say or ask next, in English - focus on the TOPIC or ACTION, not the exact French words]
+---END_HINT---
+
+The hint should:
+- Describe WHAT to say, not HOW to say it (e.g., "Ask about opening hours" NOT "Je voudrais savoir...")
+- Be action-oriented (e.g., "Thank them and say goodbye", "Ask for the price", "Confirm your order")
+- Guide the conversation direction without giving away the French words
+- Be brief - just a few words describing the next logical step
+
 START THE SCENARIO:
 Begin by greeting the user in character and initiating the scenario. For example, if it's a bakery scenario, greet them as the baker would.`;
 };
 
+/**
+ * Parse the hint section from an AI response
+ * Returns the hint text and the response without the hint section
+ */
+export const parseHintFromResponse = (response: string): { text: string; hint: string | null } => {
+  const hintMatch = response.match(/---HINT---\s*([\s\S]*?)\s*---END_HINT---/);
+
+  if (hintMatch) {
+    const hint = hintMatch[1].trim();
+    const text = response.replace(/---HINT---[\s\S]*?---END_HINT---/, '').trim();
+    return { text, hint };
+  }
+
+  return { text: response, hint: null };
+};
+
 /**
  * Generate a prompt to have the AI summarize and confirm understanding of a scenario
  */
diff --git a/types.ts b/types.ts
index c0e91a7..dd58a19 100644
--- a/types.ts
+++ b/types.ts
@@ -14,12 +14,14 @@ export interface Message {
   text: string;
   timestamp: number;
   audioUrl?: string; // Blob URL for the audio
+  hint?: string; // Optional hint for what the user could say next (in roleplay mode)
 }
 
 export interface VoiceResponse {
   audioUrl: string; // Blob URL for the audio
   userText: string;
   modelText: string;
+  hint?: string; // Optional hint for what the user could say next (in roleplay mode)
 }
 
 export type ScenarioMode = 'none' | 'setup' | 'practice';