diff --git a/web/modals/chat/toggle-pin-modal.css b/web/modals/chat/toggle-pin-modal.css
index c68c37cf4..b3b806523 100644
--- a/web/modals/chat/toggle-pin-modal.css
+++ b/web/modals/chat/toggle-pin-modal.css
@@ -1,34 +1,5 @@
 .confirmationText {
   color: var(--pin-message-information-text-color);
-  padding: 16px 32px 0 32px;
   font-size: small;
-}
-
-.buttonContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  align-items: stretch;
-  margin-bottom: 16px;
-}
-
-.togglePinButton {
-  margin: 0 32px 0 32px;
-}
-
-.cancelButton {
-  color: white;
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.cancelButton:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.messageContainer {
-  margin: 24px;
+  margin-bottom: 24px;
 }
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
index 66835b5d5..cdfeb079c 100644
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -1,130 +1,143 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   toggleMessagePinActionTypes,
   useToggleMessagePin,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { modifyItemForResultScreen } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './toggle-pin-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Modal from '../modal.react.js';
 
 type TogglePinModalProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { item, threadInfo } = props;
   const { messageInfo, isPinned } = item;
   const { popModal } = useModalContext();
 
   const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonColor: buttonThemes.danger,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText: `You may pin this message to the channel 
         you are currently viewing. To unpin a message, select the pinned 
         messages icon in the channel.`,
       buttonText: 'Pin Message',
       buttonColor: buttonThemes.standard,
     };
   }, [isPinned]);
 
   // We want to remove inline engagement (threadCreatedFromMessage / reactions)
   // and the message header (startsConversation). We also want to set isViewer
   // to false so that the message is left-aligned and uncolored.
   const modifiedItem = React.useMemo(() => {
     if (item.messageInfoType !== 'composable') {
       return item;
     }
 
     const strippedItem = {
       ...item,
       threadCreatedFromMessage: undefined,
       reactions: {},
     };
     return modifyItemForResultScreen(strippedItem);
   }, [item]);
 
   const onClick = React.useCallback(() => {
     const createToggleMessagePinPromise = async () => {
       invariant(messageInfo.id, 'messageInfo.id should be defined');
       const result = await callToggleMessagePin({
         messageID: messageInfo.id,
         action: modalInfo.action,
       });
       return ({
         newMessageInfos: result.newMessageInfos,
         threadID: result.threadID,
       }: {
         +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
         +threadID: string,
       });
     };
 
     void dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
     popModal();
   }, [
     modalInfo,
     callToggleMessagePin,
     dispatchActionPromise,
     messageInfo.id,
     popModal,
   ]);
 
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        buttonColor={modalInfo.buttonColor}
+        onClick={onClick}
+      >
+        {modalInfo.buttonText}
+      </Button>
+    ),
+    [modalInfo.buttonColor, modalInfo.buttonText, onClick],
+  );
+
+  const secondaryButton = React.useMemo(
+    () => (
+      <Button variant="outline" onClick={popModal}>
+        Cancel
+      </Button>
+    ),
+    [popModal],
+  );
+
   return (
-    <Modal name={modalInfo.name} onClose={popModal} size="large">
+    <Modal
+      name={modalInfo.name}
+      onClose={popModal}
+      size="large"
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
       <div className={css.confirmationText}>{modalInfo.confirmationText}</div>
-      <div className={css.messageContainer}>
-        <MessageResult
-          item={modifiedItem}
-          threadInfo={threadInfo}
-          scrollable={true}
-        />
-      </div>
-      <div className={css.buttonContainer}>
-        <Button
-          variant="filled"
-          className={css.togglePinButton}
-          buttonColor={modalInfo.buttonColor}
-          onClick={onClick}
-        >
-          {modalInfo.buttonText}
-        </Button>
-        <div className={css.cancelButton} onClick={popModal}>
-          Cancel
-        </div>
-      </div>
+      <MessageResult
+        item={modifiedItem}
+        threadInfo={threadInfo}
+        scrollable={true}
+      />
     </Modal>
   );
 }
 
 export default TogglePinModal;