diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1069,22 +1069,23 @@
 
   if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
     let buttonContent;
+    const useDarkColor = !colorIsDark(threadInfo.color);
     if (joinThreadLoadingStatus === 'loading') {
       buttonContent = (
         <ActivityIndicator
           size="small"
-          color="white"
+          color={useDarkColor ? 'black' : 'white'}
           style={styles.joinThreadLoadingIndicator}
         />
       );
     } else {
-      const textStyle = colorIsDark(threadInfo.color)
-        ? styles.joinButtonTextLight
-        : styles.joinButtonTextDark;
+      const textStyle = useDarkColor
+        ? styles.joinButtonTextDark
+        : styles.joinButtonTextLight;
       buttonContent = (
         <View style={styles.joinButtonContent}>
           <SWMansionIcon name="plus" style={textStyle} />
-          <Text style={textStyle}>Join Chat</Text>
+          <Text style={textStyle}>Join chat</Text>
         </View>
       );
     }
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -225,7 +225,7 @@
         buttonContent = (
           <>
             <SWMansionIcon icon="plus" size={24} />
-            <p className={css.joinButtonText}>Join Chat</p>
+            <p className={css.joinButtonText}>Join chat</p>
           </>
         );
       }