diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index e9fb0cb3a..b9fc2f5ce 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -79,6 +79,7 @@ export default function Box({
   textAlign,
   flexDirection = FLEX_DIRECTION.ROW,
   flexWrap,
+  gap,
   display,
   width,
   height,
@@ -134,6 +135,7 @@ export default function Box({
     [`box--height-${height}`]: Boolean(height),
     // background
     [`box--background-color-${backgroundColor}`]: Boolean(backgroundColor),
+    ...generateSizeClasses('box', 'gap', gap),
   });
   // Apply Box styles to any other component using function pattern
   if (typeof children === 'function') {
@@ -146,6 +148,7 @@ Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   flexDirection: PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
   flexWrap: PropTypes.oneOf(Object.values(FLEX_WRAP)),
+  gap: ValidSize,
   margin: MultipleSizes,
   marginTop: ValidSize,
   marginBottom: ValidSize,
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 322f2d43c..27d146c84 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -2,10 +2,10 @@
 @use "design-system";
 @use "utilities";
 
-$attributes: padding, margin;
+$attributes: padding, margin, gap;
 
 .box {
-  // Padding and Margin
+  // Padding, Margin, and Gap
   @each $attribute in $attributes {
     @each $size in design-system.$sizes-numeric {
       &--#{$attribute}-#{$size} {