diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -5,7 +5,6 @@
 import * as React from 'react';
 import {
   View,
-  StyleSheet,
   Text,
   TouchableOpacity,
   Image,
@@ -41,6 +40,7 @@
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors';
 import { splashStyleSelector } from '../splash';
+import { useStyles } from '../themes/colors';
 import type { EventSubscription, KeyboardEvent } from '../types/react-native';
 import type { ImageStyle } from '../types/styles';
 import {
@@ -113,6 +113,7 @@
   +loggedIn: boolean,
   +dimensions: DerivedDimensionsInfo,
   +splashStyle: ImageStyle,
+  +styles: typeof unboundStyles,
   // Redux dispatch functions
   +dispatch: Dispatch,
   ...
@@ -450,18 +451,27 @@
   };
 
   render() {
+    const { styles } = this.props;
+
     let panel = null;
     let buttons = null;
     let siweButton = null;
     if (__DEV__) {
       siweButton = (
-        <TouchableOpacity
-          onPress={this.onPressSIWE}
-          style={styles.button}
-          activeOpacity={0.6}
-        >
-          <Text style={styles.buttonText}>SIWE</Text>
-        </TouchableOpacity>
+        <>
+          <TouchableOpacity
+            onPress={this.onPressSIWE}
+            style={styles.button}
+            activeOpacity={0.6}
+          >
+            <Text style={styles.buttonText}>SIWE</Text>
+          </TouchableOpacity>
+          <View style={styles.siweOr}>
+            <View style={styles.siweOrLeftHR} />
+            <Text style={styles.siweOrText}>or</Text>
+            <View style={styles.siweOrRightHR} />
+          </View>
+        </>
       );
     }
 
@@ -580,7 +590,7 @@
   };
 }
 
-const styles = StyleSheet.create({
+const unboundStyles = {
   animationContainer: {
     flex: 1,
   },
@@ -635,7 +645,32 @@
     right: 0,
     top: 0,
   },
-});
+  siweOr: {
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: 18,
+    marginTop: 14,
+  },
+  siweOrLeftHR: {
+    borderColor: 'logInSpacer',
+    borderTopWidth: 1,
+    flex: 1,
+    marginRight: 18,
+    marginTop: 10,
+  },
+  siweOrRightHR: {
+    borderColor: 'logInSpacer',
+    borderTopWidth: 1,
+    flex: 1,
+    marginLeft: 18,
+    marginTop: 10,
+  },
+  siweOrText: {
+    color: 'logInText',
+    fontSize: 17,
+    textAlign: 'center',
+  },
+};
 
 const isForegroundSelector = createIsForegroundSelector(
   LoggedOutModalRouteName,
@@ -656,6 +691,7 @@
   const loggedIn = useSelector(isLoggedIn);
   const dimensions = useSelector(derivedDimensionsInfoSelector);
   const splashStyle = useSelector(splashStyleSelector);
+  const styles = useStyles(unboundStyles);
 
   const dispatch = useDispatch();
   return (
@@ -669,6 +705,7 @@
       loggedIn={loggedIn}
       dimensions={dimensions}
       splashStyle={splashStyle}
+      styles={styles}
       dispatch={dispatch}
     />
   );
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -83,6 +83,8 @@
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
   tooltipBackground: '#E0E0E0',
+  logInSpacer: '#FFFFFF33',
+  logInText: 'white',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -159,6 +161,8 @@
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
   tooltipBackground: '#1F1F1F',
+  logInSpacer: '#FFFFFF33',
+  logInText: 'white',
 });
 const colors = { light, dark };