diff --git a/source/components/PeriodSwitch.css b/source/components/PeriodSwitch.css
index 21a9b95c4..3368847ba 100644
--- a/source/components/PeriodSwitch.css
+++ b/source/components/PeriodSwitch.css
@@ -1,38 +1,71 @@
 #PeriodSwitch {
-	margin: 1em;
 	display: flex;
 	align-items: center;
-	justify-content: center;
-}
-#PeriodSwitch .base {
-	background: var(--colour);
-	border-radius: 0.3em;
-	padding: 0.4em;
+	justify-content: flex-end;
 }
 
-#PeriodSwitch label {
+.ui__.toggle {
+	border: 1px solid var(--colour);
+	border-radius: 0.3rem;
+	display: flex;
+}
+.ui__.toggle label {
+	padding: 0.6rem 1.2rem;
 	color: var(--colour);
+	text-transform: uppercase;
+	cursor: pointer;
+}
+.ui__.toggle.small label {
+	font-size: 80%;
+	overflow: hidden;
+	padding: 0.4rem 0.8rem;
+}
+.ui__.toggle label:not(:last-child) {
+	border-right: 1px solid var(--colour);
 }
 
-#PeriodSwitch input[type='radio'] {
+.ui__.toggle input[type='radio'] {
 	position: fixed;
 	left: -100%;
 }
 
-#PeriodSwitch .radioText {
+.ui__.toggle input[type='radio'] ~ *::before {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	content: '';
+	margin: 0 0.3em;
+	vertical-align: middle;
+	border-radius: 20px;
 	cursor: pointer;
-	border-radius: 0.3em;
-	padding: 0 0.6em;
+	box-shadow: 0 0 0px 1.5px rgb(41, 117, 209);
+	transition: all 0.1s;
+	border: 0.5em solid white;
+}
+.ui__.toggle input[type='radio'] ~ * {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	transition: all 0.2s;
+}
+.ui__.toggle input[type='radio']:checked ~ *::before {
+	border: 4px solid white;
+	background: var(--colour);
+}
+.ui__.toggle input[type='radio']:focus ~ .radioText {
+	border: 1px dotted gray;
+}
+.ui__.toggle input[type='radio']:checked ~ .radioText {
+	font-weight: 500;
+}
+
+.ui__.toggle input[type='radio']:checked ~ * {
+	background: var(--colour);
+	box-shadow: 0 0 0 3rem var(--colour);
 	color: white;
 }
 
-#PeriodSwitch .radioText:hover {
-	text-decoration: underline;
-}
-
-#PeriodSwitch input[type='radio']:checked + .radioText {
-	background: white;
-	border: 4px solid white;
-	color: var(--colour);
-	text-decoration: none;
+.ui__.toggle label:hover input[type='radio']:not(:checked) ~ * {
+	background: var(--lighterColour);
+	box-shadow: 0 0 0 1rem var(--lighterColour);
 }
diff --git a/source/components/PeriodSwitch.js b/source/components/PeriodSwitch.js
index 075542cf5..11101aa72 100644
--- a/source/components/PeriodSwitch.js
+++ b/source/components/PeriodSwitch.js
@@ -1,7 +1,6 @@
 import { findRuleByDottedName, nestedSituationToPathMap } from 'Engine/rules'
 import { compose, filter, map, toPairs } from 'ramda'
 import React, { useEffect } from 'react'
-import emoji from 'react-easy-emoji'
 import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { batchActions } from 'redux-batched-actions'
@@ -54,7 +53,7 @@ export default compose(
 	})
 	return (
 		<div id="PeriodSwitch">
-			<span className="base ui__ card">
+			<div className="base ui__ small toggle">
 				<label>
 					<Field
 						name="période"
@@ -65,7 +64,7 @@ export default compose(
 							updateSituation('mois', batchPeriodChange, situation, rules)
 						}
 					/>
-					<span className="radioText">
+					<span>
 						<Trans>mois</Trans>
 					</span>
 				</label>
@@ -79,11 +78,11 @@ export default compose(
 							updateSituation('année', batchPeriodChange, situation, rules)
 						}
 					/>
-					<span className="radioText">
+					<span>
 						<Trans>année</Trans>
 					</span>
 				</label>
-			</span>
+			</div>
 		</div>
 	)
 })
diff --git a/source/components/Simulation.js b/source/components/Simulation.js
index e0f0d2243..500a8dfe8 100644
--- a/source/components/Simulation.js
+++ b/source/components/Simulation.js
@@ -5,7 +5,6 @@ import { React, T } from 'Components'
 import Answers from 'Components/AnswerList'
 import Conversation from 'Components/conversation/Conversation'
 import PageFeedback from 'Components/Feedback/PageFeedback'
-import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
 import { compose } from 'ramda'
 import emoji from 'react-easy-emoji'
@@ -101,10 +100,11 @@ export default compose(
 							)}
 						</>
 					)}
+
 					{showTargets && (
 						<Animate.fromBottom>{this.props.targets}</Animate.fromBottom>
 					)}
-
+					{!noUserInput && this.props.explanation}
 					{!noUserInput && !noFeedback && (
 						<Animate.appear delay={2000}>
 							<PageFeedback
@@ -117,8 +117,6 @@ export default compose(
 							/>
 						</Animate.appear>
 					)}
-					<PeriodSwitch />
-					{!noUserInput && this.props.explanation}
 				</>
 			)
 		}
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index e77fc3eb2..c8c87dfb8 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import Controls from 'Components/Controls'
 import InputSuggestions from 'Components/conversation/InputSuggestions'
+import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
 import withSitePaths from 'Components/utils/withSitePaths'
@@ -84,7 +85,9 @@ export default compose(
 			return (
 				<div id="targetSelection">
 					<QuickLinks />
+
 					{!noUserInput && <Controls controls={analysis.controls} />}
+					<PeriodSwitch />
 					<div style={{ height: '10px' }}>
 						<Progress percent={progress} />
 					</div>