diff --git a/iterableapi-ui/build.gradle b/iterableapi-ui/build.gradle
index d781c17ed..46c088d41 100644
--- a/iterableapi-ui/build.gradle
+++ b/iterableapi-ui/build.gradle
@@ -34,6 +34,7 @@ dependencies {
     implementation 'com.google.android.flexbox:flexbox:3.0.0'
     implementation 'androidx.cardview:cardview:1.0.0'
     implementation "com.github.bumptech.glide:glide:4.8.0"
+    implementation 'com.google.android.material:material:1.2.0'
 
     testImplementation 'junit:junit:4.12'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
diff --git a/iterableapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedView.kt b/iterableapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedView.kt
index 1dde61e47..cec97ed48 100644
--- a/iterableapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedView.kt
+++ b/iterableapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedView.kt
@@ -7,6 +7,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
 import android.widget.ImageView
+import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.core.content.ContextCompat
 import androidx.fragment.app.Fragment
@@ -23,14 +24,14 @@ class IterableEmbeddedView(
     private var config: IterableEmbeddedViewConfig?
 ): Fragment() {
 
-    private val defaultBackgroundColor : Int by lazy  { getDefaultColor(viewType, R.color.notification_background_color, R.color.banner_background_color) }
-    private val defaultBorderColor : Int by lazy { getDefaultColor(viewType, R.color.notification_border_color, R.color.banner_border_color) }
-    private val defaultPrimaryBtnBackgroundColor: Int by lazy { getDefaultColor(viewType, R.color.white, R.color.banner_button_color) }
-    private val defaultPrimaryBtnTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.white) }
-    private val defaultSecondaryBtnBackgroundColor: Int by lazy { getDefaultColor(viewType, R.color.notification_background_color, R.color.white) }
-    private val defaultSecondaryBtnTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.banner_button_color) }
-    private val defaultTitleTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.title_text_color) }
-    private val defaultBodyTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.body_text_color) }
+    private val defaultBackgroundColor : Int by lazy  { getDefaultColor(viewType, R.color.notification_background_color, R.color.banner_background_color, R.color.banner_background_color) }
+    private val defaultBorderColor : Int by lazy { getDefaultColor(viewType, R.color.notification_border_color, R.color.banner_border_color, R.color.banner_border_color) }
+    private val defaultPrimaryBtnBackgroundColor: Int by lazy { getDefaultColor(viewType, R.color.white, R.color.white, R.color.banner_button_color) }
+    private val defaultPrimaryBtnTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.banner_button_color, R.color.white) }
+    private val defaultSecondaryBtnBackgroundColor: Int by lazy { getDefaultColor(viewType, R.color.notification_background_color, R.color.white, R.color.white) }
+    private val defaultSecondaryBtnTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.banner_button_color, R.color.banner_button_color) }
+    private val defaultTitleTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.title_text_color, R.color.title_text_color) }
+    private val defaultBodyTextColor: Int by lazy { getDefaultColor(viewType, R.color.notification_text_color, R.color.body_text_color, R.color.body_text_color) }
     private val defaultBorderWidth = 1
     private val defaultBorderCornerRadius = 8f
 
@@ -108,10 +109,6 @@ class IterableEmbeddedView(
                 else ContextCompat.getDrawable(requireContext(), R.drawable.secondary_banner_button_background) as? GradientDrawable
             secondaryBtnBackgroundDrawable?.setColor(secondaryBtnBackgroundColor)
 
-            val params = secondButton.layoutParams as FlexboxLayout.LayoutParams
-            params.leftMargin = (8 * resources.displayMetrics.density).toInt()
-            secondButton.layoutParams = params
-
             secondButton.setBackgroundDrawable(secondaryBtnBackgroundDrawable)
         }
 
@@ -184,9 +181,10 @@ class IterableEmbeddedView(
         }
     }
 
-    private fun getDefaultColor(viewType: IterableEmbeddedViewType, notificationColor: Int, bannerColor: Int): Int {
+    private fun getDefaultColor(viewType: IterableEmbeddedViewType, notificationColor: Int, cardColor: Int, bannerColor: Int): Int {
         return when (viewType) {
             IterableEmbeddedViewType.NOTIFICATION -> ContextCompat.getColor(requireContext(), notificationColor)
+            IterableEmbeddedViewType.CARD -> ContextCompat.getColor(requireContext(), cardColor)
             else -> ContextCompat.getColor(requireContext(), bannerColor)
         }
     }
diff --git a/iterableapi-ui/src/main/res/drawable/primary_card_button_background.xml b/iterableapi-ui/src/main/res/drawable/primary_card_button_background.xml
new file mode 100644
index 000000000..eb087387a
--- /dev/null
+++ b/iterableapi-ui/src/main/res/drawable/primary_card_button_background.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@color/white" />
+
+    <stroke
+        android:width="1dp"
+        android:color="@color/white" />
+
+    <corners
+        android:radius="32dp" />
+</shape>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/drawable/secondary_card_button_background.xml b/iterableapi-ui/src/main/res/drawable/secondary_card_button_background.xml
new file mode 100644
index 000000000..eb087387a
--- /dev/null
+++ b/iterableapi-ui/src/main/res/drawable/secondary_card_button_background.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@color/white" />
+
+    <stroke
+        android:width="1dp"
+        android:color="@color/white" />
+
+    <corners
+        android:radius="32dp" />
+</shape>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout-v21/banner_view.xml b/iterableapi-ui/src/main/res/layout-v21/banner_view.xml
index 289b9368a..e55e32468 100644
--- a/iterableapi-ui/src/main/res/layout-v21/banner_view.xml
+++ b/iterableapi-ui/src/main/res/layout-v21/banner_view.xml
@@ -1,94 +1,107 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
-    android:layout_marginTop="12dp"
-    android:layout_marginLeft="16dp"
+    android:layout_marginTop="8dp"
+    android:layout_marginStart="16dp"
     android:layout_marginBottom="12dp"
+    app:cardCornerRadius="8dp"
+    app:cardElevation="0dp"
     android:background="@drawable/banner_card_border"
     android:orientation="vertical">
 
-    <LinearLayout
+    <TextView
+        android:id="@+id/embedded_message_title"
+        android:layout_width="240dp"
         android:layout_height="wrap_content"
-        android:layout_width="match_parent"
-        android:layout_marginBottom="16dp" >
-
-        <LinearLayout
-            android:layout_height="wrap_content"
-            android:layout_width="wrap_content"
-            android:layout_marginEnd="16dp"
-            android:orientation="vertical">
-
-            <TextView
-                android:id="@+id/embedded_message_title"
-                android:layout_width="240dp"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="16dp"
-                android:layout_marginTop="16dp"
-                android:text=""
-                android:textSize="16sp"
-                android:textStyle="bold"
-                android:maxLines="2"
-                android:ellipsize="end" />
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="16dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textSize="16sp"
+        android:textStyle="bold"
+        app:layout_constraintEnd_toStartOf="@+id/embedded_message_image"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
-            <TextView
-                android:id="@+id/embedded_message_body"
-                android:layout_width="240dp"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="16dp"
-                android:layout_marginTop="8dp"
-                android:text=""
-                android:maxLines="3"
-                android:ellipsize="end" />
-
-        </LinearLayout>
+    <TextView
+        android:id="@+id/embedded_message_body"
+        android:layout_width="240dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        app:layout_constraintBottom_toTopOf="@+id/embedded_message_buttons_container"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/embedded_message_title"
+        app:layout_constraintVertical_bias="0.0" />
 
-        <ImageView
-            android:id="@+id/embedded_message_image"
-            android:layout_width="80dp"
-            android:layout_height="80dp"
-            android:layout_marginTop="16dp"
-            android:layout_marginBottom="16dp"
-            android:layout_marginEnd="16dp"
-            android:contentDescription="" />
+    <ImageView
+        android:id="@+id/embedded_message_image"
+        android:layout_width="80dp"
+        android:layout_height="80dp"
+        android:layout_marginTop="16dp"
+        android:layout_marginEnd="16dp"
+        android:contentDescription=""
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
-    </LinearLayout>
-
-    <com.google.android.flexbox.FlexboxLayout
-        android:layout_width="wrap_content"
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="16dp"
-        app:flexWrap="wrap"
-        app:alignContent="flex_start"
-        app:alignItems="flex_start">
+        android:layout_marginEnd="16dp"
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
 
         <Button
             android:id="@+id/embedded_message_first_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
-            android:layout_marginStart="16dp"
             android:background="@drawable/primary_banner_button_background"
+            android:ellipsize="end"
+            android:layout_marginStart="16dp"
+            android:layout_marginEnd="8dp"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
-            android:textColor="@color/white"
             android:textAllCaps="false"
-            app:cornerRadius="32dp"
-            app:layout_flexBasisPercent="50%" />
+            android:textSize="14sp"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
         <Button
             android:id="@+id/embedded_message_second_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
             android:background="@drawable/secondary_banner_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
-            android:textColor="@color/white"
             android:textAllCaps="false"
+            android:textSize="14sp"
+            android:textColor="@color/white"
             app:cornerRadius="32dp" />
 
-    </com.google.android.flexbox.FlexboxLayout>
+    </LinearLayout>
 
-</LinearLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout-v21/card_view.xml b/iterableapi-ui/src/main/res/layout-v21/card_view.xml
index 81e953393..5a94c771f 100644
--- a/iterableapi-ui/src/main/res/layout-v21/card_view.xml
+++ b/iterableapi-ui/src/main/res/layout-v21/card_view.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
     android:layout_marginTop="8dp"
     android:layout_marginLeft="16dp"
@@ -13,73 +13,104 @@
     android:background="@drawable/banner_card_border"
     android:orientation="vertical">
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/embedded_message_image"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:contentDescription=""
+        android:scaleType="centerCrop"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/embedded_message_text_container"
+        app:shapeAppearanceOverlay="@style/classCardStyle" />
 
-        <ImageView
-            android:id="@+id/embedded_message_image"
-            android:layout_width="358dp"
-            android:layout_height="230dp"
-            android:contentDescription="" />
+    <LinearLayout
+        android:id="@+id/embedded_message_text_container"
+        android:layout_width="0dp"
+        android:layout_height="100dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toTopOf="@id/embedded_message_buttons_container"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent">
 
         <TextView
             android:id="@+id/embedded_message_title"
             android:layout_width="326dp"
             android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
             android:layout_marginTop="16dp"
-            android:layout_marginLeft="16dp"
+            android:ellipsize="end"
+            android:maxLines="2"
             android:text=""
             android:textSize="16sp"
             android:textStyle="bold"
-            android:maxLines="2"
-            android:ellipsize="end" />
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/embedded_message_image" />
 
         <TextView
             android:id="@+id/embedded_message_body"
             android:layout_width="326dp"
             android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
             android:layout_marginTop="8dp"
-            android:layout_marginBottom="16dp"
-            android:layout_marginLeft="16dp"
+            android:ellipsize="end"
+            android:maxLines="2"
             android:text=""
-            android:maxLines="3"
-            android:ellipsize="end" />
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/embedded_message_title" />
 
-        <com.google.android.flexbox.FlexboxLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="16dp"
-            app:flexWrap="wrap"
-            app:alignContent="flex_start"
-            app:alignItems="flex_start">
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="8dp"
+        android:layout_marginEnd="16dp"
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
 
-            <Button
-                android:id="@+id/embedded_message_first_button"
-                android:layout_width="wrap_content"
-                android:layout_height="36dp"
-                android:layout_marginStart="16dp"
-                android:textColor="@color/white"
-                android:background="@drawable/primary_banner_button_background"
-                android:stateListAnimator="@null"
-                android:text=""
-                android:textAllCaps="false"
-                app:cornerRadius="32dp"
-                app:layout_flexBasisPercent="50%" />
+        <Button
+            android:id="@+id/embedded_message_first_button"
+            android:layout_width="wrap_content"
+            android:layout_height="36dp"
+            android:background="@drawable/primary_card_button_background"
+            android:ellipsize="end"
+            android:layout_marginStart="16dp"
+            android:layout_marginEnd="8dp"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
+            android:stateListAnimator="@null"
+            android:textAllCaps="false"
+            android:textSize="14sp"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
-            <Button
-                android:id="@+id/embedded_message_second_button"
-                android:layout_width="wrap_content"
-                android:layout_height="36dp"
-                android:textColor="@color/white"
-                android:background="@drawable/secondary_banner_button_background"
-                android:stateListAnimator="@null"
-                android:text=""
-                android:textAllCaps="false"
-                app:cornerRadius="32dp" />
-        </com.google.android.flexbox.FlexboxLayout>
+        <Button
+            android:id="@+id/embedded_message_second_button"
+            android:layout_width="wrap_content"
+            android:layout_height="36dp"
+            android:background="@drawable/secondary_card_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
+            android:stateListAnimator="@null"
+            android:textAllCaps="false"
+            android:textSize="14sp"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
     </LinearLayout>
 
-</androidx.cardview.widget.CardView>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout-v21/notification_view.xml b/iterableapi-ui/src/main/res/layout-v21/notification_view.xml
index eedfcb0e9..e27a89d45 100644
--- a/iterableapi-ui/src/main/res/layout-v21/notification_view.xml
+++ b/iterableapi-ui/src/main/res/layout-v21/notification_view.xml
@@ -1,68 +1,79 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
-    android:layout_marginTop="12dp"
+    android:layout_marginTop="8dp"
     android:layout_marginBottom="12dp"
     android:layout_marginStart="16dp"
+    app:cardCornerRadius="8dp"
+    app:cardElevation="0dp"
     android:background="@drawable/notification_view_border"
     android:orientation="vertical">
 
-    <LinearLayout
+    <TextView
+        android:id="@+id/embedded_message_title"
+        android:layout_width="326dp"
         android:layout_height="wrap_content"
-        android:layout_width="wrap_content"
-        android:layout_marginBottom="16dp"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/embedded_message_title"
-            android:layout_width="326dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="16dp"
-            android:text=""
-            android:textSize="16sp"
-            android:textColor="@color/notification_text_color"
-            android:textStyle="bold"
-            android:maxLines="2"
-            android:ellipsize="end" />
-
-        <TextView
-            android:id="@+id/embedded_message_body"
-            android:layout_width="326dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:textColor="@color/notification_text_color"
-            android:text=""
-            android:maxLines="3"
-            android:ellipsize="end" />
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="16dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textSize="16sp"
+        android:textColor="@color/notification_text_color"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"/>
 
-    </LinearLayout>
+    <TextView
+        android:id="@+id/embedded_message_body"
+        android:layout_width="326dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textColor="@color/notification_text_color"
+        app:layout_constraintBottom_toTopOf="@+id/embedded_message_buttons_container"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/embedded_message_title"
+        app:layout_constraintVertical_bias="0.0" />
 
-    <com.google.android.flexbox.FlexboxLayout
-        android:layout_width="wrap_content"
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="16dp"
-        app:flexWrap="wrap"
-        app:alignContent="flex_start"
-        app:alignItems="flex_start">
+        android:layout_marginEnd="16dp"
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
 
         <Button
             android:id="@+id/embedded_message_first_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
             android:layout_marginStart="16dp"
+            android:layout_marginEnd="8dp"
             android:textColor="@color/notification_text_color"
             android:background="@drawable/primary_notification_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
             android:textAllCaps="false"
-            app:cornerRadius="32dp"
-            app:layout_flexBasisPercent="50%" />
+            android:textSize="14sp"
+            app:cornerRadius="32dp" />
 
         <Button
             android:id="@+id/embedded_message_second_button"
@@ -70,11 +81,17 @@
             android:layout_height="36dp"
             android:textColor="@color/notification_text_color"
             android:background="@drawable/secondary_notification_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
             android:text=""
             android:textAllCaps="false"
             app:cornerRadius="32dp" />
 
-    </com.google.android.flexbox.FlexboxLayout>
+    </LinearLayout>
 
-</LinearLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout/banner_view.xml b/iterableapi-ui/src/main/res/layout/banner_view.xml
index 5ef0fd673..fff39602c 100644
--- a/iterableapi-ui/src/main/res/layout/banner_view.xml
+++ b/iterableapi-ui/src/main/res/layout/banner_view.xml
@@ -1,94 +1,106 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
-    android:layout_marginTop="12dp"
+    android:layout_marginTop="8dp"
+    android:layout_marginStart="16dp"
     android:layout_marginBottom="12dp"
+    app:cardCornerRadius="8dp"
+    app:cardElevation="0dp"
     android:background="@drawable/banner_card_border"
-    android:orientation="vertical"
-    android:layout_marginStart="16dp">
+    android:orientation="vertical">
 
-    <LinearLayout
+    <TextView
+        android:id="@+id/embedded_message_title"
+        android:layout_width="240dp"
         android:layout_height="wrap_content"
-        android:layout_width="match_parent"
-        android:layout_marginBottom="16dp">
-
-        <LinearLayout
-            android:layout_height="wrap_content"
-            android:layout_width="wrap_content"
-            android:layout_marginEnd="16dp"
-            android:orientation="vertical">
-
-            <TextView
-                android:id="@+id/embedded_message_title"
-                android:layout_width="240dp"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="16dp"
-                android:layout_marginTop="16dp"
-                android:text=""
-                android:textSize="16sp"
-                android:textStyle="bold"
-                android:maxLines="2"
-                android:ellipsize="end" />
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="16dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textSize="16sp"
+        android:textStyle="bold"
+        app:layout_constraintEnd_toStartOf="@+id/embedded_message_image"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
-            <TextView
-                android:id="@+id/embedded_message_body"
-                android:layout_width="240dp"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="16dp"
-                android:layout_marginTop="8dp"
-                android:text=""
-                android:maxLines="3"
-                android:ellipsize="end" />
-
-        </LinearLayout>
-
-        <ImageView
-            android:id="@+id/embedded_message_image"
-            android:layout_width="80dp"
-            android:layout_height="80dp"
-            android:layout_marginTop="16dp"
-            android:layout_marginBottom="16dp"
-            android:layout_marginEnd="16dp"
-            android:contentDescription="" />
+    <TextView
+        android:id="@+id/embedded_message_body"
+        android:layout_width="240dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        app:layout_constraintBottom_toTopOf="@+id/embedded_message_buttons_container"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/embedded_message_title"
+        app:layout_constraintVertical_bias="0.0" />
 
-    </LinearLayout>
+    <ImageView
+        android:id="@+id/embedded_message_image"
+        android:layout_width="80dp"
+        android:layout_height="80dp"
+        android:layout_marginTop="16dp"
+        android:layout_marginEnd="16dp"
+        android:contentDescription=""
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
-    <com.google.android.flexbox.FlexboxLayout
-        android:layout_width="wrap_content"
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="16dp"
-        app:flexWrap="wrap"
-        app:alignContent="flex_start"
-        app:alignItems="flex_start">
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
 
         <Button
             android:id="@+id/embedded_message_first_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
-            android:layout_marginStart="16dp"
             android:background="@drawable/primary_banner_button_background"
+            android:ellipsize="end"
+            android:layout_marginStart="16dp"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
-            android:textColor="@color/white"
             android:textAllCaps="false"
-            app:cornerRadius="32dp"
-            app:layout_flexBasisPercent="50%" />
+            android:textSize="14sp"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
         <Button
             android:id="@+id/embedded_message_second_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
+            android:layout_marginEnd="16dp"
             android:background="@drawable/secondary_banner_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
-            android:textColor="@color/white"
             android:textAllCaps="false"
+            android:textSize="14sp"
+            android:textColor="@color/white"
             app:cornerRadius="32dp" />
 
-    </com.google.android.flexbox.FlexboxLayout>
+    </LinearLayout>
 
-</LinearLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout/card_view.xml b/iterableapi-ui/src/main/res/layout/card_view.xml
index 097f4cff0..6208ff53c 100644
--- a/iterableapi-ui/src/main/res/layout/card_view.xml
+++ b/iterableapi-ui/src/main/res/layout/card_view.xml
@@ -1,85 +1,109 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
     android:layout_marginTop="8dp"
+    android:layout_marginLeft="16dp"
     android:layout_marginBottom="12dp"
     app:cardCornerRadius="8dp"
     app:cardElevation="0dp"
     android:background="@drawable/banner_card_border"
-    android:orientation="vertical"
-    android:layout_marginStart="16dp">
+    android:orientation="vertical">
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/embedded_message_image"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:contentDescription=""
+        android:scaleType="centerCrop"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/embedded_message_text_container"
+        app:shapeAppearanceOverlay="@style/classCardStyle" />
 
-        <ImageView
-            android:id="@+id/embedded_message_image"
-            android:layout_width="358dp"
-            android:layout_height="230dp"
-            android:contentDescription="" />
+    <LinearLayout
+        android:id="@+id/embedded_message_text_container"
+        android:layout_width="0dp"
+        android:layout_height="100dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toTopOf="@id/embedded_message_buttons_container"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent">
 
         <TextView
             android:id="@+id/embedded_message_title"
             android:layout_width="326dp"
             android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
             android:layout_marginTop="16dp"
+            android:ellipsize="end"
+            android:maxLines="2"
             android:text=""
             android:textSize="16sp"
             android:textStyle="bold"
-            android:layout_marginStart="16dp"
-            android:maxLines="2"
-            android:ellipsize="end" />
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/embedded_message_image" />
 
         <TextView
             android:id="@+id/embedded_message_body"
             android:layout_width="326dp"
             android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
             android:layout_marginTop="8dp"
-            android:layout_marginBottom="16dp"
+            android:ellipsize="end"
+            android:maxLines="2"
             android:text=""
-            android:layout_marginStart="16dp"
-            android:maxLines="3"
-            android:ellipsize="end" />
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/embedded_message_title" />
 
-        <com.google.android.flexbox.FlexboxLayout
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="16dp"
-            app:flexWrap="wrap"
-            app:alignContent="flex_start"
-            app:alignItems="flex_start">
+    </LinearLayout>
 
-            <Button
-                android:id="@+id/embedded_message_first_button"
-                android:layout_width="wrap_content"
-                android:layout_height="36dp"
-                android:layout_marginStart="16dp"
-                android:textColor="@color/white"
-                android:background="@drawable/primary_banner_button_background"
-                android:stateListAnimator="@null"
-                android:text=""
-                android:textAllCaps="false"
-                app:cornerRadius="32dp"
-                app:layout_flexBasisPercent="50%" />
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="8dp"
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <Button
+            android:id="@+id/embedded_message_first_button"
+            android:layout_width="0dp"
+            android:layout_height="36dp"
+            android:layout_marginStart="16dp"
+            android:layout_marginEnd="8dp"
+            android:background="@drawable/primary_card_button_background"
+            android:ellipsize="end"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:singleLine="true"
+            android:stateListAnimator="@null"
+            android:textAllCaps="false"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
-            <Button
-                android:id="@+id/embedded_message_second_button"
-                android:layout_width="wrap_content"
-                android:layout_height="36dp"
-                android:textColor="@color/white"
-                android:background="@drawable/secondary_banner_button_background"
-                android:stateListAnimator="@null"
-                android:text=""
-                android:textAllCaps="false"
-                app:cornerRadius="32dp" />
-        </com.google.android.flexbox.FlexboxLayout>
+        <Button
+            android:id="@+id/embedded_message_second_button"
+            android:layout_width="0dp"
+            android:layout_height="36dp"
+            android:layout_marginEnd="16dp"
+            android:layout_weight="1"
+            android:background="@drawable/secondary_card_button_background"
+            android:ellipsize="end"
+            android:singleLine="true"
+            android:stateListAnimator="@null"
+            android:textAllCaps="false"
+            android:textColor="@color/white"
+            app:cornerRadius="32dp" />
 
     </LinearLayout>
 
-</androidx.cardview.widget.CardView>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/layout/notification_view.xml b/iterableapi-ui/src/main/res/layout/notification_view.xml
index eedfcb0e9..7fe225f43 100644
--- a/iterableapi-ui/src/main/res/layout/notification_view.xml
+++ b/iterableapi-ui/src/main/res/layout/notification_view.xml
@@ -1,55 +1,59 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="358dp"
-    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:layout_gravity="center_vertical"
-    android:layout_marginTop="12dp"
+    android:layout_marginTop="8dp"
     android:layout_marginBottom="12dp"
     android:layout_marginStart="16dp"
+    app:cardCornerRadius="8dp"
+    app:cardElevation="0dp"
     android:background="@drawable/notification_view_border"
     android:orientation="vertical">
 
-    <LinearLayout
+    <TextView
+        android:id="@+id/embedded_message_title"
+        android:layout_width="326dp"
         android:layout_height="wrap_content"
-        android:layout_width="wrap_content"
-        android:layout_marginBottom="16dp"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/embedded_message_title"
-            android:layout_width="326dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="16dp"
-            android:text=""
-            android:textSize="16sp"
-            android:textColor="@color/notification_text_color"
-            android:textStyle="bold"
-            android:maxLines="2"
-            android:ellipsize="end" />
-
-        <TextView
-            android:id="@+id/embedded_message_body"
-            android:layout_width="326dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
-            android:textColor="@color/notification_text_color"
-            android:text=""
-            android:maxLines="3"
-            android:ellipsize="end" />
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="16dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textSize="16sp"
+        android:textColor="@color/notification_text_color"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"/>
 
-    </LinearLayout>
+    <TextView
+        android:id="@+id/embedded_message_body"
+        android:layout_width="326dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:text=""
+        android:textColor="@color/notification_text_color"
+        app:layout_constraintBottom_toTopOf="@+id/embedded_message_buttons_container"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/embedded_message_title"
+        app:layout_constraintVertical_bias="0.0" />
 
-    <com.google.android.flexbox.FlexboxLayout
-        android:layout_width="wrap_content"
+    <LinearLayout
+        android:id="@+id/embedded_message_buttons_container"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="16dp"
-        app:flexWrap="wrap"
-        app:alignContent="flex_start"
-        app:alignItems="flex_start">
+        android:orientation="horizontal"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
 
         <Button
             android:id="@+id/embedded_message_first_button"
@@ -58,23 +62,35 @@
             android:layout_marginStart="16dp"
             android:textColor="@color/notification_text_color"
             android:background="@drawable/primary_notification_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
-            android:text=""
             android:textAllCaps="false"
-            app:cornerRadius="32dp"
-            app:layout_flexBasisPercent="50%" />
+            android:textSize="14sp"
+            app:cornerRadius="32dp" />
 
         <Button
             android:id="@+id/embedded_message_second_button"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
+            android:layout_marginEnd="16dp"
             android:textColor="@color/notification_text_color"
             android:background="@drawable/secondary_notification_button_background"
+            android:ellipsize="end"
+            android:paddingTop="8dp"
+            android:paddingBottom="8dp"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:singleLine="true"
             android:stateListAnimator="@null"
             android:text=""
             android:textAllCaps="false"
             app:cornerRadius="32dp" />
 
-    </com.google.android.flexbox.FlexboxLayout>
+    </LinearLayout>
 
-</LinearLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/iterableapi-ui/src/main/res/values/styles.xml b/iterableapi-ui/src/main/res/values/styles.xml
new file mode 100644
index 000000000..5edf53567
--- /dev/null
+++ b/iterableapi-ui/src/main/res/values/styles.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="classCardStyle">
+        <item name="cornerSizeTopLeft">8dp</item>
+        <item name="cornerSizeTopRight">8dp</item>
+        <item name="cornerSizeBottomRight">0dp</item>
+        <item name="cornerSizeBottomLeft">0dp</item>
+    </style>
+</resources>
\ No newline at end of file