diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
index 3361f97053..a1933e9557 100644
--- a/example/src/Examples/AppbarExample.tsx
+++ b/example/src/Examples/AppbarExample.tsx
@@ -9,6 +9,7 @@ import {
   Text,
   useTheme,
   RadioButton,
+  List,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import { yellowA200 } from '../../../src/styles/themes/v2/colors';
@@ -30,6 +31,7 @@ const AppbarExample = ({ navigation }: Props) => {
   const [showExactTheme, setShowExactTheme] = React.useState(false);
   const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
   const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
+  const [showElevated, setShowElevated] = React.useState(false);
 
   const { isV3 } = useTheme();
 
@@ -39,11 +41,12 @@ const AppbarExample = ({ navigation }: Props) => {
     navigation.setOptions({
       header: () => (
         <Appbar.Header
-          style={showCustomColor ? styles.customColor : null}
+          style={[showCustomColor ? styles.customColor : null]}
           theme={{
             mode: showExactTheme ? 'exact' : 'adaptive',
           }}
           mode={appbarMode}
+          elevated={showElevated}
         >
           {showLeftIcon && (
             <Appbar.BackAction onPress={() => navigation.goBack()} />
@@ -77,81 +80,101 @@ const AppbarExample = ({ navigation }: Props) => {
     appbarMode,
     showCalendarIcon,
     isCenterAlignedMode,
+    showElevated,
   ]);
 
   const TextComponent = isV3 ? Text : Paragraph;
 
-  return (
+  const renderDefaultOptions = () => (
     <>
-      <ScreenWrapper
-        style={styles.container}
-        contentContainerStyle={styles.contentContainer}
-      >
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Left icon</TextComponent>
+        <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+      </View>
+      {!isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Left icon</TextComponent>
-          <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+          <TextComponent variant="labelLarge">Subtitle</TextComponent>
+          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
         </View>
-        {!isV3 && (
-          <View style={styles.row}>
-            <TextComponent variant="labelLarge">Subtitle</TextComponent>
-            <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-          </View>
-        )}
+      )}
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Search icon</TextComponent>
+        <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+      </View>
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">More icon</TextComponent>
+        <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+      </View>
+      {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Search icon</TextComponent>
-          <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+          <TextComponent variant="labelLarge">Calendar icon</TextComponent>
+          <Switch
+            value={isCenterAlignedMode ? false : showCalendarIcon}
+            disabled={isCenterAlignedMode}
+            onValueChange={setShowCalendarIcon}
+          />
         </View>
+      )}
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Custom Color</TextComponent>
+        <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
+      </View>
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Exact Dark Theme</TextComponent>
+        <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
+      </View>
+      {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">More icon</TextComponent>
-          <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+          <TextComponent variant="labelLarge">Elevated</TextComponent>
+          <Switch value={showElevated} onValueChange={setShowElevated} />
         </View>
-        {isV3 && (
-          <View style={styles.row}>
-            <TextComponent variant="labelLarge">Calendar icon</TextComponent>
-            <Switch
-              value={isCenterAlignedMode ? false : showCalendarIcon}
-              disabled={isCenterAlignedMode}
-              onValueChange={setShowCalendarIcon}
-            />
-          </View>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <ScreenWrapper
+        style={styles.container}
+        contentContainerStyle={styles.contentContainer}
+      >
+        {isV3 ? (
+          <List.Section title="Default options">
+            {renderDefaultOptions()}
+          </List.Section>
+        ) : (
+          renderDefaultOptions()
         )}
-        <View style={styles.row}>
-          <TextComponent variant="labelLarge">Custom Color</TextComponent>
-          <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
-        </View>
-        <View style={styles.row}>
-          <TextComponent variant="labelLarge">Exact Dark Theme</TextComponent>
-          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-        </View>
         {isV3 && (
-          <RadioButton.Group
-            value={appbarMode}
-            onValueChange={(value: string) =>
-              setAppbarMode(value as AppbarModes)
-            }
-          >
-            <TextComponent variant="labelLarge" style={styles.appbarMode}>
-              Appbar Mode
-            </TextComponent>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">
-                Small (default)
-              </TextComponent>
-              <RadioButton value="small" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Medium</TextComponent>
-              <RadioButton value="medium" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Large</TextComponent>
-              <RadioButton value="large" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Center-aligned</TextComponent>
-              <RadioButton value="center-aligned" />
-            </View>
-          </RadioButton.Group>
+          <List.Section title="Appbar Modes">
+            <RadioButton.Group
+              value={appbarMode}
+              onValueChange={(value: string) =>
+                setAppbarMode(value as AppbarModes)
+              }
+            >
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">
+                  Small (default)
+                </TextComponent>
+                <RadioButton value="small" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">Medium</TextComponent>
+                <RadioButton value="medium" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">Large</TextComponent>
+                <RadioButton value="large" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">
+                  Center-aligned
+                </TextComponent>
+                <RadioButton value="center-aligned" />
+              </View>
+            </RadioButton.Group>
+          </List.Section>
         )}
       </ScreenWrapper>
       <Appbar
@@ -200,7 +223,4 @@ const styles = StyleSheet.create({
   customColor: {
     backgroundColor: yellowA200,
   },
-  appbarMode: {
-    textAlign: 'center',
-  },
 });
diff --git a/example/src/RootNavigator.tsx b/example/src/RootNavigator.tsx
index 674bfafd9c..2b5c877162 100644
--- a/example/src/RootNavigator.tsx
+++ b/example/src/RootNavigator.tsx
@@ -12,12 +12,13 @@ export default function Root() {
       headerMode="screen"
       screenOptions={{
         header: ({ navigation, scene, previous }) => (
-          <Appbar.Header>
+          <Appbar.Header elevated>
             {previous ? (
               <Appbar.BackAction onPress={() => navigation.goBack()} />
             ) : (navigation as any).openDrawer ? (
               <Appbar.Action
                 icon="menu"
+                isLeading
                 onPress={() =>
                   (navigation as any as DrawerNavigationProp<{}>).openDrawer()
                 }
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index 54ee93f46f..c29958b3f2 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -36,7 +36,7 @@ type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    */
   onPress?: () => void;
   /**
-   * `Available in v3.x`
+   * @supported Available in v3.x with theme version 3
    *
    * Whether it's the leading button.
    */
@@ -47,19 +47,6 @@ type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
 
 /**
  * A component used to display an action item in the appbar.
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-action-android.png" />
- *       <figcaption>Android</figcaption>
- *   </figure>
- * </div>
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-action-ios.png" />
- *       <figcaption>iOS</figcaption>
- *   </figure>
- * </div>
  *
  * ## Usage
  * ```js
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index a5581a4039..0fb54c4e6b 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -34,20 +34,6 @@ type Props = $Omit<
 /**
  * A component used to display a back button in the appbar.
  *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-backaction-android.png" />
- *     <figcaption>Android</figcaption>
- *   </figure>
- * </div>
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-backaction-ios.png" />
- *     <figcaption>iOS</figcaption>
- *   </figure>
- * </div>
- *
  * ## Usage
  * ```js
  * import * as React from 'react';
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index e2aaa7f962..98671ee333 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -16,7 +16,7 @@ import { withTheme } from '../../core/theming';
 import { white } from '../../styles/themes/v2/colors';
 
 import type { $RemoveChildren, Theme } from '../../types';
-import { AppbarModes, modeTextVariant } from './utils';
+import { modeTextVariant } from './utils';
 
 type Props = $RemoveChildren<typeof View> & {
   /**
@@ -36,12 +36,12 @@ type Props = $RemoveChildren<typeof View> & {
    */
   titleRef?: React.RefObject<Text>;
   /**
-   * @deprecated
+   * @deprecated Deprecated in v3.x
    * Text for the subtitle.
    */
   subtitle?: React.ReactNode;
   /**
-   * @deprecated
+   * @deprecated Deprecated in v3.x
    * Style for the subtitle.
    */
   subtitleStyle?: StyleProp<TextStyle>;
@@ -50,7 +50,7 @@ type Props = $RemoveChildren<typeof View> & {
    */
   onPress?: () => void;
   /**
-   * `Available in v3.x`
+   * @supported Available in v3.x with theme version 3
    *
    * Mode of the Appbar.
    * - `small` - Appbar with default height (56).
@@ -58,7 +58,7 @@ type Props = $RemoveChildren<typeof View> & {
    * - `large` - Appbar with large height (152).
    * - `center-aligned` - Appbar with default height and center-aligned title.
    */
-  mode?: AppbarModes;
+  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -69,12 +69,6 @@ type Props = $RemoveChildren<typeof View> & {
 /**
  * A component used to display a title and optional subtitle in an appbar.
  *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-content.png" />
- *   </figure>
- * </div>
- *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -122,6 +116,7 @@ const AppbarContent = ({
   return (
     <TouchableWithoutFeedback onPress={onPress} disabled={!onPress}>
       <View
+        pointerEvents="box-none"
         style={[styles.container, isV3 && modeContainerStyles[mode], style]}
         {...rest}
       >
diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index 7eb09ea777..22e13a4961 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -5,6 +5,7 @@ import {
   View,
   SafeAreaView,
   ViewStyle,
+  Platform,
 } from 'react-native';
 import { Appbar } from './Appbar';
 import shadow from '../../styles/shadow';
@@ -12,7 +13,6 @@ import { withTheme } from '../../core/theming';
 import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 import type { Theme } from '../../types';
 import {
-  AppbarModes,
   DEFAULT_APPBAR_HEIGHT,
   getAppbarColor,
   modeAppbarHeight,
@@ -35,7 +35,7 @@ type Props = React.ComponentProps<typeof Appbar> & {
    */
   children: React.ReactNode;
   /**
-   * `Available in v3.x`
+   * @supported Available in v3.x with theme version 3
    *
    * Mode of the Appbar.
    * - `small` - Appbar with default height (56).
@@ -43,7 +43,12 @@ type Props = React.ComponentProps<typeof Appbar> & {
    * - `large` - Appbar with large height (152).
    * - `center-aligned` - Appbar with default height and center-aligned title.
    */
-  mode?: AppbarModes;
+  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
+  /**
+   * @supported Available in v3.x with theme version 3
+   * Whether Appbar background should have the elevation along with primary color pigment.
+   */
+  elevated?: boolean;
   /**
    * @optional
    */
@@ -91,21 +96,20 @@ type Props = React.ComponentProps<typeof Appbar> & {
  * export default MyComponent;
  * ```
  */
-const AppbarHeader = (props: Props) => {
-  const {
-    // Don't use default props since we check it to know whether we should use SafeAreaView
-    statusBarHeight = APPROX_STATUSBAR_HEIGHT,
-    style,
-    dark,
-    mode = 'small',
-    ...rest
-  } = props;
-
+const AppbarHeader = ({
+  // Don't use default props since we check it to know whether we should use SafeAreaView
+  statusBarHeight,
+  style,
+  dark,
+  mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
+  elevated = false,
+  ...rest
+}: Props) => {
   const { isV3 } = rest.theme;
 
   const {
     height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
-    elevation = isV3 ? 0 : 4,
+    elevation = isV3 ? (elevated ? 2 : 0) : 4,
     backgroundColor: customBackground,
     zIndex = 0,
     ...restStyle
@@ -114,17 +118,22 @@ const AppbarHeader = (props: Props) => {
   const backgroundColor = getAppbarColor(
     rest.theme,
     elevation,
-    customBackground
+    customBackground,
+    elevated
   );
 
   // Let the user override the behaviour
-  const Wrapper =
-    typeof props.statusBarHeight === 'number' ? View : SafeAreaView;
+  const Wrapper = typeof statusBarHeight === 'number' ? View : SafeAreaView;
   return (
     <Wrapper
       style={
         [
-          { backgroundColor, zIndex, elevation, paddingTop: statusBarHeight },
+          {
+            backgroundColor,
+            zIndex,
+            elevation,
+            paddingTop: statusBarHeight || APPROX_STATUSBAR_HEIGHT,
+          },
           shadow(elevation),
         ] as StyleProp<ViewStyle>
       }
diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
index ebb8873299..efd2f27549 100644
--- a/src/components/Appbar/utils.ts
+++ b/src/components/Appbar/utils.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import color from 'color';
 import { StyleSheet } from 'react-native';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import AppbarContent from './AppbarContent';
@@ -13,7 +14,8 @@ export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 export const getAppbarColor = (
   theme: Theme,
   elevation: number,
-  customBackground?: ColorValue
+  customBackground?: ColorValue,
+  elevated?: boolean
 ) => {
   const { isV3, dark: isDarkTheme, mode, colors } = theme;
   const isAdaptiveMode = mode === 'adaptive';
@@ -21,7 +23,14 @@ export const getAppbarColor = (
   if (customBackground) {
     backgroundColor = customBackground;
   } else if (isV3) {
-    backgroundColor = colors.surface;
+    if (elevated) {
+      backgroundColor = color(colors.surface)
+        .mix(color(colors.primary), 0.08)
+        .rgb()
+        .string();
+    } else {
+      backgroundColor = colors.surface;
+    }
   } else if (!isV3) {
     if (isDarkTheme && isAdaptiveMode) {
       backgroundColor = overlay(elevation, colors?.surface);
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
index 3441f85250..f292c81ff3 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -367,6 +367,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
     style={
       Array [
         Object {