diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
index 5bdfd6eeecf..754a6244f7a 100644
--- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
@@ -2293,6 +2293,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
       ]
     }
     nativeID="10"
+    onLayout={[Function]}
     style={
       [
         {
diff --git a/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
index 730f9f50dbd..4d716a7ff42 100644
--- a/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioConnectWalletConfirmScene.test.tsx.snap
@@ -357,15 +357,10 @@ exports[`FioConnectWalletConfirm should render with loading props 1`] = `
       <View
         style={
           {
-            "flex": undefined,
-            "marginBottom": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginTop": undefined,
+            "flex": 1,
+            "marginTop": 0,
             "paddingBottom": 11,
-            "paddingLeft": 11,
-            "paddingRight": 11,
-            "paddingTop": 11,
+            "paddingHorizontal": 11,
           }
         }
       >
diff --git a/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap
index ab3a3f33d1a..6dbf122dcf9 100644
--- a/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap
@@ -273,97 +273,92 @@ exports[`SwapConfirmationScene should render with loading props 1`] = `
       <View
         style={
           {
-            "flex": undefined,
-            "marginBottom": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginTop": undefined,
-            "paddingBottom": 11,
+            "justifyContent": "center",
+            "overflow": "visible",
             "paddingLeft": 11,
-            "paddingRight": 11,
-            "paddingTop": 11,
           }
         }
       >
         <View
           style={
             {
-              "justifyContent": "center",
-              "overflow": "visible",
-              "paddingBottom": 11,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 11,
+              "marginHorizontal": 11,
             }
           }
         >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 11,
-                "marginHorizontal": 11,
-              }
-            }
-          >
-            <Text
-              adjustsFontSizeToFit={true}
-              allowFontScaling={false}
-              minimumFontScale={0.65}
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontFamily": "Quicksand-Regular",
-                    "fontSize": 22,
-                    "includeFontPadding": false,
-                  },
-                  {
-                    "fontFamily": "Quicksand-Medium",
-                    "fontSize": 27,
-                  },
-                  null,
-                ]
-              }
-            >
-              Exchange
-            </Text>
-          </View>
-          <BVLinearGradient
-            colors={
-              [
-                452984831,
-                452984831,
-              ]
-            }
-            endPoint={
-              {
-                "x": 1,
-                "y": 0.5,
-              }
-            }
-            locations={null}
-            startPoint={
-              {
-                "x": 0,
-                "y": 0.5,
-              }
-            }
+          <Text
+            adjustsFontSizeToFit={true}
+            allowFontScaling={false}
+            minimumFontScale={0.65}
+            numberOfLines={1}
             style={
               [
                 {
-                  "borderBottomColor": "rgba(255, 255, 255, .1)",
-                  "borderBottomWidth": 1,
-                  "height": 1,
+                  "color": "#FFFFFF",
+                  "fontFamily": "Quicksand-Regular",
+                  "fontSize": 22,
+                  "includeFontPadding": false,
                 },
                 {
-                  "margin": 11,
-                  "marginRight": -22,
+                  "fontFamily": "Quicksand-Medium",
+                  "fontSize": 27,
                 },
+                null,
               ]
             }
-          />
+          >
+            Exchange
+          </Text>
         </View>
+        <BVLinearGradient
+          colors={
+            [
+              452984831,
+              452984831,
+            ]
+          }
+          endPoint={
+            {
+              "x": 1,
+              "y": 0.5,
+            }
+          }
+          locations={null}
+          startPoint={
+            {
+              "x": 0,
+              "y": 0.5,
+            }
+          }
+          style={
+            [
+              {
+                "borderBottomColor": "rgba(255, 255, 255, .1)",
+                "borderBottomWidth": 1,
+                "height": 1,
+              },
+              {
+                "margin": 11,
+                "marginRight": -22,
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        style={
+          {
+            "flex": 1,
+            "marginTop": 0,
+            "paddingBottom": 11,
+            "paddingHorizontal": 11,
+          }
+        }
+      >
         <View
           collapsable={false}
           entering={
diff --git a/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap
index 4f21661d8de..dd3939bfc20 100644
--- a/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap
@@ -272,18 +272,12 @@ exports[`SwapCreateScene should render with loading props 1`] = `
   >
     <View>
       <View
-        expand={true}
         style={
           {
             "flex": 1,
-            "marginBottom": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginTop": undefined,
+            "marginTop": 0,
             "paddingBottom": 11,
-            "paddingLeft": 11,
-            "paddingRight": 11,
-            "paddingTop": 11,
+            "paddingHorizontal": 11,
           }
         }
       >
diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
index 04ce071b11b..5b860764e76 100644
--- a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
@@ -228,15 +228,10 @@ exports[`TransactionDetailsScene should render 1`] = `
       <View
         style={
           {
-            "flex": undefined,
-            "marginBottom": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginTop": undefined,
+            "flex": 1,
+            "marginTop": 0,
             "paddingBottom": 11,
-            "paddingLeft": 11,
-            "paddingRight": 11,
-            "paddingTop": 11,
+            "paddingHorizontal": 11,
           }
         }
       >
@@ -3121,15 +3116,10 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi
       <View
         style={
           {
-            "flex": undefined,
-            "marginBottom": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginTop": undefined,
+            "flex": 1,
+            "marginTop": 0,
             "paddingBottom": 11,
-            "paddingLeft": 11,
-            "paddingRight": 11,
-            "paddingTop": 11,
+            "paddingHorizontal": 11,
           }
         }
       >
diff --git a/src/components/common/SceneWrapper.tsx b/src/components/common/SceneWrapper.tsx
index b8b41b68695..a484d35d953 100644
--- a/src/components/common/SceneWrapper.tsx
+++ b/src/components/common/SceneWrapper.tsx
@@ -171,6 +171,9 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
   const navigation = useNavigation<NavigationBase>()
   const isIos = Platform.OS === 'ios'
 
+  // Track dock height for content padding when dockProps is used
+  const [dockHeight, setDockHeight] = useState(0)
+
   // We need to track this state in the JS thread because insets are not shared values
   const [isKeyboardOpen, setIsKeyboardOpen] = useState(false)
   useKeyboardHandler({
@@ -240,6 +243,12 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
   // Ignore inset bottom when keyboard is open because it is rendered behind it
   const maybeInsetBottom =
     !isKeyboardOpen || !avoidKeyboard ? safeAreaInsets.bottom : 0
+  // Include dock height in bottom inset when dock is visible (not keyboard-only or keyboard is open)
+  const keyboardVisibleOnlyDock = dockProps?.keyboardVisibleOnly ?? true
+  const maybeDockHeight =
+    dockProps != null && (!keyboardVisibleOnlyDock || isKeyboardOpen)
+      ? dockHeight
+      : 0
   const insets: EdgeInsets = useMemo(
     () => ({
       top: hasHeader ? headerBarHeight : safeAreaInsets.top,
@@ -248,13 +257,15 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
         maybeInsetBottom +
         maybeNotificationHeight +
         maybeTabBarHeight +
-        footerHeight,
+        footerHeight +
+        maybeDockHeight,
       left: safeAreaInsets.left
     }),
     [
       footerHeight,
       hasHeader,
       headerBarHeight,
+      maybeDockHeight,
       maybeInsetBottom,
       maybeNotificationHeight,
       maybeTabBarHeight,
@@ -328,7 +339,12 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
   }, [children, sceneWrapperInfo])
 
   // Build Dock View element
-  const keyboardVisibleOnlyDoc = dockProps?.keyboardVisibleOnly ?? true
+  const handleDockLayout = React.useCallback(
+    (event: { nativeEvent: { layout: { height: number } } }) => {
+      setDockHeight(event.nativeEvent.layout.height)
+    },
+    []
+  )
   const dockBaseStyle = useMemo(
     () => ({
       position: 'absolute' as const,
@@ -366,9 +382,10 @@ function SceneWrapperComponent(props: SceneWrapperProps): React.ReactElement {
     return { bottom }
   })
   const shouldShowDock =
-    dockProps != null && (!keyboardVisibleOnlyDoc || isKeyboardVisibleDock)
+    dockProps != null && (!keyboardVisibleOnlyDock || isKeyboardVisibleDock)
   const dockElement = !shouldShowDock ? null : (
     <Reanimated.View
+      onLayout={handleDockLayout}
       style={[
         dockBaseStyle,
         dockAnimatedStyle,
diff --git a/src/components/layout/SceneContainer.tsx b/src/components/layout/SceneContainer.tsx
index 2585693b4da..5a9a6eaa72b 100644
--- a/src/components/layout/SceneContainer.tsx
+++ b/src/components/layout/SceneContainer.tsx
@@ -1,55 +1,70 @@
 import * as React from 'react'
 import { View } from 'react-native'
+import { cacheStyles } from 'react-native-patina'
 
+import { DividerLineUi4 } from '../common/DividerLineUi4'
+import { DEFAULT_MARGIN_REM } from '../common/Margins'
 import type { UndoInsetStyle } from '../common/SceneWrapper'
-import { styled } from '../hoc/styled'
-import { SceneHeaderUi4 } from '../themed/SceneHeaderUi4'
+import { type Theme, useTheme } from '../services/ThemeContext'
+import { EdgeText } from '../themed/EdgeText'
 
-interface Props extends SceneContainerViewProps {
-  /**
-   * The `title` prop for the {@link SceneHeaderUi4} component.
-   */
+interface Props {
   headerTitle?: string
   headerTitleChildren?: React.ReactNode
   children?: React.ReactNode
+  undoInsetStyle?: UndoInsetStyle
 }
 
 export const SceneContainer: React.FC<Props> = (props: Props) => {
-  const { children, headerTitle, headerTitleChildren, ...sceneContainerProps } =
-    props
+  const { children, headerTitle, headerTitleChildren, undoInsetStyle } = props
+
+  const theme = useTheme()
+  const styles = getStyles(theme)
+
+  const contentInsets = React.useMemo(
+    () => ({
+      ...undoInsetStyle,
+      flex: 1,
+      marginTop: 0,
+      // Built-in padding if we're not using undoInsetStyle
+      paddingHorizontal:
+        undoInsetStyle == null ? theme.rem(DEFAULT_MARGIN_REM) : 0,
+      paddingBottom: undoInsetStyle == null ? theme.rem(DEFAULT_MARGIN_REM) : 0
+    }),
+    [theme, undoInsetStyle]
+  )
 
   return (
-    <SceneContainerView {...sceneContainerProps}>
+    <>
       {headerTitle != null ? (
-        <SceneHeaderUi4 title={headerTitle}>
-          {headerTitleChildren}
-        </SceneHeaderUi4>
+        <View style={styles.headerContainer}>
+          <View style={styles.titleContainer}>
+            <EdgeText style={styles.title}>{headerTitle}</EdgeText>
+            {headerTitleChildren}
+          </View>
+          <DividerLineUi4 extendRight />
+        </View>
       ) : null}
-      {children}
-    </SceneContainerView>
+      <View style={contentInsets}>{children}</View>
+    </>
   )
 }
 
-interface SceneContainerViewProps {
-  expand?: boolean
-  undoTop?: boolean
-  undoRight?: boolean
-  undoBottom?: boolean
-  undoLeft?: boolean
-  undoInsetStyle?: UndoInsetStyle
-}
-const SceneContainerView = styled(View)<Props>(
-  theme =>
-    ({ expand, undoTop, undoRight, undoBottom, undoLeft, undoInsetStyle }) => ({
-      flex: expand === true ? 1 : undefined,
-      paddingTop: theme.rem(0.5),
-      paddingRight: theme.rem(0.5),
-      paddingBottom: theme.rem(0.5),
-      paddingLeft: theme.rem(0.5),
-      marginTop: undoTop === true ? undoInsetStyle?.marginTop : undefined,
-      marginRight: undoRight === true ? undoInsetStyle?.marginRight : undefined,
-      marginBottom:
-        undoBottom === true ? undoInsetStyle?.marginBottom : undefined,
-      marginLeft: undoLeft === true ? undoInsetStyle?.marginLeft : undefined
-    })
-)
+const getStyles = cacheStyles((theme: Theme) => ({
+  headerContainer: {
+    justifyContent: 'center',
+    overflow: 'visible',
+    paddingLeft: theme.rem(DEFAULT_MARGIN_REM)
+  },
+  title: {
+    fontSize: theme.rem(1.2),
+    fontFamily: theme.fontFaceMedium
+  },
+  titleContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginHorizontal: theme.rem(DEFAULT_MARGIN_REM),
+    marginBottom: theme.rem(DEFAULT_MARGIN_REM)
+  }
+}))
diff --git a/src/components/scenes/DuressPinScene.tsx b/src/components/scenes/DuressPinScene.tsx
index 7280bc45fb1..c41ba4d79a3 100644
--- a/src/components/scenes/DuressPinScene.tsx
+++ b/src/components/scenes/DuressPinScene.tsx
@@ -19,7 +19,7 @@ import { DigitInput, MAX_PIN_LENGTH } from './inputs/DigitInput'
 
 interface Props extends EdgeAppSceneProps<'duressPin'> {}
 
-export const DuressPinScene = (props: Props) => {
+export const DuressPinScene: React.FC<Props> = (props: Props) => {
   const { navigation } = props
   const theme = useTheme()
   const styles = getStyles(theme)
@@ -29,7 +29,7 @@ export const DuressPinScene = (props: Props) => {
   const [pin, setPin] = React.useState('')
   const isValidPin = pin.length === MAX_PIN_LENGTH
 
-  const handleComplete = () => {
+  const handleComplete = useHandler(() => {
     if (!isValidPin) return
     account
       .checkPin(pin)
@@ -47,10 +47,10 @@ export const DuressPinScene = (props: Props) => {
         showToast(lstrings.duress_mode_set_pin_success)
         navigation.navigate('duressModeSetting')
       })
-      .catch(err => {
+      .catch((err: unknown) => {
         showError(err)
       })
-  }
+  })
 
   const handleChangePin = useHandler((newPin: string) => {
     // Change pin only when input are numbers
@@ -66,7 +66,7 @@ export const DuressPinScene = (props: Props) => {
 
   return (
     <SceneWrapper scroll={false}>
-      <SceneContainer expand headerTitle={lstrings.title_set_duress_pin}>
+      <SceneContainer headerTitle={lstrings.title_set_duress_pin}>
         <ScrollView
           ref={scrollViewRef}
           contentContainerStyle={styles.content}
diff --git a/src/components/scenes/RampPendingScene.tsx b/src/components/scenes/RampPendingScene.tsx
index 179e525d984..1afc076ecab 100644
--- a/src/components/scenes/RampPendingScene.tsx
+++ b/src/components/scenes/RampPendingScene.tsx
@@ -108,7 +108,7 @@ export const RampPendingScene: React.FC<Props> = props => {
 
   return (
     <SceneWrapper hasTabs>
-      <SceneContainer expand headerTitle={title}>
+      <SceneContainer headerTitle={title}>
         <View style={styles.contentContainer}>
           {error != null ? (
             <ErrorCard error={error} />
diff --git a/src/components/scenes/Staking/StakeOptionsScene.tsx b/src/components/scenes/Staking/StakeOptionsScene.tsx
index 0f4e8558ca2..5c12a7b371d 100644
--- a/src/components/scenes/Staking/StakeOptionsScene.tsx
+++ b/src/components/scenes/Staking/StakeOptionsScene.tsx
@@ -30,7 +30,6 @@ import { SceneContainer } from '../../layout/SceneContainer'
 import { Space } from '../../layout/Space'
 import { useTheme } from '../../services/ThemeContext'
 import { EdgeText } from '../../themed/EdgeText'
-import { SceneHeaderUi4 } from '../../themed/SceneHeaderUi4'
 
 interface Props extends EdgeAppSceneProps<'stakeOptions'> {
   wallet: EdgeCurrencyWallet
@@ -41,7 +40,7 @@ export interface StakeOptionsParams {
   walletId: string
 }
 
-const StakeOptionsSceneComponent = (props: Props) => {
+const StakeOptionsSceneComponent = (props: Props): React.JSX.Element => {
   const { navigation, route, wallet } = props
   const { tokenId } = route.params
   const [stakePlugins = []] = useAsyncValue(
@@ -73,7 +72,7 @@ const StakeOptionsSceneComponent = (props: Props) => {
   // Handlers
   //
 
-  const handleStakeOptionPress = (stakePolicy: StakePolicy) => {
+  const handleStakeOptionPress = (stakePolicy: StakePolicy): void => {
     const { stakePolicyId } = stakePolicy
     const stakePlugin = getPluginFromPolicyId(stakePlugins, stakePolicyId, {
       pluginId
@@ -90,7 +89,11 @@ const StakeOptionsSceneComponent = (props: Props) => {
   // Renders
   //
 
-  const renderOptions = ({ item: stakePolicy }: { item: StakePolicy }) => {
+  const renderOptions = ({
+    item: stakePolicy
+  }: {
+    item: StakePolicy
+  }): React.JSX.Element => {
     const primaryText = getPolicyAssetName(stakePolicy, 'stakeAssets')
     const secondaryText = getPolicyTitleName(stakePolicy, countryCode)
     const key = [primaryText, secondaryText].join()
@@ -143,27 +146,21 @@ const StakeOptionsSceneComponent = (props: Props) => {
       overrideDots={theme.backgroundDots.assetOverrideDots}
     >
       {({ undoInsetStyle, insetStyle }) => (
-        <SceneContainer undoBottom undoInsetStyle={undoInsetStyle}>
+        <SceneContainer
+          headerTitle={sprintf(
+            lstrings.staking_change_add_header,
+            currencyCode
+          )}
+          undoInsetStyle={undoInsetStyle}
+        >
           <FlatList
             data={stakePolicyArray}
             renderItem={renderOptions}
             contentContainerStyle={{ paddingBottom: insetStyle.paddingBottom }}
             ListHeaderComponent={
-              <>
-                {/* TODO: Decide if our design language accepts scene headers within
-                the scroll area of a scene. If so, we must make the SceneContainer
-                component implement FlatList components. This is a one-off 
-                until then. */}
-                <SceneHeaderUi4
-                  title={sprintf(
-                    lstrings.staking_change_add_header,
-                    currencyCode
-                  )}
-                />
-                <Space horizontalRem={0.5} bottomRem={0.5}>
-                  <EdgeText>{lstrings.stake_select_options}</EdgeText>
-                </Space>
-              </>
+              <Space horizontalRem={1} bottomRem={0.5}>
+                <EdgeText>{lstrings.stake_select_options}</EdgeText>
+              </Space>
             }
             keyExtractor={(stakePolicy: StakePolicy) =>
               stakePolicy.stakePolicyId
diff --git a/src/components/scenes/SwapCreateScene.tsx b/src/components/scenes/SwapCreateScene.tsx
index 13130513eeb..f42ec8d90b1 100644
--- a/src/components/scenes/SwapCreateScene.tsx
+++ b/src/components/scenes/SwapCreateScene.tsx
@@ -535,7 +535,7 @@ export const SwapCreateScene: React.FC<Props> = props => {
       }}
     >
       {({ isKeyboardOpen }) => (
-        <SceneContainer expand>
+        <SceneContainer>
           <EdgeAnim enter={fadeInUp60}>
             {fromWallet == null ? (
               <EdgeButton