diff --git a/ui/components/app/snaps/insight-warnings/insight-warnings.js b/ui/components/app/snaps/insight-warnings/insight-warnings.js
index b24b5fa8461b..22dce6365379 100644
--- a/ui/components/app/snaps/insight-warnings/insight-warnings.js
+++ b/ui/components/app/snaps/insight-warnings/insight-warnings.js
@@ -85,6 +85,7 @@ export default function InsightWarnings({
               isCollapsable
               isCollapsed={warningState[snapId]}
               boxProps={{ marginBottom: idx === lastWarningIdx ? 0 : 4 }}
+              contentBackgroundColor={BackgroundColor.backgroundDefault}
             />
           );
         })}
diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
index d0acd2060f9b..0dae31577212 100644
--- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
+++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -90,7 +90,6 @@ export const SnapHomeRenderer = ({ snapId }) => {
           isLoading={loading}
           useDelineator={false}
           useFooter
-          contentBackgroundColor={BackgroundColor.backgroundAlternative}
         />
       )}
     </Box>
diff --git a/ui/components/app/snaps/snap-insight/snap-insight.js b/ui/components/app/snaps/snap-insight/snap-insight.js
index 4f243e265183..07630c3b0706 100644
--- a/ui/components/app/snaps/snap-insight/snap-insight.js
+++ b/ui/components/app/snaps/snap-insight/snap-insight.js
@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Text } from '../../../component-library';
 import {
   AlignItems,
+  BackgroundColor,
   FLEX_DIRECTION,
   JustifyContent,
   TextAlign,
@@ -69,6 +70,7 @@ export const SnapInsight = ({ snapId, data }) => {
               interfaceId={interfaceId}
               delineatorType={DelineatorType.Insights}
               isLoading={isLoading}
+              contentBackgroundColor={BackgroundColor.backgroundDefault}
             />
           ) : (
             <Text
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index b3f717aecbdd..709483c84492 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -1,4 +1,4 @@
-import { BoxElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { ContainerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { mapToTemplate } from '../utils';
 import {
@@ -8,7 +8,7 @@ import {
 import { UIComponentFactory } from './types';
 import { DEFAULT_FOOTER } from './footer';
 
-export const container: UIComponentFactory<BoxElement> = ({
+export const container: UIComponentFactory<ContainerElement> = ({
   element,
   useFooter,
   onCancel,
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/section.ts b/ui/components/app/snaps/snap-ui-renderer/components/section.ts
index 5e582936804c..e5c26ccbc51a 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/section.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/section.ts
@@ -8,12 +8,20 @@ import { box } from './box';
 
 export const section: UIComponentFactory<SectionElement> = ({
   element,
+  contentBackgroundColor,
   ...params
 }) => {
   const { children, props } = box({
     element,
     ...params,
   } as unknown as UIComponentParams<BoxElement>);
+
+  // Reverse colors to improve visibility on certain backgrounds
+  const backgroundColor =
+    contentBackgroundColor === BackgroundColor.backgroundDefault
+      ? BackgroundColor.backgroundAlternative
+      : BackgroundColor.backgroundDefault;
+
   return {
     element: 'Box',
     children,
@@ -22,7 +30,7 @@ export const section: UIComponentFactory<SectionElement> = ({
       className: 'snap-ui-renderer__section',
       padding: 4,
       gap: 2,
-      backgroundColor: BackgroundColor.backgroundDefault,
+      backgroundColor,
       borderRadius: BorderRadius.LG,
     },
   };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/types.ts b/ui/components/app/snaps/snap-ui-renderer/components/types.ts
index 78d354f805a0..bba5296aa899 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/types.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/types.ts
@@ -13,6 +13,7 @@ export type UIComponentParams<T extends JSXElement> = {
     placeholder?: string;
   };
   t: (key: string) => string;
+  contentBackgroundColor: string | undefined;
 };
 
 export type UIComponent = {
diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
index 481a51a0a202..9d183c49f409 100644
--- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -14,12 +14,13 @@ import { SnapInterfaceContextProvider } from '../../../../contexts/snaps';
 import PulseLoader from '../../../ui/pulse-loader';
 import {
   AlignItems,
+  BackgroundColor,
   BlockSize,
   Display,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { mapToTemplate } from './utils';
+import { mapToExtensionCompatibleColor, mapToTemplate } from './utils';
 
 // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
 const SnapUIRendererComponent = ({
@@ -69,6 +70,11 @@ const SnapUIRendererComponent = ({
     [inputValue, onInputChange, placeholder, isPrompt],
   );
 
+  const backgroundColor =
+    contentBackgroundColor ??
+    mapToExtensionCompatibleColor(content?.props?.backgroundColor) ??
+    BackgroundColor.backgroundAlternative;
+
   const sections = useMemo(
     () =>
       content &&
@@ -79,8 +85,9 @@ const SnapUIRendererComponent = ({
         useFooter,
         promptLegacyProps,
         t,
+        contentBackgroundColor: backgroundColor,
       }),
-    [content, onCancel, useFooter, promptLegacyProps, t],
+    [content, onCancel, useFooter, promptLegacyProps, t, backgroundColor],
   );
 
   if (isLoading || !content) {
@@ -130,7 +137,7 @@ const SnapUIRendererComponent = ({
       <Box
         className="snap-ui-renderer__content"
         height={BlockSize.Full}
-        backgroundColor={contentBackgroundColor}
+        backgroundColor={backgroundColor}
         style={{
           overflowY: 'auto',
           marginBottom: useFooter ? '80px' : '0',
diff --git a/ui/components/app/snaps/snap-ui-renderer/utils.ts b/ui/components/app/snaps/snap-ui-renderer/utils.ts
index a22bffa46fe2..c71772618995 100644
--- a/ui/components/app/snaps/snap-ui-renderer/utils.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/utils.ts
@@ -5,6 +5,7 @@ import { sha256 } from '@noble/hashes/sha256';
 import { NonEmptyArray, bytesToHex, remove0x } from '@metamask/utils';
 import { unescape as unescapeEntities } from 'he';
 import { ChangeEvent as ReactChangeEvent } from 'react';
+import { BackgroundColor } from '../../../../helpers/constants/design-system';
 import { COMPONENT_MAPPING } from './components';
 import { UIComponent } from './components/types';
 
@@ -20,6 +21,7 @@ export type MapToTemplateParams = {
     placeholder?: string;
   };
   t?: (key: string) => string;
+  contentBackgroundColor?: string | undefined;
 };
 
 /**
@@ -140,3 +142,17 @@ export const FIELD_ELEMENT_TYPES = [
 export const getPrimaryChildElementIndex = (children: JSXElement[]) => {
   return children.findIndex((c) => FIELD_ELEMENT_TYPES.includes(c.type));
 };
+
+/**
+ * Map Snap custom color to extension compatible color.
+ *
+ * @param color - Snap custom color.
+ * @returns String, representing color from design system.
+ */
+export const mapToExtensionCompatibleColor = (color: string) => {
+  const backgroundColorMapping: { [key: string]: string | undefined } = {
+    default: BackgroundColor.backgroundAlternative, // For Snaps, the default background color is the Alternative
+    alternative: BackgroundColor.backgroundDefault,
+  };
+  return color ? backgroundColorMapping[color] : undefined;
+};
diff --git a/ui/components/app/snaps/snap-ui-selector/index.scss b/ui/components/app/snaps/snap-ui-selector/index.scss
index 96830bf6c9d5..8f7cec5702b1 100644
--- a/ui/components/app/snaps/snap-ui-selector/index.scss
+++ b/ui/components/app/snaps/snap-ui-selector/index.scss
@@ -1,6 +1,7 @@
 .snap-ui-renderer {
   &__selector {
     width: 100%;
+    border: 1px solid var(--color-border-muted);
 
     & > span:first-child {
       width: 100%;
@@ -12,6 +13,7 @@
 
     &:hover {
       background-color: var(--color-background-alternative-hover);
+      border-color: var(--color-border-default);
     }
   }
 
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx
index cd46f6ea7113..3058d6086ff8 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx
@@ -7,6 +7,7 @@ import {
   TextColor,
   TextVariant,
   FontWeight,
+  BackgroundColor,
 } from '../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { getSnapMetadata } from '../../../../../../selectors';
@@ -75,6 +76,7 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
         interfaceId={interfaceId}
         isLoading={loading}
         useDelineator={false}
+        contentBackgroundColor={BackgroundColor.backgroundDefault}
       />
     </Delineator>
   );
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index d8d951871586..590cf5e09388 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -45,7 +45,6 @@ import { SnapUIRenderer } from '../../../components/app/snaps/snap-ui-renderer';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 ///: END:ONLY_INCLUDE_IF
 import { DAY } from '../../../../shared/constants/time';
-import { BackgroundColor } from '../../../helpers/constants/design-system';
 import { Nav } from '../components/confirm/nav';
 import { ConfirmContextProvider } from '../context/confirm';
 import { useConfirmationNavigation } from '../hooks/useConfirmationNavigation';
@@ -523,7 +522,6 @@ export default function ConfirmationPage({
               useDelineator={false}
               onCancel={handleSnapDialogCancel}
               useFooter={isSnapDefaultDialog}
-              contentBackgroundColor={BackgroundColor.backgroundAlternative}
             />
           ) : (
             <MetaMaskTemplateRenderer sections={templatedValues.content} />