diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index f7331080fd..aada9e7f06 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "SquG9JvLanG/gJwBw5H1AZBlsthmv21Ci4Vn+sMemjM=",
+    "shasum": "dufO1JvWq9z+GBzDz4wzKAeMlwm1KvNTq9Ut00XkRr4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index db40ba24e3..cddbc3d59e 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "pCp96i558WHqHIUZyZGUFcxAfOQ0afBHJ59nJB5ma78=",
+    "shasum": "2LrvEzOyxhKXC5ySK8hlvTRv9Wt9h501auraxKKipOU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/Box.ts b/packages/snaps-sdk/src/jsx/components/Box.ts
index f9d1742268..44b8fc3e1d 100644
--- a/packages/snaps-sdk/src/jsx/components/Box.ts
+++ b/packages/snaps-sdk/src/jsx/components/Box.ts
@@ -8,6 +8,7 @@ import { createSnapComponent } from '../component';
  * @property direction - The direction to stack the components within the box. Defaults to `vertical`.
  * @property alignment - The alignment mode to use within the box. Defaults to `start`.
  * @property center - Whether to center the children within the box. Defaults to `false`.
+ * @property backgroundColor - Whether the Box needs color adjustments. Defaults to undefined.
  */
 export type BoxProps = {
   // We can't use `JSXElement` because it causes a circular reference.
@@ -21,6 +22,7 @@ export type BoxProps = {
     | 'space-around'
     | undefined;
   center?: boolean | undefined;
+  backgroundColor?: string | undefined;
 };
 
 const TYPE = 'Box';
diff --git a/packages/snaps-sdk/src/jsx/components/Container.test.tsx b/packages/snaps-sdk/src/jsx/components/Container.test.tsx
index ad27289175..f8cf3ee651 100644
--- a/packages/snaps-sdk/src/jsx/components/Container.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/Container.test.tsx
@@ -7,7 +7,7 @@ import { Text } from './Text';
 describe('Container', () => {
   it('renders a container element with a box', () => {
     const result = (
-      <Container>
+      <Container backgroundColor="alternative">
         <Box>
           <Text>Hello world!</Text>
         </Box>
@@ -18,6 +18,7 @@ describe('Container', () => {
       type: 'Container',
       key: null,
       props: {
+        backgroundColor: 'alternative',
         children: {
           type: 'Box',
           key: null,
diff --git a/packages/snaps-sdk/src/jsx/components/Container.ts b/packages/snaps-sdk/src/jsx/components/Container.ts
index 4277fcab54..6b2500663a 100644
--- a/packages/snaps-sdk/src/jsx/components/Container.ts
+++ b/packages/snaps-sdk/src/jsx/components/Container.ts
@@ -2,6 +2,11 @@ import type { GenericSnapElement } from '../component';
 import { createSnapComponent } from '../component';
 import type { FooterElement } from './Footer';
 
+/**
+ * Definition of container background colors.
+ */
+export type ContainerBackgroundColor = 'default' | 'alternative';
+
 /**
  * The props of the {@link Container} component.
  *
@@ -9,6 +14,7 @@ import type { FooterElement } from './Footer';
  */
 export type ContainerProps = {
   children: [GenericSnapElement, FooterElement] | GenericSnapElement;
+  backgroundColor?: ContainerBackgroundColor | undefined;
 };
 
 const TYPE = 'Container';
@@ -17,10 +23,11 @@ const TYPE = 'Container';
  * A container component, which is used to create a container with a box and a footer.
  *
  * @param props - The props of the component.
+ * @param props.backgroundColor - The color of the background.
  * @param props.children - The Box and the Footer or the Box element.
  * @returns A container element.
  * @example
- * <Container>
+ * <Container backgroundColor="default">
  *   <Box>
  *     <Text>Hello world!</Text>
  *   </Box>
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index 60466eadbf..125210dba0 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -756,6 +756,12 @@ describe('ContainerStruct', () => {
     <Container>
       <Text>Hello world!</Text>
     </Container>,
+    <Container backgroundColor="default">
+      <Text>Hello world!</Text>
+    </Container>,
+    <Container backgroundColor="alternative">
+      <Text>Hello world!</Text>
+    </Container>,
     <Container>
       <Text>Hello world!</Text>
       <Footer>
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index a2905fc08b..576bf80134 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -837,6 +837,9 @@ export const ContainerStruct: Describe<ContainerElement> = element(
       [GenericSnapElement, FooterElement] | GenericSnapElement,
       null
     >,
+    backgroundColor: optional(
+      nullUnion([literal('default'), literal('alternative')]),
+    ),
   },
 );