diff --git a/example/src/components/Embedded/Embedded.tsx b/example/src/components/Embedded/Embedded.tsx
index e90c4de43..c603e210e 100644
--- a/example/src/components/Embedded/Embedded.tsx
+++ b/example/src/components/Embedded/Embedded.tsx
@@ -16,7 +16,7 @@ export const Embedded = () => {
     IterableEmbeddedMessage[]
   >([]);
   const [selectedViewType, setSelectedViewType] =
-    useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Notification);
+    useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Banner);
 
   const syncEmbeddedMessages = useCallback(() => {
     Iterable.embeddedManager.syncMessages();
@@ -30,20 +30,6 @@ export const Embedded = () => {
     });
   }, []);
 
-  const startEmbeddedSession = useCallback(() => {
-    console.log(
-      'startEmbeddedSession --> check android/ios logs to check if it worked'
-    );
-    Iterable.embeddedManager.startSession();
-  }, []);
-
-  const endEmbeddedSession = useCallback(() => {
-    console.log(
-      'endEmbeddedSession --> check android/ios logs to check if it worked'
-    );
-    Iterable.embeddedManager.endSession();
-  }, []);
-
   const getEmbeddedMessages = useCallback(() => {
     getPlacementIds()
       .then((ids: number[]) => Iterable.embeddedManager.getMessages(ids))
@@ -53,38 +39,6 @@ export const Embedded = () => {
       });
   }, [getPlacementIds]);
 
-  // const startEmbeddedImpression = useCallback(
-  //   (message: IterableEmbeddedMessage) => {
-  //     console.log(`startEmbeddedImpression`, message);
-  //     Iterable.embeddedManager.startImpression(
-  //       message.metadata.messageId,
-  //       // TODO: check if this should be changed to a number, as per the type
-  //       Number(message.metadata.placementId)
-  //     );
-  //   },
-  //   []
-  // );
-
-  // const pauseEmbeddedImpression = useCallback(
-  //   (message: IterableEmbeddedMessage) => {
-  //     console.log(`pauseEmbeddedImpression:`, message);
-  //     Iterable.embeddedManager.pauseImpression(message.metadata.messageId);
-  //   },
-  //   []
-  // );
-
-  // const handleClick = useCallback(
-  //   (
-  //     message: IterableEmbeddedMessage,
-  //     buttonId: string | null,
-  //     action?: IterableAction | null
-  //   ) => {
-  //     console.log(`handleClick:`, message);
-  //     Iterable.embeddedManager.handleClick(message, buttonId, action);
-  //   },
-  //   []
-  // );
-
   return (
     <View style={styles.container}>
       <Text style={styles.text}>EMBEDDED</Text>
@@ -161,12 +115,6 @@ export const Embedded = () => {
         <TouchableOpacity style={styles.button} onPress={getPlacementIds}>
           <Text style={styles.buttonText}>Get placement ids</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={startEmbeddedSession}>
-          <Text style={styles.buttonText}>Start session</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={endEmbeddedSession}>
-          <Text style={styles.buttonText}>End session</Text>
-        </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
           <Text style={styles.buttonText}>Get messages</Text>
         </TouchableOpacity>
diff --git a/src/embedded/components/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner.tsx
deleted file mode 100644
index 56b4ca32b..000000000
--- a/src/embedded/components/IterableEmbeddedBanner.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { View, Text } from 'react-native';
-
-import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
-
-export const IterableEmbeddedBanner = ({
-  config,
-  message,
-  onButtonClick = () => {},
-}: IterableEmbeddedComponentProps) => {
-  console.log(`🚀 > IterableEmbeddedBanner > config:`, config);
-  console.log(`🚀 > IterableEmbeddedBanner > message:`, message);
-  console.log(`🚀 > IterableEmbeddedBanner > onButtonClick:`, onButtonClick);
-
-  return (
-    <View>
-      <Text>IterableEmbeddedBanner</Text>
-    </View>
-  );
-};
diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts
new file mode 100644
index 000000000..09b97619f
--- /dev/null
+++ b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts
@@ -0,0 +1,88 @@
+import { StyleSheet, Platform } from 'react-native';
+import {
+  embeddedMediaImageBackgroundColors,
+  embeddedMediaImageBorderColors,
+} from '../../constants/embeddedViewDefaults';
+
+// See https://support.iterable.com/hc/en-us/articles/23230946708244-Out-of-the-Box-Views-for-Embedded-Messages#banners
+export const IMAGE_HEIGHT = Platform.OS === 'android' ? 80 : 100;
+export const IMAGE_WIDTH = Platform.OS === 'android' ? 80 : 100;
+
+export const styles = StyleSheet.create({
+  body: {
+    alignSelf: 'stretch',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+  },
+  bodyContainer: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    paddingTop: 4,
+  },
+  button: {
+    borderRadius: 32,
+    gap: 8,
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+    width: '100%',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  container: {
+    alignItems: 'flex-start',
+    borderStyle: 'solid',
+    boxShadow:
+      '0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.08)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    justifyContent: 'center',
+    padding: 16,
+    width: '100%',
+  },
+  mediaContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  mediaImage: {
+    backgroundColor: embeddedMediaImageBackgroundColors.banner,
+    borderColor: embeddedMediaImageBorderColors.banner,
+    borderRadius: 6,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    height: IMAGE_HEIGHT,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    width: IMAGE_WIDTH,
+  },
+  textContainer: {
+    alignSelf: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    flexShrink: 1,
+    gap: 4,
+    width: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    lineHeight: 16,
+    paddingBottom: 4,
+  },
+});
diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx
new file mode 100644
index 000000000..194e17e0a
--- /dev/null
+++ b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx
@@ -0,0 +1,124 @@
+import {
+  Image,
+  Text,
+  TouchableOpacity,
+  View,
+  type TextStyle,
+  type ViewStyle,
+  PixelRatio,
+  Pressable,
+} from 'react-native';
+
+import { IterableEmbeddedViewType } from '../../enums';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
+import {
+  styles,
+  IMAGE_HEIGHT,
+  IMAGE_WIDTH,
+} from './IterableEmbeddedBanner.styles';
+
+/**
+ * TODO: figure out how default action works.
+ */
+
+export const IterableEmbeddedBanner = ({
+  config,
+  message,
+  onButtonClick = () => {},
+  onMessageClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  const { parsedStyles, media, handleButtonClick, handleMessageClick } =
+    useEmbeddedView(IterableEmbeddedViewType.Banner, {
+      message,
+      config,
+      onButtonClick,
+      onMessageClick,
+    });
+
+  const buttons = message.elements?.buttons ?? [];
+
+  return (
+    <Pressable onPress={() => handleMessageClick()}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: parsedStyles.backgroundColor,
+            borderColor: parsedStyles.borderColor,
+            borderRadius: parsedStyles.borderCornerRadius,
+            borderWidth: parsedStyles.borderWidth,
+          } as ViewStyle,
+        ]}
+      >
+        {}
+        <View
+          // eslint-disable-next-line react-native/no-inline-styles
+          style={[styles.bodyContainer, { gap: media.shouldShow ? 16 : 0 }]}
+        >
+          <View style={styles.textContainer}>
+            <Text
+              style={[
+                styles.title,
+                { color: parsedStyles.titleTextColor } as TextStyle,
+              ]}
+            >
+              {message.elements?.title}
+            </Text>
+            <Text
+              style={[
+                styles.body,
+                { color: parsedStyles.bodyTextColor } as TextStyle,
+              ]}
+            >
+              {message.elements?.body}
+            </Text>
+          </View>
+          {media.shouldShow && (
+            <View style={styles.mediaContainer}>
+              <Image
+                source={{
+                  uri: media.url as string,
+                  width: PixelRatio.getPixelSizeForLayoutSize(IMAGE_WIDTH),
+                  height: PixelRatio.getPixelSizeForLayoutSize(IMAGE_HEIGHT),
+                }}
+                style={styles.mediaImage}
+                alt={media.caption as string}
+              />
+            </View>
+          )}
+        </View>
+        {buttons.length > 0 && (
+          <View style={styles.buttonContainer}>
+            {buttons.map((button, index) => {
+              const backgroundColor =
+                index === 0
+                  ? parsedStyles.primaryBtnBackgroundColor
+                  : parsedStyles.secondaryBtnBackgroundColor;
+              const textColor =
+                index === 0
+                  ? parsedStyles.primaryBtnTextColor
+                  : parsedStyles.secondaryBtnTextColor;
+              return (
+                <TouchableOpacity
+                  style={[styles.button, { backgroundColor } as ViewStyle]}
+                  onPress={() => handleButtonClick(button)}
+                  key={button.id}
+                >
+                  <Text
+                    style={[
+                      styles.buttonText,
+                      { color: textColor } as TextStyle,
+                    ]}
+                  >
+                    {button.title}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+};
diff --git a/src/embedded/components/IterableEmbeddedBanner/index.ts b/src/embedded/components/IterableEmbeddedBanner/index.ts
new file mode 100644
index 000000000..bd574a288
--- /dev/null
+++ b/src/embedded/components/IterableEmbeddedBanner/index.ts
@@ -0,0 +1 @@
+export * from './IterableEmbeddedBanner';
diff --git a/src/embedded/components/IterableEmbeddedView.tsx b/src/embedded/components/IterableEmbeddedView.tsx
index 770e4a777..fa76f584f 100644
--- a/src/embedded/components/IterableEmbeddedView.tsx
+++ b/src/embedded/components/IterableEmbeddedView.tsx
@@ -4,7 +4,7 @@ import { IterableEmbeddedViewType } from '../enums/IterableEmbeddedViewType';
 
 import { IterableEmbeddedBanner } from './IterableEmbeddedBanner';
 import { IterableEmbeddedCard } from './IterableEmbeddedCard';
-import { IterableEmbeddedNotification } from './IterableEmbeddedNotification/IterableEmbeddedNotification';
+import { IterableEmbeddedNotification } from './IterableEmbeddedNotification';
 import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
 
 /**
diff --git a/src/embedded/components/index.ts b/src/embedded/components/index.ts
index edf3ab6a0..22725d80c 100644
--- a/src/embedded/components/index.ts
+++ b/src/embedded/components/index.ts
@@ -1,4 +1,4 @@
-export * from './IterableEmbeddedBanner';
+export * from './IterableEmbeddedBanner/IterableEmbeddedBanner';
 export * from './IterableEmbeddedCard';
 export * from './IterableEmbeddedNotification/IterableEmbeddedNotification';
 export * from './IterableEmbeddedView';