diff --git a/web/account/header-separator.css b/web/account/header-separator.css
new file mode 100644
--- /dev/null
+++ b/web/account/header-separator.css
@@ -0,0 +1,5 @@
+div.headerSeparator hr {
+  margin: 8px 0;
+  border: none;
+  border-top: #282537 solid 1px;
+}
diff --git a/web/account/header-separator.react.js b/web/account/header-separator.react.js
new file mode 100644
--- /dev/null
+++ b/web/account/header-separator.react.js
@@ -0,0 +1,15 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './header-separator.css';
+
+function HeaderSeparator(): React.Node {
+  return (
+    <div className={css.headerSeparator}>
+      <hr />
+    </div>
+  );
+}
+
+export default HeaderSeparator;
diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js
--- a/web/account/siwe-login-form.react.js
+++ b/web/account/siwe-login-form.react.js
@@ -34,6 +34,7 @@
 import { useSelector } from '../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import SWMansionIcon from '../SWMansionIcon.react.js';
+import HeaderSeparator from './header-separator.react.js';
 import css from './siwe.css';
 
 type SIWELoginFormProps = {
@@ -143,9 +144,7 @@
   return (
     <div className={css.siweLoginFormContainer}>
       <h4>Sign in with Ethereum</h4>
-      <div className={css.headerSeparator}>
-        <hr />
-      </div>
+      <HeaderSeparator />
       <div className={css.connectButtonContainer}>
         <ConnectButton />
       </div>
diff --git a/web/account/siwe.css b/web/account/siwe.css
--- a/web/account/siwe.css
+++ b/web/account/siwe.css
@@ -17,12 +17,6 @@
   font-family: sans-serif;
 }
 
-div.headerSeparator hr {
-  margin: 8px 0;
-  border: none;
-  border-top: #282537 solid 1px;
-}
-
 div.siweLoginFormContainer {
   display: flex;
   flex-direction: column;