diff --git a/ui/scss/component/_footer.scss b/ui/scss/component/_footer.scss
index 57b2b3a5c..2037b9ae7 100644
--- a/ui/scss/component/_footer.scss
+++ b/ui/scss/component/_footer.scss
@@ -47,6 +47,10 @@
 .footer__section {
   margin-left: var(--spacing-xl);
 
+  &:not(:last-child) {
+    padding-right: var(--spacing-xl);
+  }
+
   @media (max-width: $breakpoint-small) {
     margin-left: var(--spacing-l);
   }
diff --git a/web/component/footer.jsx b/web/component/footer.jsx
index 37ce1e645..9c23300c4 100644
--- a/web/component/footer.jsx
+++ b/web/component/footer.jsx
@@ -80,23 +80,22 @@ const sections = [
 export default function Footer() {
   return (
     <footer className="footer">
-      {sections.map(({ name, links }) => {
-        return (
-          <div key={name} className="footer__section">
-            <div className="footer__section-title">{__(name)}</div>
-            <ul className="ul--no-style">
-              {/* $FlowFixMe */}
+      <ul className="navigation__tertiary footer__links bright ul--no-style">
+        {sections.map(({ name, links }) => {
+          return (
+            <li key={name} className="footer__section">
+              <div className="footer__section-title">{__(name)}</div>
               {links.map(({ label, link, navigate }) => {
                 return (
                   <li key={label}>
-                    <Button className="footer__link" href={link} navigate={navigate} label={__(label)} />
+                    <Button className="footer__link" label={__(label)} href={link} navigate={navigate} />
                   </li>
                 );
               })}
-            </ul>
-          </div>
-        );
-      })}
+            </li>
+          );
+        })}
+      </ul>
     </footer>
   );
 }