diff --git a/src/components/layouts/Footer.jsx b/src/components/layouts/Footer.jsx
index 70ee6b9..2305599 100644
--- a/src/components/layouts/Footer.jsx
+++ b/src/components/layouts/Footer.jsx
@@ -1,60 +1,73 @@
 /* eslint react/prop-types: 0 */
-import React, { Component } from "react";
+import React from "react";
 import { withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import Paypal from "../banner/Paypal";
+import {useBbox} from "./useBbox";
+import "./footer.css";
 
-class Footer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const Footer = props => {
+  const linkStyle = { whiteSpace: "nowrap" };
+  const { t } = props;
 
-  render() {
-    const linkStyle = { whiteSpace: "nowrap" };
-    const { t } = this.props;
-    return (
-      <footer className="text-center">
-        <div>
-        <Link to="/" style={linkStyle}>
-          {t("Homepage")}
-        </Link>
-        <span className="m-2">-</span>
-        <a
-          href="https://github.com/MieuxVoter"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={linkStyle}
-        >
-          {t("Source code")}
-        </a>
-        <span className="m-2">-</span>
-        <a
-          href="https://mieuxvoter.fr/"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={linkStyle}
-        >
-          {t("Who are we?")}
-        </a>
-        </div>
-          <span className="m-2">-</span>
-          <Link to="/legal-notices" style={linkStyle}>
-              {t('Legal notices')}
-          </Link>
-          <span className="m-2">-</span>
-          <Link to="/privacy-policy" style={linkStyle}>
-              {t('Privacy policy')}
-          </Link>
-          <span className="m-2">-</span>
-          <Link to="/faq" style={linkStyle}>
-              {t('faq')}
-          </Link>
-        <div className="mt-3">
-          <Paypal btnColor="btn-primary" />
-        </div>
-      </footer>
-    );
-  }
-}
+  const [bboxLink1, link1] = useBbox();
+  const [bboxLink2, link2] = useBbox();
+  const [bboxLink3, link3] = useBbox();
+  const [bboxLink4, link4] = useBbox();
+  const [bboxLink5, link5] = useBbox();
+  const [bboxLink6, link6] = useBbox();
+
+  return (
+    <footer className="text-center">
+      <div>
+        <ul className="tacky">
+          <li ref={link1} className={(bboxLink1.top===bboxLink2.top)?"":"no-tack"}>
+            <Link to="/" style={linkStyle} >
+              {t("Homepage")}
+            </Link>
+          </li>
+          <li ref={link2} className={(bboxLink2.top===bboxLink3.top)?"":"no-tack"}>
+            {" "}
+            <a
+              href="https://github.com/MieuxVoter"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              {t("Source code")}
+            </a>
+          </li>
+          <li ref={link3} className={(bboxLink3.top===bboxLink4.top)?"":"no-tack"}>
+            <a
+              href="https://mieuxvoter.fr/"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={linkStyle}
+            >
+              {t("Who are we?")}
+            </a>
+          </li>
+            <li ref={link4} className={(bboxLink4.top===bboxLink5.top)?"":"no-tack"}>
+                <Link to="/privacy-policy" style={linkStyle}>
+                    {t("Privacy policy")}
+                </Link>
+            </li>
+            <li ref={link5} className={(bboxLink5.top===bboxLink6.top)?"":"no-tack"}>
+                <Link to="/legal-notices" style={linkStyle}>
+                    {t("Legal notices")}
+                </Link>
+            </li>
+            <li ref={link6}>
+                <Link to="/faq" style={linkStyle}>
+                    {t("FAQ")}
+                </Link>
+            </li>
+        </ul>
+      </div>
+      <div className="mt-3">
+        <Paypal btnColor="btn-primary" />
+      </div>
+    </footer>
+  );
+};
 export default withTranslation()(Footer);
diff --git a/src/components/layouts/footer.css b/src/components/layouts/footer.css
new file mode 100644
index 0000000..45a16dd
--- /dev/null
+++ b/src/components/layouts/footer.css
@@ -0,0 +1,25 @@
+.tacky {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.tacky li {
+  display: inline-block;
+}
+
+.tacky li:after {
+  content: "-";
+  margin: 0 5px;
+}
+
+.tacky li:last-of-type:after {
+  content: "";
+  margin: 0;
+}
+
+.tacky li.no-tack:after {
+  content: "";
+  margin: 0;
+  display: none;
+}
diff --git a/src/components/layouts/useBbox.jsx b/src/components/layouts/useBbox.jsx
new file mode 100644
index 0000000..42e11f8
--- /dev/null
+++ b/src/components/layouts/useBbox.jsx
@@ -0,0 +1,20 @@
+/* eslint react/prop-types: 0 */
+import { useState } from 'react';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+
+export const useBbox = () => {
+    const ref = useRef();
+    const [bbox, setBbox] = useState({});
+
+    const set = () =>
+        setBbox(ref && ref.current ? ref.current.getBoundingClientRect() : {});
+
+    useEffect(() => {
+        set();
+        window.addEventListener('resize', set);
+        return () => window.removeEventListener('resize', set);
+    }, []);
+
+    return [bbox, ref];
+};
\ No newline at end of file