diff --git a/native/chat/toggle-pin-modal.react.js b/native/chat/toggle-pin-modal.react.js
--- a/native/chat/toggle-pin-modal.react.js
+++ b/native/chat/toggle-pin-modal.react.js
@@ -8,8 +8,8 @@
 import { usePinMessageAction } from 'lib/utils/pin-message-utils.js';
 
 import MessageResult from './message-result.react.js';
-import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
+import PrimaryButton from '../components/primary-button.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
@@ -41,7 +41,6 @@
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
-        buttonStyle: styles.removePinButton,
       };
     }
 
@@ -53,9 +52,8 @@
         'currently viewing. To unpin a message, select the pinned messages ' +
         'icon in the channel.',
       buttonText: 'Pin Message',
-      buttonStyle: styles.pinButton,
     };
-  }, [isPinned, styles.pinButton, styles.removePinButton]);
+  }, [isPinned]);
 
   const onPress = React.useCallback(() => {
     invariant(messageInfo.id, 'messageInfo.id should be defined');
@@ -88,12 +86,12 @@
         scrollable={true}
       />
       <View style={styles.buttonsContainer}>
-        <Button style={modalInfo.buttonStyle} onPress={onPress}>
-          <Text style={styles.textColor}>{modalInfo.buttonText}</Text>
-        </Button>
-        <Button style={styles.cancelButton} onPress={onCancel}>
-          <Text style={styles.textColor}>Cancel</Text>
-        </Button>
+        <PrimaryButton
+          onPress={onPress}
+          label={modalInfo.buttonText}
+          variant="enabled"
+        />
+        <PrimaryButton onPress={onCancel} label="Cancel" variant="outline" />
       </View>
     </Modal>
   );
@@ -121,26 +119,6 @@
     height: 72,
     paddingHorizontal: 16,
   },
-  removePinButton: {
-    borderRadius: 5,
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'vibrantRedButton',
-  },
-  pinButton: {
-    borderRadius: 5,
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'purpleButton',
-  },
-  cancelButton: {
-    borderRadius: 5,
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   textColor: {
     color: 'modalButtonLabel',
   },
diff --git a/web/modals/chat/pinned-messages-modal.css b/web/modals/chat/pinned-messages-modal.css
--- a/web/modals/chat/pinned-messages-modal.css
+++ b/web/modals/chat/pinned-messages-modal.css
@@ -21,6 +21,7 @@
 }
 
 .loadingIndicator {
+  margin-top: 16px;
   text-align: center;
 }
 
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -125,7 +125,7 @@
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
-    if (modifiedItems.length === 0) {
+    if (modifiedItems.length === 0 && loadingStatus !== 'loading') {
       return (
         <div className={css.noPinnedMessages}>
           No pinned messages in this thread.
@@ -142,7 +142,7 @@
       />
     ));
     return <>{items}</>;
-  }, [modifiedItems, threadInfo]);
+  }, [loadingStatus, modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {