diff --git a/web/components/message-result.css b/web/components/message-result.css
index 785c9fa94..108472b8b 100644
--- a/web/components/message-result.css
+++ b/web/components/message-result.css
@@ -1,31 +1,30 @@
 .messageContainer {
   border: 1px solid var(--pin-message-modal-border-color);
   border-radius: 7px;
-  margin: 0 32px 16px 32px;
 }
 
 .messageContainerOverflow {
   overflow-y: scroll;
   max-height: 400px;
 }
 
 .messageDate {
   color: var(--chat-timestamp-color);
   font-size: var(--xs-font-12);
   padding: 0px 0px 6px 0px;
   line-height: var(--line-height-text);
   text-align: left;
   margin-left: 16px;
 }
 
 .creator {
   font-size: small;
   color: var(--shades-white-60);
   font-size: var(--s-font-14);
   padding: 4px 24px;
   text-align: left;
 }
 
 .messageContent {
   margin-bottom: 1px;
 }
diff --git a/web/modals/chat/message-results-modal.css b/web/modals/chat/message-results-modal.css
index c7cb8b9b6..be1ffec43 100644
--- a/web/modals/chat/message-results-modal.css
+++ b/web/modals/chat/message-results-modal.css
@@ -1,24 +1,28 @@
 hr.separator {
   border: 0;
   margin: 20px 0 0 0;
   width: 100%;
   height: 2px;
   border: none;
   border-top: var(--shades-black-70) solid 1px;
 }
 
 .messageResultsContainer {
   overflow-y: scroll;
-  padding-bottom: 8px;
+  padding: 0 32px 8px 32px;
+}
+
+.messageResultsContainer > * {
+  margin-bottom: 16px;
 }
 
 .loadingIndicator {
   text-align: center;
 }
 
 .topSpace {
   height: 48px;
   align-items: center;
   justify-content: center;
   display: flex;
 }
diff --git a/web/modals/chat/toggle-pin-modal.css b/web/modals/chat/toggle-pin-modal.css
index 59cc2dd9b..c68c37cf4 100644
--- a/web/modals/chat/toggle-pin-modal.css
+++ b/web/modals/chat/toggle-pin-modal.css
@@ -1,30 +1,34 @@
 .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;
+}
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
index 4816746eb..0a65ad20f 100644
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -1,127 +1,129 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   toggleMessagePin,
   toggleMessagePinActionTypes,
 } from 'lib/actions/thread-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 { ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-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 = useServerCall(toggleMessagePin);
   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,
       };
     };
 
     dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
     popModal();
   }, [
     modalInfo,
     callToggleMessagePin,
     dispatchActionPromise,
     messageInfo.id,
     popModal,
   ]);
 
   return (
     <Modal name={modalInfo.name} onClose={popModal} size="large">
       <div className={css.confirmationText}>{modalInfo.confirmationText}</div>
-      <MessageResult
-        item={modifiedItem}
-        threadInfo={threadInfo}
-        scrollable={true}
-      />
+      <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>
     </Modal>
   );
 }
 
 export default TogglePinModal;