diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css
index 6d5dc9faa..62f5fecfc 100644
--- a/source/components/rule/Rule.css
+++ b/source/components/rule/Rule.css
@@ -36,13 +36,4 @@ h2 small {
 
 #toggleRuleSource {
 	margin-top: 1em;
-	width: 100%;
-}
-#rule #toggleRuleSource {
-	text-align: right;
-	padding-right: 5em;
-}
-#toggleRuleSource img {
-	width: 1.5em !important;
-	height: 1.5em !important;
 }
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 00d12cb83..f0898e8f0 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -13,7 +13,7 @@ import {
 import { compose, isEmpty, isNil } from 'ramda'
 import React, { Component, Suspense } from 'react'
 import emoji from 'react-easy-emoji'
-import {Helmet} from 'react-helmet'
+import { Helmet } from 'react-helmet'
 import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
@@ -102,7 +102,6 @@ export default compose(
 									}}
 								/>
 
-								{this.renderToggleSourceButton()}
 								<section id="rule-content">
 									{!isNil(displayedRule.nodeValue) && (
 										<div id="ruleValue">
@@ -165,6 +164,7 @@ export default compose(
 									)}
 									{this.renderReferences(flatRule)}
 								</section>
+								{this.renderToggleSourceButton()}
 							</Animate.fromBottom>
 						</div>
 					)}
@@ -177,8 +177,13 @@ export default compose(
 			return (
 				<button
 					id="toggleRuleSource"
+					className="ui__ link-button"
 					onClick={() => this.setState({ viewSource: !viewSource })}>
-					{emoji(viewSource ? '📖' : '✍️')}
+					{emoji(
+						viewSource
+							? '📖 Revenir à la documentation'
+							: '✍️ Voir le code source'
+					)}
 				</button>
 			)
 		}