diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -6,6 +6,7 @@
 
 import { isDev } from 'lib/utils/dev-utils';
 
+import OrBreak from '../components/or-break.react.js';
 import css from './log-in-form.css';
 import SIWEButton from './siwe-button.react.js';
 import SIWELoginForm from './siwe-login-form.react.js';
@@ -44,7 +45,7 @@
     return (
       <div className={css.modal_body}>
         <TraditionalLoginForm />
-        <hr />
+        <OrBreak />
         {siweButton}
       </div>
     );
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
@@ -28,6 +28,7 @@
 } from 'lib/utils/siwe-utils.js';
 
 import Button from '../components/button.react';
+import OrBreak from '../components/or-break.react.js';
 import LoadingIndicator from '../loading-indicator.react';
 import { setPrimaryIdentityPublicKey } from '../redux/primary-identity-public-key-reducer';
 import { useSelector } from '../redux/redux-utils';
@@ -148,7 +149,7 @@
       <Button variant="filled" onClick={onSignInButtonClick}>
         Sign in using this wallet
       </Button>
-      <hr />
+      <OrBreak />
       <Button variant="filled" onClick={cancelSIWEAuthFlow}>
         Go back
       </Button>
diff --git a/web/account/siwe.css b/web/account/siwe.css
--- a/web/account/siwe.css
+++ b/web/account/siwe.css
@@ -5,24 +5,6 @@
   margin: 0 4px;
 }
 
-hr {
-  margin: 20px 0;
-  height: 0;
-  overflow: visible;
-  text-align: center;
-  border: none;
-  border-top: #ffffff33 solid 1px;
-}
-
-hr:after {
-  position: relative;
-  top: -12px;
-  padding: 0 8px;
-  color: white;
-  content: 'or';
-  background-color: #191723;
-}
-
 div.siweLoginFormContainer p {
   color: white;
   font-family: sans-serif;
diff --git a/web/components/or-break.css b/web/components/or-break.css
new file mode 100644
--- /dev/null
+++ b/web/components/or-break.css
@@ -0,0 +1,17 @@
+div.orBreak hr {
+  margin: 20px 0;
+  height: 0;
+  overflow: visible;
+  text-align: center;
+  border: none;
+  border-top: #ffffff33 solid 1px;
+}
+
+div.orBreak hr:after {
+  position: relative;
+  top: -12px;
+  padding: 0 8px;
+  color: #8c889b;
+  content: 'or';
+  background-color: #191723;
+}
diff --git a/web/components/or-break.react.js b/web/components/or-break.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/or-break.react.js
@@ -0,0 +1,15 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './or-break.css';
+
+function OrBreak(): React.Node {
+  return (
+    <div className={css.orBreak}>
+      <hr />
+    </div>
+  );
+}
+
+export default OrBreak;