diff --git a/source/components/rule/References.css b/source/components/rule/References.css
index 972f9843c..c7d117e47 100644
--- a/source/components/rule/References.css
+++ b/source/components/rule/References.css
@@ -1,44 +1,56 @@
 .references {
-        font-size: 85%;
-        list-style: none;
-        padding-left: 1em;
-        color: #333350;
+  font-size: 100%;
+  list-style: none;
+  padding-left: 1em;
+  color: #333350;
 }
 .references a {
-        color: inherit;
-        /*text-decoration: none;*/
+  color: inherit;
+  width: 40%;
+  text-decoration: underline;
 }
 
 .references li {
-        margin-bottom: .15em;
+  margin-bottom: 0.6em;
+  width: 100%;
+  display: flex;
+  align-items: center;
 }
 #noOfficialReferences {
   text-align: left;
   font-style: italic;
 }
-.references .meta {
-        text-align: right;
-        width: 16em;
-        margin-right: 1.5em;
-        display: inline-block;
-        font-size: 75%;
-}
 .references .url {
-        font-weight: 600;
-        color: white;
-        background: #333350;
-        border-radius: .4em;
-        font-style: italic;
-        padding: .05em .6em;
+  font-weight: 600;
+  color: white;
+  background: #333350;
+  border-radius: 0.4em;
+  font-style: italic;
+  padding: 0.05em 0.6em;
+  font-size: 95%;
+}
+.references .imageWrapper {
+  width: 8em;
+  display: inline-block;
 }
 .references img {
-        vertical-align: sub;
-        height: 1.2em;
-        border-radius: .3em;
-        margin-left: .6em;
+  vertical-align: sub;
+  max-height: 3em;
+  max-width: 5em;
+  border-radius: 0.3em;
+  margin: 0 auto;
+  display: block;
 }
 
+li#complementary {
+  margin-top: 1.2em;
+}
 li#complementary a {
   font-style: italic;
-  border-bottom: 1px solid #ddd;
+  text-decoration: none;
+  width: auto;
+}
+
+#complementary i {
+  margin-right: .6em;
 }
diff --git a/source/components/rule/References.js b/source/components/rule/References.js
index c8242d6a7..a78ecf014 100644
--- a/source/components/rule/References.js
+++ b/source/components/rule/References.js
@@ -2,73 +2,73 @@ import React from "react"
 import R from "ramda"
 import "./References.css"
 import references from "Règles/ressources/références/références.yaml"
-import {capitalise0} from '../../utils'
+import { capitalise0 } from "../../utils"
 
 export default class References extends React.Component {
-	state = {
-		showComplementary: false
-	}
-	render() {
-		let { refs } = this.props,
-			{ complementary, official=[] } = R.groupBy(
-				([name, link]) => (this.findRefKey(link) ? "official" : "complementary")
-			)(R.toPairs(refs)),
-			showComplementary = this.state.showComplementary,
-			showComplementaryButton = !this.state.showComplementary && complementary
+  state = {
+    showComplementary: false
+  }
+  render() {
+    let { refs } = this.props,
+      { complementary, official = [] } = R.groupBy(
+        ([name, link]) => (this.findRefKey(link) ? "official" : "complementary")
+      )(R.toPairs(refs)),
+      showComplementary = this.state.showComplementary,
+      showComplementaryButton = !this.state.showComplementary && complementary
 
-		return (
-			<ul className="references">
-				{[
-					...official.map(this.renderRef),
-					official.length == 0 ? <li id="noOfficialReferences">Pas de sources officielles</li> : null,
-					...(showComplementaryButton
-						? [
-							<li id="complementary" key="compl">
-								<span className="meta" />
-								<a
-									href="#/"
-									onClick={() => this.setState({ showComplementary: true })}
-								>
-										sources complémentaires
-								</a>
-							</li>
-						]
-						: []),
-					...(showComplementary ? complementary.map(this.renderRef) : [])
-				]}
-			</ul>
-		)
-	}
-	renderRef = ([name, link]) => {
-		let refKey = this.findRefKey(link),
-			refData = (refKey && references[refKey]) || {},
-			domain = this.cleanDomain(link)
+    return (
+      <ul className="references">
+        {[
+          ...official.map(this.renderRef),
+          official.length == 0 ? (
+            <li id="noOfficialReferences">Pas de sources officielles</li>
+          ) : null,
+          ...(showComplementaryButton
+            ? [
+                <li id="complementary" key="compl">
+                  <a
+                    href="#/"
+                    onClick={() => this.setState({ showComplementary: true })}
+                  >
+                    <i className="fa fa-eye" aria-hidden="true" />
+                    afficher les sources complémentaires
+                  </a>
+                </li>
+              ]
+            : []),
+          ...(showComplementary ? complementary.map(this.renderRef) : [])
+        ]}
+      </ul>
+    )
+  }
+  renderRef = ([name, link]) => {
+    let refKey = this.findRefKey(link),
+      refData = (refKey && references[refKey]) || {},
+      domain = this.cleanDomain(link)
 
-		return (
-			<li key={name}>
-				<span className="meta">
-					<span className="url">
-						{domain}
-						{refData.image && (
-							<img
-								src={require("Règles/ressources/références/" + refData.image)}
-							/>
-						)}
-					</span>
-				</span>
-				<a href={link} target="_blank">
-					{capitalise0(name)}
-				</a>
-			</li>
-		)
-	}
-	findRefKey(link) {
-		return Object.keys(references).find(r => link.indexOf(r) > -1)
-	}
-	cleanDomain(link) {
-		return (link.indexOf("://") > -1
-			? link.split("/")[2]
-			: link.split("/")[0]
-		).replace("www.", "")
-	}
+    return (
+      <li key={name}>
+        <span className="imageWrapper">
+          {refData.image && (
+            <img
+              src={require("Règles/ressources/références/" + refData.image)}
+            />
+          )}
+        </span>
+        <a href={link} target="_blank">
+          {capitalise0(name)}
+        </a>
+        <span className="url">{domain}</span>
+      </li>
+    )
+  }
+  findRefKey(link) {
+    return Object.keys(references).find(r => link.indexOf(r) > -1)
+  }
+  cleanDomain(link) {
+    return (link.indexOf("://") > -1
+      ? link.split("/")[2]
+      : link.split("/")[0]
+    ).replace("www.", "")
+  }
 }