diff --git a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
index 2e50c52cd..55214eea8 100644
--- a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
+++ b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
@@ -6,7 +6,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
     class="box confirm-page-container-content__data box--flex-direction-row"
   >
     <div
-      class="box box--display-flex box--flex-direction-row"
+      class="box box--padding-4 box--display-flex box--flex-direction-column"
     >
       <div
         class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
diff --git a/ui/components/institutional/note-to-trader/note-to-trader.js b/ui/components/institutional/note-to-trader/note-to-trader.js
index 459ef49de..d4aa601c0 100644
--- a/ui/components/institutional/note-to-trader/note-to-trader.js
+++ b/ui/components/institutional/note-to-trader/note-to-trader.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import { Label, Text } from '../../component-library';
@@ -13,10 +13,14 @@ const NoteToTrader = (props) => {
 
   return (
     <Box className="confirm-page-container-content__data">
-      <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        padding={4}
+      >
         <Box
           className="note-header"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
         >
           <Label htmlFor="transaction-note">{labelText}</Label>
@@ -25,8 +29,8 @@ const NoteToTrader = (props) => {
           </Text>
         </Box>
         <Box
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
           className="note-field"
         >
           <textarea