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
@@ -58,6 +58,7 @@
 import { splashBackgroundURI } from './background-info';
 import LogInPanel from './log-in-panel.react';
 import type { LogInState } from './log-in-panel.react';
+import LoggedOutStaffInfo from './logged-out-staff-info.react';
 import RegisterPanel from './register-panel.react';
 import type { RegisterState } from './register-panel.react';
 import SIWEPanel from './siwe-panel.react';
@@ -468,13 +469,9 @@
         </TouchableOpacity>
       );
     }
-    let staffUserHasBeenLoggedInIndicator = null;
-    if (this.props.staffCanSee && this.props.staffUserHasBeenLoggedIn) {
-      staffUserHasBeenLoggedInIndicator = (
-        <TouchableOpacity style={styles.button} activeOpacity={0.6}>
-          <Text style={styles.buttonText}>STAFF HAS BEEN LOGGED IN</Text>
-        </TouchableOpacity>
-      );
+    let loggedOutStaffInfoCard = null;
+    if (this.props.staffCanSee || this.props.staffUserHasBeenLoggedIn) {
+      loggedOutStaffInfoCard = <LoggedOutStaffInfo />;
     }
 
     if (this.state.mode === 'siwe') {
@@ -504,7 +501,7 @@
       const opacityStyle = { opacity: this.buttonOpacity };
       buttons = (
         <Animated.View style={[styles.buttonContainer, opacityStyle]}>
-          {staffUserHasBeenLoggedInIndicator}
+          {loggedOutStaffInfoCard}
           {siweButton}
           <TouchableOpacity
             onPress={this.onPressLogIn}
diff --git a/native/account/logged-out-staff-info.react.js b/native/account/logged-out-staff-info.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/logged-out-staff-info.react.js
@@ -0,0 +1,116 @@
+// @flow
+
+import * as React from 'react';
+import { useContext } from 'react';
+import { Text, View } from 'react-native';
+
+import SWMansionIcon from '../components/swmansion-icon.react';
+import { StaffContext } from '../staff/staff-context';
+import { useStyles, useColors } from '../themes/colors';
+import { isStaffRelease } from '../utils/staff-utils';
+
+function LoggedOutStaffInfo(): React.Node {
+  const { staffUserHasBeenLoggedIn } = useContext(StaffContext);
+  const styles = useStyles(unboundStyles);
+  const colors = useColors();
+
+  const checkIcon = React.useMemo(
+    () => (
+      <SWMansionIcon
+        name="check-circle"
+        size={20}
+        color={colors.vibrantGreenButton}
+      />
+    ),
+    [colors.vibrantGreenButton],
+  );
+  const crossIcon = React.useMemo(
+    () => (
+      <SWMansionIcon
+        name="cross-circle"
+        size={20}
+        color={colors.vibrantRedButton}
+      />
+    ),
+    [colors.vibrantRedButton],
+  );
+
+  const isDevBuildStyle = React.useMemo(() => {
+    return [
+      styles.infoText,
+      __DEV__ ? styles.infoTextTrue : styles.infoTextFalse,
+    ];
+  }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]);
+
+  const isStaffReleaseStyle = React.useMemo(() => {
+    return [
+      styles.infoText,
+      isStaffRelease ? styles.infoTextTrue : styles.infoTextFalse,
+    ];
+  }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]);
+
+  const hasStaffUserLoggedInStyle = React.useMemo(() => {
+    return [
+      styles.infoText,
+      staffUserHasBeenLoggedIn ? styles.infoTextTrue : styles.infoTextFalse,
+    ];
+  }, [
+    staffUserHasBeenLoggedIn,
+    styles.infoText,
+    styles.infoTextFalse,
+    styles.infoTextTrue,
+  ]);
+
+  return (
+    <View>
+      <View style={styles.infoBadge}>
+        <View style={styles.cell}>
+          {__DEV__ ? checkIcon : crossIcon}
+          <Text style={isDevBuildStyle}>__DEV__</Text>
+        </View>
+        <View style={styles.cell}>
+          {isStaffRelease ? checkIcon : crossIcon}
+          <Text style={isStaffReleaseStyle}>isStaffRelease</Text>
+        </View>
+        <View style={styles.cell}>
+          {staffUserHasBeenLoggedIn ? checkIcon : crossIcon}
+          <Text style={hasStaffUserLoggedInStyle}>
+            staffUserHasBeenLoggedIn
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const unboundStyles = {
+  cell: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  infoBadge: {
+    backgroundColor: 'codeBackground',
+    borderRadius: 6,
+    justifyContent: 'flex-start',
+    marginBottom: 10,
+    marginLeft: 40,
+    marginRight: 40,
+    marginTop: 10,
+    padding: 8,
+  },
+  infoText: {
+    fontFamily: 'OpenSans-Semibold',
+    fontSize: 14,
+    lineHeight: 24,
+    paddingLeft: 4,
+    textAlign: 'left',
+  },
+  infoTextFalse: {
+    color: 'vibrantRedButton',
+  },
+  infoTextTrue: {
+    color: 'vibrantGreenButton',
+  },
+};
+
+export default LoggedOutStaffInfo;