diff --git a/web/modals/chat/toggle-pin-modal.css b/web/modals/chat/toggle-pin-modal.css
--- 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
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -100,29 +100,42 @@
     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>
   );
 }