diff --git a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
index 42d019e2a1f0..1a5d0c9051fb 100644
--- a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
+++ b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
@@ -10,7 +10,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -48,7 +48,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -102,7 +102,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -156,7 +156,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -210,7 +210,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -237,7 +237,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -308,7 +308,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -356,7 +356,7 @@ exports[`SnapUIRenderer supports file inputs 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -419,7 +419,7 @@ exports[`SnapUIRenderer supports forms 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -469,7 +469,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -551,7 +551,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -589,7 +589,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -637,7 +637,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/box.ts b/ui/components/app/snaps/snap-ui-renderer/components/box.ts
index fccf81729285..eb003e4a4dd8 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/box.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/box.ts
@@ -31,6 +31,27 @@ function generateJustifyContent(alignment?: BoxProps['alignment']) {
   }
 }
 
+function generateAlignItems(
+  crossAlignment: BoxProps['crossAlignment'],
+  center?: BoxProps['center'],
+) {
+  if (center) {
+    return AlignItems.center;
+  }
+
+  switch (crossAlignment) {
+    default:
+    case 'start':
+      return AlignItems.flexStart;
+
+    case 'center':
+      return AlignItems.center;
+
+    case 'end':
+      return AlignItems.flexEnd;
+  }
+}
+
 export const box: UIComponentFactory<BoxElement> = ({
   element,
   ...params
@@ -46,7 +67,10 @@ export const box: UIComponentFactory<BoxElement> = ({
         ? FlexDirection.Row
         : FlexDirection.Column,
     justifyContent: generateJustifyContent(element.props.alignment),
-    alignItems: element.props.center && AlignItems.center,
+    alignItems: generateAlignItems(
+      element.props.crossAlignment,
+      element.props.center,
+    ),
     className: 'snap-ui-renderer__panel',
     color: TextColor.textDefault,
   },