diff --git a/source/components/Controls.css b/source/components/Controls.css
index 554a23c36..b1fd17506 100644
--- a/source/components/Controls.css
+++ b/source/components/Controls.css
@@ -16,7 +16,7 @@
 	font-size: 90%;
 }
 
-p#controlExplanation {
+#controlExplanation {
 	margin: 0.3em 0 0.6em;
 	display: flex;
 	justify-content: center;
diff --git a/source/components/Controls.js b/source/components/Controls.js
index c9a42acd1..b2c5a0016 100644
--- a/source/components/Controls.js
+++ b/source/components/Controls.js
@@ -7,54 +7,52 @@ import { animated, Spring } from 'react-spring'
 import { makeJsx } from 'Engine/evaluation'
 
 function Controls({ blockingInputControls, controls, startConversation }) {
+	let control = !blockingInputControls && controls?.[0]
 	return (
 		<div id="controlsBlock">
 			{blockingInputControls && (
 				<p className="blockingControl">{blockingInputControls[0].message}</p>
 			)}
-			{!blockingInputControls && (
-				<Spring
-					to={{
-						height: controls?.length ? 'auto' : 0,
-						opacity: controls?.length ? 1 : 0
-					}}
-					native>
-					{styles =>
-						controls?.length ? (
-							<animated.div id="control" style={styles}>
-								<div id="controlContent">
-									{do {
-										let { level, solution, evaluated } = controls[0]
-										;<>
-											<h3
-												style={{
-													borderBottomColor:
-														level === 'avertissement' ? '#e67e22' : '#34495e'
-												}}>
-												{level === 'avertissement'
-													? 'Attention'
-													: 'Information'}
-											</h3>
-											<p id="controlExplanation">{makeJsx(evaluated)}</p>
-											{solution && (
-												<div id="solution">
-													{emoji('💡')}
-													<button
-														key={solution.cible}
-														className="ui__ link-button"
-														onClick={() => startConversation(solution.cible)}>
-														{solution.texte}
-													</button>
-												</div>
-											)}
-										</>
-									}}
-								</div>
-							</animated.div>
-						) : null
-					}
-				</Spring>
-			)}
+			<Spring
+				to={{
+					height: control ? 'auto' : 0,
+					opacity: control ? 1 : 0
+				}}
+				delay={2000}
+				native>
+				{styles =>
+					!control ? null : (
+						<animated.div id="control" style={styles}>
+							<div id="controlContent">
+								{do {
+									let { level, solution, evaluated } = control
+									;<>
+										<h3
+											style={{
+												borderBottomColor:
+													level === 'avertissement' ? '#e67e22' : '#34495e'
+											}}>
+											{level === 'avertissement' ? 'Attention' : 'Information'}
+										</h3>
+										<div id="controlExplanation">{makeJsx(evaluated)}</div>
+										{solution && (
+											<div id="solution">
+												{emoji('💡')}
+												<button
+													key={solution.cible}
+													className="ui__ link-button"
+													onClick={() => startConversation(solution.cible)}>
+													{solution.texte}
+												</button>
+											</div>
+										)}
+									</>
+								}}
+							</div>
+						</animated.div>
+					)
+				}
+			</Spring>
 		</div>
 	)
 }