diff --git a/ts/components/ui/BannerErrorState.tsx b/ts/components/ui/BannerErrorState.tsx
index 62b081e6883..1cf9ad3ad74 100644
--- a/ts/components/ui/BannerErrorState.tsx
+++ b/ts/components/ui/BannerErrorState.tsx
@@ -67,7 +67,7 @@ export type BannerErrorStateProps = BaseBannerErrorStateProps &
  */
 export const BannerErrorState = ({
   viewRef,
-  icon,
+  icon = "warningFilled",
   label,
   actionText,
   onPress,
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx
index 40003d9990b..9246d3f5e9d 100644
--- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx
+++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsDiscountItem.tsx
@@ -7,7 +7,7 @@ import CGN_ROUTES from "../../navigation/routes";
 import { CgnDetailsParamsList } from "../../navigation/params";
 import { useIODispatch } from "../../../../../store/hooks";
 import { selectMerchantDiscount } from "../../store/actions/merchants";
-import { CgnModuleDiscount } from "./CgnModuleDiscount";
+import { ModuleCgnDiscount } from "./ModuleCgnDiscount";
 
 type Props = {
   discount: Discount;
@@ -38,7 +38,7 @@ export const CgnMerchantDiscountItem: React.FunctionComponent<Props> = ({
 
   return (
     <View style={styles.container}>
-      <CgnModuleDiscount onPress={onDiscountPress} discount={discount} />
+      <ModuleCgnDiscount onPress={onDiscountPress} discount={discount} />
     </View>
   );
 };
diff --git a/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx
similarity index 66%
rename from ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx
rename to ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx
index 22bf2b746fb..06266d234ef 100644
--- a/ts/features/bonus/cgn/components/merchants/CgnModuleDiscount.tsx
+++ b/ts/features/bonus/cgn/components/merchants/ModuleCgnDiscount.tsx
@@ -1,14 +1,14 @@
 import {
   Badge,
   H6,
-  HSpacer,
+  HStack,
   IOColors,
   IOModuleStyles,
   IOStyles,
   Icon,
   Tag,
-  VSpacer,
-  useIOExperimentalDesign,
+  VStack,
+  useIOTheme,
   useScaleAnimation
 } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
@@ -21,7 +21,7 @@ import I18n from "../../../../../i18n";
 import { getCategorySpecs } from "../../utils/filters";
 import { isValidDiscount, normalizedDiscountPercentage } from "./utils";
 
-type Props = {
+export type ModuleCgnDiscount = {
   onPress: () => void;
   discount: Discount;
 };
@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
     borderWidth: 1
   }
 });
+
 type CategoryTagProps = {
   category: ProductCategory;
 };
@@ -47,24 +48,19 @@ export const CategoryTag = ({ category }: CategoryTagProps) => {
   const categorySpecs = getCategorySpecs(category);
 
   return O.isSome(categorySpecs) ? (
-    <>
-      <View>
-        <Tag
-          text={I18n.t(categorySpecs.value.nameKey)}
-          variant="custom"
-          icon={{
-            name: categorySpecs.value.icon,
-            color: "lightGrey"
-          }}
-        />
-        <VSpacer size={4} />
-      </View>
-      <HSpacer size={4} />
-    </>
+    <Tag
+      text={I18n.t(categorySpecs.value.nameKey)}
+      variant="custom"
+      icon={{
+        name: categorySpecs.value.icon,
+        color: "lightGrey"
+      }}
+    />
   ) : null;
 };
-export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
-  const { isExperimental } = useIOExperimentalDesign();
+
+export const ModuleCgnDiscount = ({ onPress, discount }: ModuleCgnDiscount) => {
+  const theme = useIOTheme();
   const { onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("medium");
 
@@ -92,37 +88,37 @@ export const CgnModuleDiscount = ({ onPress, discount }: Props) => {
             { alignItems: "center", justifyContent: "space-between" }
           ]}
         >
-          <View style={IOStyles.flex}>
-            <View style={[IOStyles.flex, IOStyles.row]}>
-              {discount.isNew && (
-                <>
+          <VStack space={8} style={{ flexShrink: 1 }}>
+            {(discount.discount || discount.isNew) && (
+              <HStack space={8} style={{ flexWrap: "wrap" }}>
+                {discount.isNew && (
                   <Badge
                     variant="purple"
                     text={I18n.t("bonus.cgn.merchantsList.news")}
                   />
-                  <HSpacer size={8} />
-                </>
-              )}
-              {isValidDiscount(discount.discount) && (
-                <Badge
-                  variant="purple"
-                  outline
-                  text={`-${normalizedDiscountPercentage(discount.discount)}%`}
-                />
-              )}
-            </View>
-            <VSpacer size={8} />
+                )}
+                {isValidDiscount(discount.discount) && (
+                  <Badge
+                    variant="purple"
+                    outline
+                    text={`-${normalizedDiscountPercentage(
+                      discount.discount
+                    )}%`}
+                  />
+                )}
+              </HStack>
+            )}
+
             <H6>{discount.name}</H6>
-            <VSpacer size={8} />
-            <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+            <HStack space={4} style={{ flexWrap: "wrap" }}>
               {discount.productCategories.map(categoryKey => (
                 <CategoryTag key={categoryKey} category={categoryKey} />
               ))}
-            </View>
-          </View>
+            </HStack>
+          </VStack>
           <Icon
             name="chevronRightListItem"
-            color={isExperimental ? "blueIO-500" : "blue"}
+            color={theme["interactiveElem-default"]}
             size={24}
           />
         </View>
diff --git a/ts/features/bonus/cgn/components/merchants/___tests___/CgnModuleDiscount.test.tsx b/ts/features/bonus/cgn/components/merchants/___tests___/ModuleCgnDiscount.test.tsx
similarity index 87%
rename from ts/features/bonus/cgn/components/merchants/___tests___/CgnModuleDiscount.test.tsx
rename to ts/features/bonus/cgn/components/merchants/___tests___/ModuleCgnDiscount.test.tsx
index d70d95b2cef..4411cb19ce2 100644
--- a/ts/features/bonus/cgn/components/merchants/___tests___/CgnModuleDiscount.test.tsx
+++ b/ts/features/bonus/cgn/components/merchants/___tests___/ModuleCgnDiscount.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import { ProductCategoryEnum } from "../../../../../../../definitions/cgn/merchants/ProductCategory";
 import I18n from "../../../../../../i18n";
-import { CgnModuleDiscount } from "../CgnModuleDiscount";
+import { ModuleCgnDiscount } from "../ModuleCgnDiscount";
 
 describe("CgnModuleDiscount", () => {
   const discount: Discount = {
@@ -27,7 +27,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should render correctly", () => {
     const { getByText } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
 
     expect(getByText(I18n.t("bonus.cgn.merchantsList.news"))).toBeTruthy();
@@ -37,7 +37,7 @@ describe("CgnModuleDiscount", () => {
 
   it("should call onPress when pressed", () => {
     const { getByRole } = render(
-      <CgnModuleDiscount onPress={onPressMock} discount={discount} />
+      <ModuleCgnDiscount onPress={onPressMock} discount={discount} />
     );
     fireEvent.press(getByRole("button"));
     expect(onPressMock).toHaveBeenCalled();
diff --git a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx
index 3174b6f1a96..1fa27a9b3f7 100644
--- a/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx
+++ b/ts/features/bonus/cgn/components/merchants/discount/CgnDiscountHeader.tsx
@@ -1,6 +1,7 @@
 import {
   Badge,
   H3,
+  HStack,
   IOColors,
   IOStyles,
   VSpacer
@@ -10,7 +11,7 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Discount } from "../../../../../../../definitions/cgn/merchants/Discount";
 import I18n from "../../../../../../i18n";
-import { CategoryTag } from "../CgnModuleDiscount";
+import { CategoryTag } from "../ModuleCgnDiscount";
 import { isValidDiscount, normalizedDiscountPercentage } from "../utils";
 
 type CgnDiscountHeaderProps = {
@@ -65,11 +66,11 @@ export const CgnDiscountHeader = ({
         )}
         <H3>{name}</H3>
         <VSpacer size={12} />
-        <View style={[{ flexWrap: "wrap" }, IOStyles.row]}>
+        <HStack space={4} style={{ flexWrap: "wrap" }}>
           {productCategories.map(categoryKey => (
             <CategoryTag key={categoryKey} category={categoryKey} />
           ))}
-        </View>
+        </HStack>
       </View>
     </View>
   );
diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
index 55af8532d4a..ae7184e4a69 100644
--- a/ts/features/design-system/DesignSystem.tsx
+++ b/ts/features/design-system/DesignSystem.tsx
@@ -1,8 +1,8 @@
 import {
+  BodySmall,
   Divider,
-  H2,
+  H3,
   IOVisualCostants,
-  BodySmall,
   ListItemNav,
   VSpacer,
   VStack,
@@ -109,7 +109,9 @@ export const DesignSystem = () => {
     section: { title: string; description?: string };
   }) => (
     <VStack space={4}>
-      <H2 color={theme["textHeading-default"]}>{title}</H2>
+      <H3 weight="Bold" color={theme["textHeading-default"]}>
+        {title}
+      </H3>
       {description && (
         <BodySmall weight={"Regular"} color={theme["textBody-tertiary"]}>
           {description}
diff --git a/ts/features/design-system/core/DSAdvice.tsx b/ts/features/design-system/core/DSAdvice.tsx
index c5f090a79eb..81b6bc0f9b6 100644
--- a/ts/features/design-system/core/DSAdvice.tsx
+++ b/ts/features/design-system/core/DSAdvice.tsx
@@ -10,6 +10,7 @@ import * as React from "react";
 import { Alert } from "react-native";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { BannerErrorState } from "../../../components/ui/BannerErrorState";
 
 const onLinkPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -35,6 +36,11 @@ export const DSAdvice = () => {
           {renderFeatureInfo()}
         </VStack>
 
+        <VStack space={sectionTitleMargin}>
+          <H4 color={theme["textHeading-default"]}>BannerErrorState</H4>
+          {renderBannerErrorState()}
+        </VStack>
+
         <VStack space={sectionTitleMargin}>
           <H4 color={theme["textHeading-default"]}>Banner</H4>
           {renderBanner()}
@@ -44,6 +50,26 @@ export const DSAdvice = () => {
   );
 };
 
+const renderBannerErrorState = () => (
+  <VStack space={componentMargin}>
+    <DSComponentViewerBox name="BannerErrorState, default icon">
+      <BannerErrorState
+        label="Il caricamento delle ricevute è fallito."
+        actionText={"Riprova"}
+        onPress={onLinkPress}
+      />
+    </DSComponentViewerBox>
+    <DSComponentViewerBox name="BannerErrorState, custom icon">
+      <BannerErrorState
+        icon="errorFilled"
+        label="Il caricamento delle ricevute è fallito."
+        actionText={"Riprova"}
+        onPress={onLinkPress}
+      />
+    </DSComponentViewerBox>
+  </VStack>
+);
+
 const renderFeatureInfo = () => (
   <VStack space={componentMargin}>
     <DSComponentViewerBox name="FeatureInfo · with Icon">
diff --git a/ts/features/design-system/core/DSColors.tsx b/ts/features/design-system/core/DSColors.tsx
index 141b3ffb784..bea71d79901 100644
--- a/ts/features/design-system/core/DSColors.tsx
+++ b/ts/features/design-system/core/DSColors.tsx
@@ -1,7 +1,7 @@
 import {
+  BodySmall,
   H3,
   H6,
-  IOColorGradients,
   IOColors,
   IOColorsExtra,
   IOColorsLegacy,
@@ -10,7 +10,6 @@ import {
   IOColorsTints,
   IOThemeDark,
   IOThemeLight,
-  BodySmall,
   VStack,
   hexToRgba,
   themeStatusColorsDarkMode,
@@ -19,13 +18,11 @@ import {
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { ColorValue, Dimensions, StyleSheet, Text, View } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
 import themeVariables from "../../../theme/variables";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
 const macroSectionMargin = 48;
-const gradientItemGutter = 16;
 const sectionTitleMargin = 16;
 const colorItemGutter = 32;
 const colorItemPadding = 8;
@@ -36,13 +33,6 @@ const colorItemBorderDarkMode = hexToRgba(IOColors.white, 0.25);
 const colorPillBg = hexToRgba(IOColors.black, 0.2);
 
 const styles = StyleSheet.create({
-  gradientItemsWrapper: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "flex-start",
-    marginLeft: (gradientItemGutter / 2) * -1,
-    marginRight: (gradientItemGutter / 2) * -1
-  },
   colorItemsWrapper: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -93,12 +83,6 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 24,
     borderBottomRightRadius: 24
   },
-  gradientWrapper: {
-    width: "50%",
-    justifyContent: "flex-start",
-    paddingHorizontal: gradientItemGutter / 2,
-    marginBottom: 16
-  },
   colorItem: {
     width: "100%",
     padding: colorItemPadding,
@@ -112,15 +96,6 @@ const styles = StyleSheet.create({
   colorItemDarkMode: {
     borderColor: colorItemBorderDarkMode
   },
-  gradientItem: {
-    aspectRatio: 2 / 1,
-    borderRadius: 8,
-    padding: 12,
-    alignItems: "flex-end",
-    justifyContent: "space-between",
-    borderColor: colorItemBorderLightMode,
-    borderWidth: 1
-  },
   colorPill: {
     overflow: "hidden",
     color: IOColors.white,
@@ -285,17 +260,6 @@ export const DSColors = () => {
           </VStack>
         </VStack>
 
-        {/* GRADIENTS */}
-        <VStack space={sectionTitleMargin}>
-          <H3 color={theme["textHeading-default"]}>Gradients</H3>
-
-          <View style={styles.gradientItemsWrapper}>
-            {Object.entries(IOColorGradients).map(([name, colorValues]) => (
-              <GradientBox key={name} name={name} colors={colorValues} />
-            ))}
-          </View>
-        </VStack>
-
         {/* LEGACY */}
         <VStack space={sectionTitleMargin}>
           <View>
@@ -372,41 +336,6 @@ const ColorBox = ({
   );
 };
 
-type GradientBoxProps = {
-  name: string;
-  colors: Array<string>;
-};
-
-const GradientBox = ({ name, colors }: GradientBoxProps) => {
-  const theme = useIOTheme();
-  const [first, last] = colors;
-
-  return (
-    <View style={styles.gradientWrapper}>
-      <LinearGradient
-        colors={colors}
-        useAngle={true}
-        angle={180}
-        style={styles.gradientItem}
-      >
-        {first && <Text style={styles.colorPill}>{first}</Text>}
-        {last && <Text style={styles.colorPill}>{last}</Text>}
-      </LinearGradient>
-      {name && (
-        <Text
-          style={{
-            marginTop: 4,
-            fontSize: 10,
-            color: IOColors[theme["textBody-tertiary"]]
-          }}
-        >
-          {name}
-        </Text>
-      )}
-    </View>
-  );
-};
-
 type SmallCapsTitleProps = {
   title: string;
   darkMode?: boolean;
diff --git a/ts/features/design-system/core/DSListItems.tsx b/ts/features/design-system/core/DSListItems.tsx
index 57ba689ac01..637ee7ebc60 100644
--- a/ts/features/design-system/core/DSListItems.tsx
+++ b/ts/features/design-system/core/DSListItems.tsx
@@ -1,4 +1,3 @@
-import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import * as React from "react";
 
 import {
@@ -17,14 +16,16 @@ import {
   useIOTheme
 } from "@pagopa/io-app-design-system";
 import { Alert } from "react-native";
+import I18n from "../../../i18n";
 
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 
-import { ProductCategoryEnum } from "../../../../definitions/cgn/merchants/ProductCategory";
-import { CgnMerchantDiscountItem } from "../../bonus/cgn/components/merchants/CgnMerchantsDiscountItem";
+import { ListItemMessage } from "../../messages/components/Home/DS/ListItemMessage";
+import { ListItemMessageSkeleton } from "../../messages/components/Home/DS/ListItemMessageSkeleton";
 import { getBadgePropsByTransactionStatus } from "../../payments/common/utils";
-import { DesignSystemScreen } from "../components/DesignSystemScreen";
 import { ListItemTransactionStatus } from "../../payments/common/utils/types";
+import { ListItemSearchInstitution } from "../../services/common/components/ListItemSearchInstitution";
+import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -34,6 +35,8 @@ const onCopyButtonPress = () => {
   Alert.alert("Copied!", "Value copied");
 };
 
+const cdnPath = "https://assets.cdn.io.pagopa.it/logos/organizations/";
+
 const sectionTitleMargin = 16;
 const sectionMargin = 48;
 const componentMargin = 32;
@@ -49,6 +52,11 @@ export const DSListItems = () => {
           {renderListItemNav()}
         </VStack>
 
+        <VStack space={sectionTitleMargin}>
+          <H4 color={theme["textHeading-default"]}>ListItemMessage</H4>
+          {renderListItemMessage()}
+        </VStack>
+
         <VStack space={sectionTitleMargin}>
           <H4 color={theme["textHeading-default"]}>ListItemInfoCopy</H4>
           {renderListItemInfoCopy()}
@@ -70,31 +78,15 @@ export const DSListItems = () => {
         </VStack>
 
         <VStack space={sectionTitleMargin}>
-          <H4 color={theme["textHeading-default"]}>ListItemTransaction</H4>
-          {renderListItemTransaction()}
+          <H4 color={theme["textHeading-default"]}>
+            ListItemSearchInstitution
+          </H4>
+          {renderListItemSearchInstitution()}
         </VStack>
 
         <VStack space={sectionTitleMargin}>
-          <H4 color={theme["textHeading-default"]}>Specific</H4>
-          <VStack space={24}>
-            <DSComponentViewerBox name="CgnMerchantDiscountItem">
-              <CgnMerchantDiscountItem
-                discount={{
-                  name: "Small Rubber Chips" as NonEmptyString,
-                  id: "28201" as NonEmptyString,
-                  description: undefined,
-                  discount: 25,
-                  discountUrl: "https://localhost",
-                  endDate: new Date(),
-                  isNew: false,
-                  productCategories: [
-                    ProductCategoryEnum.cultureAndEntertainment
-                  ],
-                  startDate: new Date()
-                }}
-              />
-            </DSComponentViewerBox>
-          </VStack>
+          <H4 color={theme["textHeading-default"]}>ListItemTransaction</H4>
+          {renderListItemTransaction()}
         </VStack>
       </VStack>
     </DesignSystemScreen>
@@ -160,6 +152,20 @@ const renderListItemNav = () => (
         hideChevron
       />
     </DSComponentViewerBox>
+    <DSComponentViewerBox name="ListItemNav, with image chevron">
+      <ListItemNav
+        value={"Comune di Ischia"}
+        avatarProps={{ logoUri: { uri: `${cdnPath}643280639.png` } }}
+        onPress={onButtonPress}
+      />
+      <Divider />
+      <ListItemNav
+        value={"Comune di Ischia"}
+        description="This is a description"
+        avatarProps={{ logoUri: { uri: `${cdnPath}643280639.png` } }}
+        onPress={onButtonPress}
+      />
+    </DSComponentViewerBox>
     <DSComponentViewerBox name="ListItemNavAlert">
       <ListItemNavAlert value={"Value"} onPress={onButtonPress} />
       <Divider />
@@ -181,6 +187,99 @@ const renderListItemNav = () => (
   </VStack>
 );
 
+const listItemMessageSample: ListItemMessage = {
+  formattedDate: "09 dic",
+  isRead: false,
+  messageTitle: "Il tuo appuntamento",
+  organizationName: "Ministero dell'Interno",
+  serviceName: "Carta d'Identità Elettronica",
+  accessibilityLabel: "Leggi il messaggio inviato dal Ministero dell'Interno",
+  serviceLogos: [{ uri: `${cdnPath}80215430580.png` }],
+  onLongPress: () => {
+    Alert.alert("Long press");
+  },
+  onPress: () => {
+    Alert.alert("Pressed");
+  }
+};
+
+const renderListItemMessage = () => (
+  <VStack space={componentMargin}>
+    <DSComponentViewerBox name="ListItemMessageSkeleton">
+      <ListItemMessageSkeleton accessibilityLabel="Loading message…" />
+    </DSComponentViewerBox>
+
+    <DSComponentViewerBox name="ListItemMessage, read/unread">
+      <ListItemMessage {...listItemMessageSample} isRead={false} />
+      <Divider />
+      <ListItemMessage {...listItemMessageSample} isRead={true} />
+    </DSComponentViewerBox>
+
+    <DSComponentViewerBox name="ListItemMessage, selected">
+      <ListItemMessage
+        {...listItemMessageSample}
+        isRead={true}
+        selected={true}
+      />
+    </DSComponentViewerBox>
+
+    <DSComponentViewerBox name="ListItemMessage, with badge">
+      <ListItemMessage
+        {...listItemMessageSample}
+        serviceName="Richiesta di cittadinanza"
+        messageTitle="Hai un nuovo avviso di pagamento"
+        tag={{ variant: "success", text: I18n.t("messages.badge.paid") }}
+        isRead={true}
+      />
+      <Divider />
+      <ListItemMessage
+        {...listItemMessageSample}
+        serviceName="Richiesta di cittadinanza"
+        messageTitle="Hai acquisito la cittadinanza italiana"
+        tag={{
+          variant: "legalMessage",
+          text: I18n.t("features.pn.details.badge.legalValue")
+        }}
+        isRead={true}
+      />
+    </DSComponentViewerBox>
+
+    <DSComponentViewerBox name="ListItemMessage, avatar undefined & double">
+      <ListItemMessage
+        {...listItemMessageSample}
+        organizationName="Comune di Isolabona"
+        serviceName="Servizi cimiteriali"
+        messageTitle="Hai un nuovo avviso di pagamento"
+        serviceLogos={undefined}
+        isRead={true}
+      />
+      <Divider />
+      <ListItemMessage
+        {...listItemMessageSample}
+        avatarDouble={true}
+        organizationName={"Comune di Milano"}
+        serviceName="Tassa sui rifiuti (TARI)"
+        messageTitle="Hai un pagamento in scadenza"
+        serviceLogos={[{ uri: `${cdnPath}1199250158.png` }]}
+        isRead={true}
+      />
+    </DSComponentViewerBox>
+
+    <DSComponentViewerBox name="ListItemMessage, stress test">
+      <ListItemMessage
+        {...listItemMessageSample}
+        organizationName={"Nome dell'ente molto molto molto lungo"}
+        serviceName="Nome del servizio mooolto lungo"
+        messageTitle={
+          "Titolo del messaggio scritto da una persona davvero prolissa"
+        }
+        serviceLogos={[{ uri: `${cdnPath}5779711000.png` }]}
+        isRead={true}
+      />
+    </DSComponentViewerBox>
+  </VStack>
+);
+
 const renderListItemInfoCopy = () => (
   <DSComponentViewerBox name="ListItemInfoCopy">
     <ListItemInfoCopy
@@ -391,10 +490,29 @@ const renderListItemHeader = () => (
   </VStack>
 );
 
+/* LIST ITEM SEARCH INSTITUTION */
+
+const renderListItemSearchInstitution = () => (
+  <DSComponentViewerBox name="ListItemSearchInstitution">
+    <ListItemSearchInstitution
+      value={"Comune di Ischia"}
+      numberOfLines={2}
+      onPress={onButtonPress}
+      avatarProps={{ source: { uri: `${cdnPath}643280639.png` } }}
+    />
+    <Divider />
+    <ListItemSearchInstitution
+      value={"Comune di Isolabona"}
+      numberOfLines={2}
+      onPress={onButtonPress}
+      avatarProps={{ source: {} }}
+    />
+  </DSComponentViewerBox>
+);
+
 /* LIST ITEM TRANSACTION */
 
 /* Mock assets */
-const cdnPath = "https://assets.cdn.io.pagopa.it/logos/organizations/";
 const organizationLogoURI = {
   imageSource: `${cdnPath}82003830161.png`,
   name: "Comune di Milano"
diff --git a/ts/features/design-system/core/DSLogos.tsx b/ts/features/design-system/core/DSLogos.tsx
index b6ba74d7e44..17275b21fe6 100644
--- a/ts/features/design-system/core/DSLogos.tsx
+++ b/ts/features/design-system/core/DSLogos.tsx
@@ -23,6 +23,7 @@ import {
 import * as React from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { LogoPaymentExtended } from "../../../components/ui/LogoPaymentExtended";
+import { AvatarDouble } from "../../messages/components/Home/DS/AvatarDouble";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import {
   DSLogoPaymentViewerBox,
@@ -199,6 +200,12 @@ const renderAvatar = () => (
         </HStack>
       </ScrollView>
     </DSComponentViewerBox>
+
+    <DSComponentViewerBox name={`AvatarDouble`}>
+      <AvatarDouble
+        backgroundLogoUri={{ uri: organizationsURIs[1].imageSource }}
+      />
+    </DSComponentViewerBox>
   </VStack>
 );
 
diff --git a/ts/features/design-system/core/DSModules.tsx b/ts/features/design-system/core/DSModules.tsx
index 914d8edb82d..c111b29e006 100644
--- a/ts/features/design-system/core/DSModules.tsx
+++ b/ts/features/design-system/core/DSModules.tsx
@@ -11,9 +11,12 @@ import {
   VStack,
   useIOTheme
 } from "@pagopa/io-app-design-system";
+import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import * as React from "react";
 import { Alert, ImageSourcePropType } from "react-native";
+import { ProductCategoryEnum } from "../../../../definitions/cgn/merchants/ProductCategory";
 import CgnLogo from "../../../../img/bonus/cgn/cgn_logo.png";
+import { ModuleCgnDiscount } from "../../bonus/cgn/components/merchants/ModuleCgnDiscount";
 import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
@@ -75,6 +78,11 @@ export const DSModules = () => {
           {renderModuleSummary()}
         </VStack>
 
+        <VStack space={sectionTitleMargin}>
+          <H4 color={theme["textHeading-default"]}>ModuleCgnDiscount</H4>
+          {renderModuleCgnDiscount()}
+        </VStack>
+
         <VStack space={sectionTitleMargin}>
           <H4 color={theme["textHeading-default"]}>ModuleIDP</H4>
           {renderModuleIDP()}
@@ -276,6 +284,52 @@ const renderModuleSummary = () => (
   </VStack>
 );
 
+const mockModuleCgnDiscountData = {
+  name: "Small Rubber Chips" as NonEmptyString,
+  id: "28201" as NonEmptyString,
+  description: undefined,
+  discount: undefined,
+  discountUrl: "https://localhost",
+  endDate: new Date(),
+  isNew: false,
+  productCategories: [ProductCategoryEnum.cultureAndEntertainment],
+  startDate: new Date()
+};
+
+const renderModuleCgnDiscount = () => (
+  <VStack space={componentMargin}>
+    <DSComponentViewerBox name="CgnMerchantDiscountItem, basic configuration">
+      <ModuleCgnDiscount
+        onPress={onButtonPress}
+        discount={{ ...mockModuleCgnDiscountData }}
+      />
+    </DSComponentViewerBox>
+    <DSComponentViewerBox name="CgnMerchantDiscountItem, with discount indicator">
+      <ModuleCgnDiscount
+        onPress={onButtonPress}
+        discount={{
+          ...mockModuleCgnDiscountData,
+          discount: 25
+        }}
+      />
+    </DSComponentViewerBox>
+    <DSComponentViewerBox name="CgnMerchantDiscountItem, new variant">
+      <ModuleCgnDiscount
+        onPress={onButtonPress}
+        discount={{
+          ...mockModuleCgnDiscountData,
+          isNew: true,
+          discount: 25,
+          productCategories: [
+            ProductCategoryEnum.cultureAndEntertainment,
+            ProductCategoryEnum.health
+          ]
+        }}
+      />
+    </DSComponentViewerBox>
+  </VStack>
+);
+
 const mockIDPProviderItem = {
   id: "posteid",
   name: "Poste ID",
diff --git a/ts/features/design-system/core/DSTypography.tsx b/ts/features/design-system/core/DSTypography.tsx
index 5563710fdc8..5a92bf0a8c1 100644
--- a/ts/features/design-system/core/DSTypography.tsx
+++ b/ts/features/design-system/core/DSTypography.tsx
@@ -106,7 +106,7 @@ const H4Row = () => {
   const theme = useIOTheme();
 
   return (
-    <HStack space={16}>
+    <HStack space={16} style={{ flexWrap: "wrap" }}>
       <H4>Header H4</H4>
       <H4 color={theme["interactiveElem-default"]}>Header H4</H4>
       <View
@@ -122,7 +122,7 @@ const H5Row = () => {
   const theme = useIOTheme();
 
   return (
-    <HStack space={16}>
+    <HStack space={16} style={{ flexWrap: "wrap" }}>
       <H5>Header H5</H5>
       <H5 color={theme["textHeading-tertiary"]}>Header H5</H5>
       <H5 color={theme["interactiveElem-default"]}>Header H5</H5>
@@ -134,7 +134,7 @@ const H6Row = () => {
   const theme = useIOTheme();
 
   return (
-    <HStack space={16}>
+    <HStack space={16} style={{ flexWrap: "wrap" }}>
       <H6>Header H6</H6>
       <H6 color={theme["textHeading-tertiary"]}>Header H6</H6>
       <H6 color={theme["interactiveElem-default"]}>Header H6</H6>
@@ -146,7 +146,7 @@ const ButtonTextRow = () => {
   const theme = useIOTheme();
 
   return (
-    <HStack space={16}>
+    <HStack space={16} style={{ flexWrap: "wrap" }}>
       <ButtonText color={theme["textBody-tertiary"]}>ButtonText</ButtonText>
       <ButtonText color={theme["interactiveElem-default"]}>
         ButtonText
@@ -164,7 +164,7 @@ const CaptionRow = () => {
   const theme = useIOTheme();
 
   return (
-    <HStack space={16}>
+    <HStack space={16} style={{ flexWrap: "wrap" }}>
       <Caption>Caption</Caption>
       <Caption color={theme["textBody-tertiary"]}>Caption</Caption>
       <Caption color={theme["interactiveElem-default"]}>Caption</Caption>
@@ -222,7 +222,7 @@ export const BodySmallRow = () => {
           Body small SB asLink
         </BodySmall>
       </HStack>
-      <HStack space={typographicStyleMargin}>
+      <HStack space={typographicStyleMargin} style={{ flexWrap: "wrap" }}>
         <BodySmall weight="Regular">Body small Regular</BodySmall>
         <BodySmall weight="Regular" color={"red"}>
           Body small Regular
diff --git a/ts/features/messages/components/Home/DS/DoubleAvatar.tsx b/ts/features/messages/components/Home/DS/AvatarDouble.tsx
similarity index 94%
rename from ts/features/messages/components/Home/DS/DoubleAvatar.tsx
rename to ts/features/messages/components/Home/DS/AvatarDouble.tsx
index 3509fa4bcda..eb1275a5228 100644
--- a/ts/features/messages/components/Home/DS/DoubleAvatar.tsx
+++ b/ts/features/messages/components/Home/DS/AvatarDouble.tsx
@@ -17,7 +17,7 @@ import {
 } from "@pagopa/io-app-design-system";
 import { addCacheTimestampToUri } from "../../../../../utils/image";
 
-type DoubleAvatarProps = {
+type AvatarDoubleProps = {
   backgroundLogoUri?:
     | ImageRequireSource
     | ImageURISource
@@ -74,12 +74,12 @@ const getImageState = (
 };
 
 /**
- * DoubleAvatar component is used to display the background logo of an organization, with a fixed pagoPA icon on top. It accepts the following props:
+ * `AvatarDouble` component is used to display the background logo of an organization, with a fixed pagoPA icon on top. It accepts the following props:
  * - `backgroundLogoUri`: the uri of the image to display. If not provided, a placeholder icon will be displayed. It can be a single uri or an array of uris, in which case the first one that is available will be used.
- * @param DoubleAvatarProps
+ * @param AvatarDoubleProps
  * @returns
  */
-export const DoubleAvatar = ({ backgroundLogoUri }: DoubleAvatarProps) => {
+export const AvatarDouble = ({ backgroundLogoUri }: AvatarDoubleProps) => {
   const theme = useIOTheme();
   const indexValue = React.useRef<number>(0);
 
diff --git a/ts/features/messages/components/Home/DS/CustomPressableListItemBase.tsx b/ts/features/messages/components/Home/DS/CustomPressableListItemBase.tsx
deleted file mode 100644
index 82e72558d48..00000000000
--- a/ts/features/messages/components/Home/DS/CustomPressableListItemBase.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  IOColors,
-  IOListItemStyles,
-  useListItemAnimation,
-  WithTestID
-} from "@pagopa/io-app-design-system";
-import * as React from "react";
-import { Pressable } from "react-native";
-import Animated from "react-native-reanimated";
-
-export type PressableBaseProps = WithTestID<
-  Pick<
-    React.ComponentProps<typeof Pressable>,
-    | "onPress"
-    | "onLongPress"
-    | "accessibilityLabel"
-    | "accessibilityHint"
-    | "accessibilityState"
-    | "accessibilityRole"
-  > & { minHeight?: number; selected?: boolean }
->;
-
-export const CustomPressableListItemBase = ({
-  onPress,
-  onLongPress,
-  testID,
-  children,
-  accessibilityRole,
-  minHeight,
-  selected,
-  ...props
-}: React.PropsWithChildren<PressableBaseProps>) => {
-  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
-    useListItemAnimation();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      testID={testID}
-      accessible={true}
-      onLongPress={onLongPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onTouchEnd={onPressOut}
-      accessibilityRole={accessibilityRole || "button"}
-      style={[
-        {
-          backgroundColor: selected ? IOColors["blueIO-50"] : undefined
-        },
-        minHeight ? { minHeight } : {}
-      ]}
-      {...props}
-    >
-      <Animated.View
-        style={[
-          IOListItemStyles.listItem,
-          !selected ? backgroundAnimatedStyle : undefined,
-          { flexGrow: 1, justifyContent: "center" }
-        ]}
-      >
-        <Animated.View
-          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
-        >
-          {children}
-        </Animated.View>
-      </Animated.View>
-    </Pressable>
-  );
-};
diff --git a/ts/features/messages/components/Home/DS/ListItemMessage.tsx b/ts/features/messages/components/Home/DS/ListItemMessage.tsx
new file mode 100644
index 00000000000..fdc0941645a
--- /dev/null
+++ b/ts/features/messages/components/Home/DS/ListItemMessage.tsx
@@ -0,0 +1,226 @@
+import {
+  AnimatedMessageCheckbox,
+  Avatar,
+  BodySmall,
+  H6,
+  HStack,
+  IOColors,
+  IOListItemStyles,
+  IOStyles,
+  IOVisualCostants,
+  Tag,
+  useIOTheme,
+  useListItemAnimation,
+  WithTestID
+} from "@pagopa/io-app-design-system";
+import React, { ComponentProps } from "react";
+import { ImageURISource, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import Svg, { Circle } from "react-native-svg";
+import I18n from "../../../../../i18n";
+import { AvatarDouble } from "./AvatarDouble";
+
+export const ListItemMessageStandardHeight = 95;
+export const ListItemMessageEnhancedHeight = 133;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    paddingHorizontal: 16
+  },
+  organizationContainer: {
+    flexDirection: "row"
+  },
+  messageReadContainer: {
+    justifyContent: "center",
+    marginLeft: 8
+  },
+  serviceNameAndMessageTitleContainer: {
+    flexDirection: "row"
+  },
+  serviceLogoAndSelectionContainer: {
+    justifyContent: "center"
+  },
+  serviceLogoContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    height: IOVisualCostants.avatarSizeSmall,
+    width: IOVisualCostants.avatarSizeSmall
+  },
+  textContainer: { ...IOStyles.flex, marginLeft: 8 }
+});
+
+type ListItemMessageTag = {
+  text: string;
+  variant: Extract<Tag["variant"], "legalMessage" | "success">;
+};
+
+export type ListItemMessage = WithTestID<{
+  accessibilityLabel: string;
+  tag?: ListItemMessageTag;
+  avatarDouble?: boolean;
+  formattedDate: string;
+  isRead: boolean;
+  messageTitle: string;
+  onLongPress: () => void;
+  onPress: () => void;
+  organizationName: string;
+  selected?: boolean;
+  serviceLogos?: ReadonlyArray<ImageURISource>;
+  serviceName: string;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    | "onPress"
+    | "onLongPress"
+    | "accessibilityLabel"
+    | "accessibilityHint"
+    | "accessibilityState"
+    | "accessibilityRole"
+  >;
+
+type UnreadBadgeProps = {
+  color?: IOColors;
+  width?: number;
+};
+
+const UnreadBadge = ({ color, width = 14 }: UnreadBadgeProps) => (
+  <Svg width={width} height={width}>
+    <Circle
+      cx={"50%"}
+      cy={"50%"}
+      r={width / 2}
+      fill={color ?? IOColors["blueIO-500"]}
+    />
+  </Svg>
+);
+
+export const ListItemMessage = ({
+  accessibilityLabel,
+  accessibilityRole,
+  tag,
+  avatarDouble,
+  formattedDate,
+  isRead,
+  messageTitle,
+  onLongPress,
+  onPress,
+  organizationName,
+  serviceName,
+  selected,
+  serviceLogos,
+  testID
+}: ListItemMessage) => {
+  const theme = useIOTheme();
+
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
+      accessibilityRole={accessibilityRole || "button"}
+      accessibilityLabel={accessibilityLabel}
+      style={{
+        backgroundColor: selected ? IOColors["blueIO-50"] : undefined,
+        minHeight: tag
+          ? ListItemMessageEnhancedHeight
+          : ListItemMessageStandardHeight
+      }}
+    >
+      <Animated.View
+        style={[
+          IOListItemStyles.listItem,
+          !selected ? backgroundAnimatedStyle : undefined,
+          { flexGrow: 1, justifyContent: "center" }
+        ]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
+        >
+          <View style={styles.container}>
+            <View style={styles.serviceLogoAndSelectionContainer}>
+              <View
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                style={styles.serviceLogoContainer}
+              >
+                {avatarDouble ? (
+                  <AvatarDouble backgroundLogoUri={serviceLogos} />
+                ) : (
+                  <Avatar logoUri={serviceLogos} size="small" />
+                )}
+                <View
+                  style={[
+                    StyleSheet.absoluteFill,
+                    {
+                      pointerEvents: "none"
+                    }
+                  ]}
+                >
+                  <AnimatedMessageCheckbox checked={selected} />
+                </View>
+              </View>
+            </View>
+            <View style={styles.textContainer}>
+              <View style={styles.organizationContainer}>
+                {/* We use 'flexGrow: 1, flexShrink: 1' instead of 'flex: 1'
+                in order to keep a consistent styling approach between
+                react and react-native (on react-native, 'flex: 1' does
+                something similar to 'flex-grow') */}
+                <H6
+                  numberOfLines={1}
+                  color={theme["textBody-default"]}
+                  style={{ flexGrow: 1, flexShrink: 1 }}
+                >
+                  {organizationName}
+                </H6>
+                <BodySmall
+                  color={theme["textBody-tertiary"]}
+                  weight="Regular"
+                  style={{ marginLeft: 8 }}
+                >
+                  {formattedDate}
+                </BodySmall>
+              </View>
+              <View style={styles.serviceNameAndMessageTitleContainer}>
+                <BodySmall numberOfLines={2} style={IOStyles.flex}>
+                  <BodySmall weight="Semibold">{`${serviceName} · `}</BodySmall>
+                  <BodySmall weight="Regular">{messageTitle}</BodySmall>
+                </BodySmall>
+                {!isRead && (
+                  <View style={styles.messageReadContainer}>
+                    <UnreadBadge />
+                  </View>
+                )}
+              </View>
+              {tag && (
+                /* We add a `View` because we need to re-arrange block elements using
+               `VStack` and/or `HStack` */
+                <View style={{ marginTop: 8 }}>
+                  <HStack space={8}>
+                    <Tag text={tag.text} variant={tag.variant} />
+                    {tag.variant === "legalMessage" && (
+                      <Tag
+                        variant="attachment"
+                        iconAccessibilityLabel={I18n.t(
+                          "features.pn.details.attachmentsSection.title"
+                        )}
+                      />
+                    )}
+                  </HStack>
+                </View>
+              )}
+            </View>
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+};
diff --git a/ts/features/messages/components/Home/DS/MessageListItemSkeleton.tsx b/ts/features/messages/components/Home/DS/ListItemMessageSkeleton.tsx
similarity index 89%
rename from ts/features/messages/components/Home/DS/MessageListItemSkeleton.tsx
rename to ts/features/messages/components/Home/DS/ListItemMessageSkeleton.tsx
index 13f376cdf39..b91e632a14e 100644
--- a/ts/features/messages/components/Home/DS/MessageListItemSkeleton.tsx
+++ b/ts/features/messages/components/Home/DS/ListItemMessageSkeleton.tsx
@@ -1,14 +1,16 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import Placeholder from "rn-placeholder";
 import {
   IOColors,
   IOStyles,
   IOVisualCostants,
   WithTestID
 } from "@pagopa/io-app-design-system";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Placeholder from "rn-placeholder";
+import { ListItemMessageStandardHeight } from "./ListItemMessage";
 
-export const SkeletonHeight = 95 + StyleSheet.hairlineWidth;
+export const SkeletonHeight =
+  ListItemMessageStandardHeight + StyleSheet.hairlineWidth;
 
 const styles = StyleSheet.create({
   container: {
@@ -39,13 +41,13 @@ const styles = StyleSheet.create({
   }
 });
 
-type MessageListItemSkeletonProps = WithTestID<{
+type ListItemMessageSkeletonProps = WithTestID<{
   accessibilityLabel: string;
 }>;
 
-export const MessageListItemSkeleton = ({
+export const ListItemMessageSkeleton = ({
   accessibilityLabel
-}: MessageListItemSkeletonProps) => (
+}: ListItemMessageSkeletonProps) => (
   <View accessibilityLabel={accessibilityLabel} style={styles.container}>
     <View style={styles.serviceLogo}>
       <Placeholder.Box
diff --git a/ts/features/messages/components/Home/DS/MessageListItem.tsx b/ts/features/messages/components/Home/DS/MessageListItem.tsx
deleted file mode 100644
index 40f986a871c..00000000000
--- a/ts/features/messages/components/Home/DS/MessageListItem.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-  AnimatedMessageCheckbox,
-  Avatar,
-  H6,
-  HSpacer,
-  IOColors,
-  IOStyles,
-  IOVisualCostants,
-  BodySmall,
-  Tag,
-  useIOTheme,
-  WithTestID
-} from "@pagopa/io-app-design-system";
-import React from "react";
-import { ImageURISource, StyleSheet, View } from "react-native";
-import Svg, { Circle } from "react-native-svg";
-import I18n from "../../../../../i18n";
-import { CustomPressableListItemBase } from "./CustomPressableListItemBase";
-import { DoubleAvatar } from "./DoubleAvatar";
-
-export const StandardHeight = 95;
-export const EnhancedHeight = 133;
-
-const styles = StyleSheet.create({
-  badgeContainer: { flexDirection: "row", marginTop: 8 },
-  container: {
-    flexDirection: "row",
-    paddingHorizontal: 16
-  },
-  organizationContainer: {
-    flexDirection: "row"
-  },
-  messageReadContainer: {
-    justifyContent: "center",
-    marginLeft: 8
-  },
-  serviceNameAndMessageTitleContainer: {
-    flexDirection: "row"
-  },
-  serviceLogoAndSelectionContainer: {
-    justifyContent: "center"
-  },
-  serviceLogoContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    height: IOVisualCostants.avatarSizeSmall,
-    width: IOVisualCostants.avatarSizeSmall
-  },
-  textContainer: { ...IOStyles.flex, marginLeft: 8 }
-});
-
-type MessageListItemProps = WithTestID<{
-  accessibilityLabel: string;
-  badgeText?: string;
-  badgeVariant?: "legalMessage" | "success";
-  doubleAvatar?: boolean;
-  formattedDate: string;
-  isRead: boolean;
-  messageTitle: string;
-  onLongPress: () => void;
-  onPress: () => void;
-  organizationName: string;
-  selected?: boolean;
-  serviceLogos?: ReadonlyArray<ImageURISource>;
-  serviceName: string;
-}>;
-
-type BadgeComponentProps = {
-  color?: IOColors;
-  width?: number;
-};
-
-const BadgeComponent = ({ color, width = 14 }: BadgeComponentProps) => (
-  <Svg width={width} height={width}>
-    <Circle
-      cx={"50%"}
-      cy={"50%"}
-      r={width / 2}
-      fill={color ?? IOColors["blueIO-500"]}
-    />
-  </Svg>
-);
-
-export const MessageListItem = ({
-  accessibilityLabel,
-  badgeText,
-  badgeVariant,
-  doubleAvatar,
-  formattedDate,
-  isRead,
-  messageTitle,
-  onLongPress,
-  onPress,
-  organizationName,
-  serviceName,
-  selected,
-  serviceLogos,
-  testID
-}: MessageListItemProps) => {
-  const theme = useIOTheme();
-
-  return (
-    <CustomPressableListItemBase
-      onPress={onPress}
-      onLongPress={onLongPress}
-      selected={selected}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
-      minHeight={badgeText && badgeVariant ? EnhancedHeight : StandardHeight}
-    >
-      <View style={styles.container}>
-        <View style={styles.serviceLogoAndSelectionContainer}>
-          <View
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            style={styles.serviceLogoContainer}
-          >
-            {doubleAvatar ? (
-              <DoubleAvatar backgroundLogoUri={serviceLogos} />
-            ) : (
-              <Avatar logoUri={serviceLogos} size="small" />
-            )}
-            <View
-              style={[
-                StyleSheet.absoluteFill,
-                {
-                  pointerEvents: "none"
-                }
-              ]}
-            >
-              <AnimatedMessageCheckbox checked={selected} />
-            </View>
-          </View>
-        </View>
-        <View style={styles.textContainer}>
-          <View style={styles.organizationContainer}>
-            {/* We use 'flexGrow: 1, flexShrink: 1' instead of 'flex: 1'
-                in order to keep a consistent styling approach between
-                react and react-native (on react-native, 'flex: 1' does
-                something similar to 'flex-grow') */}
-            <H6
-              numberOfLines={1}
-              color={theme["textBody-default"]}
-              style={{ flexGrow: 1, flexShrink: 1 }}
-            >
-              {organizationName}
-            </H6>
-            <BodySmall
-              color={theme["textBody-tertiary"]}
-              weight="Regular"
-              style={{ marginLeft: 8 }}
-            >
-              {formattedDate}
-            </BodySmall>
-          </View>
-          <View style={styles.serviceNameAndMessageTitleContainer}>
-            <BodySmall numberOfLines={2} style={IOStyles.flex}>
-              <BodySmall weight="Semibold">{`${serviceName} · `}</BodySmall>
-              <BodySmall weight="Regular">{messageTitle}</BodySmall>
-            </BodySmall>
-            {!isRead && (
-              <View style={styles.messageReadContainer}>
-                <BadgeComponent />
-              </View>
-            )}
-          </View>
-          {badgeText && badgeVariant && (
-            <View style={styles.badgeContainer}>
-              <Tag text={badgeText} variant={badgeVariant} />
-              {badgeVariant === "legalMessage" && (
-                <>
-                  <HSpacer size={8} />
-                  <Tag
-                    variant="attachment"
-                    iconAccessibilityLabel={I18n.t(
-                      "features.pn.details.attachmentsSection.title"
-                    )}
-                  />
-                </>
-              )}
-            </View>
-          )}
-        </View>
-      </View>
-    </CustomPressableListItemBase>
-  );
-};
diff --git a/ts/features/messages/components/Home/Footer.tsx b/ts/features/messages/components/Home/Footer.tsx
index 2d3d5000013..4bae8e24178 100644
--- a/ts/features/messages/components/Home/Footer.tsx
+++ b/ts/features/messages/components/Home/Footer.tsx
@@ -1,9 +1,9 @@
 import React from "react";
+import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
 import { shouldShowFooterListComponentSelector } from "../../store/reducers/allPaginated";
 import { MessageListCategory } from "../../types/messageListCategory";
-import I18n from "../../../../i18n";
-import { MessageListItemSkeleton } from "./DS/MessageListItemSkeleton";
+import { ListItemMessageSkeleton } from "./DS/ListItemMessageSkeleton";
 
 type FooterProps = {
   category: MessageListCategory;
@@ -17,6 +17,6 @@ export const Footer = ({ category }: FooterProps) => {
     return null;
   }
   return (
-    <MessageListItemSkeleton accessibilityLabel={I18n.t("messages.loading")} />
+    <ListItemMessageSkeleton accessibilityLabel={I18n.t("messages.loading")} />
   );
 };
diff --git a/ts/features/messages/components/Home/MessageList.tsx b/ts/features/messages/components/Home/MessageList.tsx
index 4230643c2c5..7f7f012a8ab 100644
--- a/ts/features/messages/components/Home/MessageList.tsx
+++ b/ts/features/messages/components/Home/MessageList.tsx
@@ -20,9 +20,9 @@ import {
 import { UIMessage } from "../../types";
 import { MessageListCategory } from "../../types/messageListCategory";
 import {
-  MessageListItemSkeleton,
+  ListItemMessageSkeleton,
   SkeletonHeight
-} from "./DS/MessageListItemSkeleton";
+} from "./DS/ListItemMessageSkeleton";
 import { EmptyList } from "./EmptyList";
 import { Footer } from "./Footer";
 import {
@@ -32,7 +32,7 @@ import {
   LayoutInfo,
   trackMessageListEndReachedIfAllowed
 } from "./homeUtils";
-import { WrappedMessageListItem } from "./WrappedMessageListItem";
+import { WrappedListItemMessage } from "./WrappedListItemMessage";
 
 const styles = StyleSheet.create({
   contentContainer: {
@@ -127,13 +127,13 @@ export const MessageList = React.forwardRef<FlatList, MessageListProps>(
         renderItem={({ index, item }) => {
           if (typeof item === "number") {
             return (
-              <MessageListItemSkeleton
+              <ListItemMessageSkeleton
                 accessibilityLabel={I18n.t("messages.loading")}
               />
             );
           } else {
             return (
-              <WrappedMessageListItem
+              <WrappedListItemMessage
                 index={index}
                 message={item}
                 source={category}
diff --git a/ts/features/messages/components/Home/WrappedMessageListItem.tsx b/ts/features/messages/components/Home/WrappedListItemMessage.tsx
similarity index 86%
rename from ts/features/messages/components/Home/WrappedMessageListItem.tsx
rename to ts/features/messages/components/Home/WrappedListItemMessage.tsx
index faf69968ba1..46cfe2378ca 100644
--- a/ts/features/messages/components/Home/WrappedMessageListItem.tsx
+++ b/ts/features/messages/components/Home/WrappedListItemMessage.tsx
@@ -30,19 +30,19 @@ import {
   accessibilityLabelForMessageItem,
   minDelayBetweenNavigationMilliseconds
 } from "./homeUtils";
-import { MessageListItem } from "./DS/MessageListItem";
+import { ListItemMessage } from "./DS/ListItemMessage";
 
-type WrappedMessageListItemProps = {
+type WrappedListItemMessage = {
   index: number;
   message: UIMessage;
   source: MessageListCategory | "SEARCH";
 };
 
-export const WrappedMessageListItem = ({
+export const WrappedListItemMessage = ({
   index,
   message,
   source
-}: WrappedMessageListItemProps) => {
+}: WrappedListItemMessage) => {
   const dispatch = useIODispatch();
   const navigation = useIONavigation();
   const store = useIOStore();
@@ -59,7 +59,7 @@ export const WrappedMessageListItem = ({
   );
 
   const messageCategoryTag = message.category.tag;
-  const doubleAvatar = messageCategoryTag === PaymentTagEnum.PAYMENT;
+  const avatarDouble = messageCategoryTag === PaymentTagEnum.PAYMENT;
   const serviceLogoUriSources = useMemo(
     () => logoForService(serviceId, organizationFiscalCode),
     [serviceId, organizationFiscalCode]
@@ -73,19 +73,22 @@ export const WrappedMessageListItem = ({
     message.createdAt,
     I18n.t("messages.yesterday")
   );
+
   const isRead = message.isRead;
-  const badgeText =
-    messageCategoryTag === SENDTagEnum.PN
-      ? I18n.t("features.pn.details.badge.legalValue")
-      : isPaymentMessageWithPaidNotice
-      ? I18n.t("messages.badge.paid")
-      : undefined;
-  const badgeVariant =
+
+  const tag: ListItemMessage["tag"] =
     messageCategoryTag === SENDTagEnum.PN
-      ? "legalMessage"
+      ? {
+          variant: "legalMessage",
+          text: I18n.t("features.pn.details.badge.legalValue")
+        }
       : isPaymentMessageWithPaidNotice
-      ? "success"
+      ? {
+          variant: "success",
+          text: I18n.t("messages.badge.paid")
+        }
       : undefined;
+
   const accessibilityLabel = useMemo(
     () => accessibilityLabelForMessageItem(message, isSelected),
     [isSelected, message]
@@ -157,11 +160,10 @@ export const WrappedMessageListItem = ({
   ]);
 
   return (
-    <MessageListItem
+    <ListItemMessage
       accessibilityLabel={accessibilityLabel}
-      badgeText={badgeText}
-      badgeVariant={badgeVariant}
-      doubleAvatar={doubleAvatar}
+      tag={tag}
+      avatarDouble={avatarDouble}
       formattedDate={messageDate}
       isRead={isRead}
       messageTitle={messageTitle}
@@ -177,9 +179,9 @@ export const WrappedMessageListItem = ({
 };
 
 export const isInboxOrArchiveSource = (
-  source: WrappedMessageListItemProps["source"]
+  source: WrappedListItemMessage["source"]
 ) => source === "ARCHIVE" || isInboxSource(source);
-export const isInboxSource = (source: WrappedMessageListItemProps["source"]) =>
+export const isInboxSource = (source: WrappedListItemMessage["source"]) =>
   source === "INBOX";
-export const isSearchSource = (source: WrappedMessageListItemProps["source"]) =>
+export const isSearchSource = (source: WrappedListItemMessage["source"]) =>
   source === "SEARCH";
diff --git a/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx b/ts/features/messages/components/Home/__tests__/WrappedListItemMessage.test.tsx
similarity index 97%
rename from ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx
rename to ts/features/messages/components/Home/__tests__/WrappedListItemMessage.test.tsx
index 311976303c7..e157e55e211 100644
--- a/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx
+++ b/ts/features/messages/components/Home/__tests__/WrappedListItemMessage.test.tsx
@@ -10,7 +10,7 @@ import { UIMessage } from "../../../types";
 import { MESSAGES_ROUTES } from "../../../navigation/routes";
 import { TagEnum as SENDTagEnum } from "../../../../../../definitions/backend/MessageCategoryPN";
 import { TagEnum as PaymentTagEnum } from "../../../../../../definitions/backend/MessageCategoryPayment";
-import { WrappedMessageListItem } from "../WrappedMessageListItem";
+import { WrappedListItemMessage } from "../WrappedListItemMessage";
 import { TagEnum } from "../../../../../../definitions/backend/MessageCategoryBase";
 import { GlobalState } from "../../../../../store/reducers/types";
 import {
@@ -34,7 +34,7 @@ jest.mock("react-redux", () => ({
   useDispatch: () => mockDispatch
 }));
 
-describe("WrappedMessageListItem", () => {
+describe("WrappedListItemMessage", () => {
   beforeEach(() => {
     jest.resetAllMocks();
     jest.clearAllMocks();
@@ -172,7 +172,7 @@ const renderComponent = (
   } as GlobalState;
   const store = createStore(appReducer, stateWithPayment as any);
   return renderScreenWithNavigationStoreContext(
-    () => <WrappedMessageListItem index={0} message={message} source="INBOX" />,
+    () => <WrappedListItemMessage index={0} message={message} source="INBOX" />,
     MESSAGES_ROUTES.MESSAGES_HOME,
     {},
     store
diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedListItemMessage.test.tsx.snap
similarity index 87%
rename from ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap
rename to ts/features/messages/components/Home/__tests__/__snapshots__/WrappedListItemMessage.test.tsx.snap
index 71da455b253..8ce8be171c4 100644
--- a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap
+++ b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedListItemMessage.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, from SEND, read message 1`] = `
 <View
   style={
     {
@@ -370,14 +370,10 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 133,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 133,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -720,229 +716,231 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1
                                 <View
                                   style={
                                     {
-                                      "flexDirection": "row",
                                       "marginTop": 8,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
+                                      {
+                                        "display": "flex",
+                                        "flexDirection": "row",
+                                        "gap": 8,
+                                      }
                                     }
                                   >
                                     <View
                                       style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
+                                        [
+                                          {
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
+                                          },
+                                          {
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={true}
-                                        accessibilityLabel=""
-                                        accessible={false}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="no-hide-descendants"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
+                                      <View
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#0B3EE3",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
+                                          {
+                                            "flexShrink": 1,
+                                          }
                                         }
-                                        tintColor="#0B3EE3"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
                                       >
-                                        <RNSVGGroup
-                                          color="#0B3EE3"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={true}
+                                          accessibilityLabel=""
+                                          accessible={false}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="no-hide-descendants"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#0B3EE3",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
                                           }
+                                          tintColor="#0B3EE3"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
                                         >
-                                          <RNSVGPath
-                                            clipRule={0}
-                                            d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                          <RNSVGGroup
+                                            color="#0B3EE3"
                                             fill={
                                               {
-                                                "type": 2,
+                                                "payload": 4278190080,
+                                                "type": 0,
                                               }
                                             }
-                                            fillRule={0}
-                                            propList={
-                                              [
-                                                "fill",
-                                                "fillRule",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
+                                          >
+                                            <RNSVGPath
+                                              clipRule={0}
+                                              d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              fillRule={0}
+                                              propList={
+                                                [
+                                                  "fill",
+                                                  "fillRule",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
+                                      <View
+                                        style={
+                                          {
+                                            "width": 6,
+                                          }
+                                        }
+                                      />
+                                      <Text
+                                        allowFontScaling={false}
+                                        ellipsizeMode="tail"
+                                        maxFontSizeMultiplier={1.25}
+                                        numberOfLines={1}
+                                        style={
+                                          [
+                                            {},
+                                            {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Sans Pro",
+                                              "fontSize": 12,
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                              "lineHeight": 16,
+                                            },
+                                            {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "letterSpacing": 0.5,
+                                              "textTransform": "uppercase",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Legal value
+                                      </Text>
                                     </View>
                                     <View
-                                      style={
-                                        {
-                                          "width": 6,
-                                        }
-                                      }
-                                    />
-                                    <Text
-                                      allowFontScaling={false}
-                                      ellipsizeMode="tail"
-                                      maxFontSizeMultiplier={1.25}
-                                      numberOfLines={1}
                                       style={
                                         [
-                                          {},
                                           {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 12,
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                            "lineHeight": 16,
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
                                           },
                                           {
-                                            "alignSelf": "center",
-                                            "flexShrink": 1,
-                                            "letterSpacing": 0.5,
-                                            "textTransform": "uppercase",
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
                                           },
                                         ]
                                       }
                                     >
-                                      Legal value
-                                    </Text>
-                                  </View>
-                                  <View
-                                    style={
-                                      {
-                                        "width": 8,
-                                      }
-                                    }
-                                  />
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
-                                      }
-                                    >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={false}
-                                        accessibilityLabel="Allegati"
-                                        accessible={true}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="auto"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
+                                      <View
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#636B82",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
+                                          {
+                                            "flexShrink": 1,
+                                          }
                                         }
-                                        tintColor="#636B82"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
                                       >
-                                        <RNSVGGroup
-                                          color="#636B82"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={false}
+                                          accessibilityLabel="Allegati"
+                                          accessible={true}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="auto"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#636B82",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
                                           }
+                                          tintColor="#636B82"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
                                         >
-                                          <RNSVGPath
-                                            d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                          <RNSVGGroup
+                                            color="#636B82"
                                             fill={
                                               {
-                                                "type": 2,
+                                                "payload": 4278190080,
+                                                "type": 0,
                                               }
                                             }
-                                            propList={
-                                              [
-                                                "fill",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
+                                          >
+                                            <RNSVGPath
+                                              d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              propList={
+                                                [
+                                                  "fill",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -964,7 +962,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read message 1
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, from SEND, unread message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, from SEND, unread message 1`] = `
 <View
   style={
     {
@@ -1334,14 +1332,10 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, unread message
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 133,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 133,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -1739,229 +1733,231 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, unread message
                                 <View
                                   style={
                                     {
-                                      "flexDirection": "row",
                                       "marginTop": 8,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
+                                      {
+                                        "display": "flex",
+                                        "flexDirection": "row",
+                                        "gap": 8,
+                                      }
                                     }
                                   >
                                     <View
                                       style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
+                                        [
+                                          {
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
+                                          },
+                                          {
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={true}
-                                        accessibilityLabel=""
-                                        accessible={false}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="no-hide-descendants"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
+                                      <View
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#0B3EE3",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
+                                          {
+                                            "flexShrink": 1,
+                                          }
                                         }
-                                        tintColor="#0B3EE3"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
                                       >
-                                        <RNSVGGroup
-                                          color="#0B3EE3"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={true}
+                                          accessibilityLabel=""
+                                          accessible={false}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="no-hide-descendants"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#0B3EE3",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
                                           }
+                                          tintColor="#0B3EE3"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
                                         >
-                                          <RNSVGPath
-                                            clipRule={0}
-                                            d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                          <RNSVGGroup
+                                            color="#0B3EE3"
                                             fill={
                                               {
-                                                "type": 2,
+                                                "payload": 4278190080,
+                                                "type": 0,
                                               }
                                             }
-                                            fillRule={0}
-                                            propList={
-                                              [
-                                                "fill",
-                                                "fillRule",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
+                                          >
+                                            <RNSVGPath
+                                              clipRule={0}
+                                              d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              fillRule={0}
+                                              propList={
+                                                [
+                                                  "fill",
+                                                  "fillRule",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
+                                      <View
+                                        style={
+                                          {
+                                            "width": 6,
+                                          }
+                                        }
+                                      />
+                                      <Text
+                                        allowFontScaling={false}
+                                        ellipsizeMode="tail"
+                                        maxFontSizeMultiplier={1.25}
+                                        numberOfLines={1}
+                                        style={
+                                          [
+                                            {},
+                                            {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Sans Pro",
+                                              "fontSize": 12,
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                              "lineHeight": 16,
+                                            },
+                                            {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "letterSpacing": 0.5,
+                                              "textTransform": "uppercase",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Legal value
+                                      </Text>
                                     </View>
                                     <View
-                                      style={
-                                        {
-                                          "width": 6,
-                                        }
-                                      }
-                                    />
-                                    <Text
-                                      allowFontScaling={false}
-                                      ellipsizeMode="tail"
-                                      maxFontSizeMultiplier={1.25}
-                                      numberOfLines={1}
                                       style={
                                         [
-                                          {},
                                           {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 12,
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                            "lineHeight": 16,
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
                                           },
                                           {
-                                            "alignSelf": "center",
-                                            "flexShrink": 1,
-                                            "letterSpacing": 0.5,
-                                            "textTransform": "uppercase",
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
                                           },
                                         ]
                                       }
                                     >
-                                      Legal value
-                                    </Text>
-                                  </View>
-                                  <View
-                                    style={
-                                      {
-                                        "width": 8,
-                                      }
-                                    }
-                                  />
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
-                                      }
-                                    >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={false}
-                                        accessibilityLabel="Allegati"
-                                        accessible={true}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="auto"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
+                                      <View
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#636B82",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
+                                          {
+                                            "flexShrink": 1,
+                                          }
                                         }
-                                        tintColor="#636B82"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
                                       >
-                                        <RNSVGGroup
-                                          color="#636B82"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={false}
+                                          accessibilityLabel="Allegati"
+                                          accessible={true}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="auto"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#636B82",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
                                           }
+                                          tintColor="#636B82"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
                                         >
-                                          <RNSVGPath
-                                            d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                          <RNSVGGroup
+                                            color="#636B82"
                                             fill={
                                               {
-                                                "type": 2,
+                                                "payload": 4278190080,
+                                                "type": 0,
                                               }
                                             }
-                                            propList={
-                                              [
-                                                "fill",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
+                                          >
+                                            <RNSVGPath
+                                              d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              propList={
+                                                [
+                                                  "fill",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -1983,7 +1979,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, unread message
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, contains paid payment, read message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, contains paid payment, read message 1`] = `
 <View
   style={
     {
@@ -2353,14 +2349,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 133,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 133,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -2785,175 +2777,184 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
                                       dynamicTypeRamp="footnote"
                                       maxFontSizeMultiplier={1.25}
                                       style={
-                                        [
-                                          {},
-                                          {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 14,
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                            "lineHeight": 21,
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Service name · 
-                                    </Text>
-                                    <Text
-                                      allowFontScaling={false}
-                                      dynamicTypeRamp="footnote"
-                                      maxFontSizeMultiplier={1.25}
-                                      style={
-                                        [
-                                          {},
-                                          {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 14,
-                                            "fontStyle": "normal",
-                                            "fontWeight": "400",
-                                            "lineHeight": 21,
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Message title
-                                    </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flexDirection": "row",
-                                      "marginTop": 8,
-                                    }
-                                  }
-                                >
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
-                                      }
-                                    >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={true}
-                                        accessibilityLabel=""
-                                        accessible={false}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="no-hide-descendants"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#427940",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
-                                        }
-                                        tintColor="#427940"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
-                                      >
-                                        <RNSVGGroup
-                                          color="#427940"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
-                                          }
-                                        >
-                                          <RNSVGPath
-                                            clipRule={0}
-                                            d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm17.707-1.293a1 1 0 0 0-1.414-1.414L10 15.586l-3.293-3.293a1 1 0 0 0-1.414 1.414L8.586 17a2 2 0 0 0 2.828 0l6.293-6.293Z"
-                                            fill={
-                                              {
-                                                "type": 2,
-                                              }
-                                            }
-                                            fillRule={0}
-                                            propList={
-                                              [
-                                                "fill",
-                                                "fillRule",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
-                                    </View>
-                                    <View
-                                      style={
-                                        {
-                                          "width": 6,
-                                        }
+                                        [
+                                          {},
+                                          {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Sans Pro",
+                                            "fontSize": 14,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                            "lineHeight": 21,
+                                          },
+                                        ]
                                       }
-                                    />
+                                    >
+                                      Service name · 
+                                    </Text>
                                     <Text
                                       allowFontScaling={false}
-                                      ellipsizeMode="tail"
+                                      dynamicTypeRamp="footnote"
                                       maxFontSizeMultiplier={1.25}
-                                      numberOfLines={1}
                                       style={
                                         [
                                           {},
                                           {
                                             "color": "#555C70",
                                             "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 12,
+                                            "fontSize": 14,
                                             "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                            "lineHeight": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 21,
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Message title
+                                    </Text>
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "marginTop": 8,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "display": "flex",
+                                        "flexDirection": "row",
+                                        "gap": 8,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
                                           },
                                           {
-                                            "alignSelf": "center",
-                                            "flexShrink": 1,
-                                            "letterSpacing": 0.5,
-                                            "textTransform": "uppercase",
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
                                           },
                                         ]
                                       }
                                     >
-                                      Paid
-                                    </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "flexShrink": 1,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={true}
+                                          accessibilityLabel=""
+                                          accessible={false}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="no-hide-descendants"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#427940",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
+                                          }
+                                          tintColor="#427940"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
+                                        >
+                                          <RNSVGGroup
+                                            color="#427940"
+                                            fill={
+                                              {
+                                                "payload": 4278190080,
+                                                "type": 0,
+                                              }
+                                            }
+                                          >
+                                            <RNSVGPath
+                                              clipRule={0}
+                                              d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm17.707-1.293a1 1 0 0 0-1.414-1.414L10 15.586l-3.293-3.293a1 1 0 0 0-1.414 1.414L8.586 17a2 2 0 0 0 2.828 0l6.293-6.293Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              fillRule={0}
+                                              propList={
+                                                [
+                                                  "fill",
+                                                  "fillRule",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
+                                      <View
+                                        style={
+                                          {
+                                            "width": 6,
+                                          }
+                                        }
+                                      />
+                                      <Text
+                                        allowFontScaling={false}
+                                        ellipsizeMode="tail"
+                                        maxFontSizeMultiplier={1.25}
+                                        numberOfLines={1}
+                                        style={
+                                          [
+                                            {},
+                                            {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Sans Pro",
+                                              "fontSize": 12,
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                              "lineHeight": 16,
+                                            },
+                                            {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "letterSpacing": 0.5,
+                                              "textTransform": "uppercase",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Paid
+                                      </Text>
+                                    </View>
                                   </View>
                                 </View>
                               </View>
@@ -2974,7 +2975,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, contains paid payment, unread message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, contains paid payment, unread message 1`] = `
 <View
   style={
     {
@@ -3344,14 +3345,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 133,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 133,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -3871,135 +3868,144 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
                                 <View
                                   style={
                                     {
-                                      "flexDirection": "row",
                                       "marginTop": 8,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "borderCurve": "continuous",
-                                          "borderRadius": 6,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "justifyContent": "center",
-                                          "paddingHorizontal": 8,
-                                          "paddingVertical": 6,
-                                        },
-                                        {
-                                          "backgroundColor": "#FFFFFF",
-                                          "borderColor": "#E8EBF1",
-                                        },
-                                      ]
+                                      {
+                                        "display": "flex",
+                                        "flexDirection": "row",
+                                        "gap": 8,
+                                      }
                                     }
                                   >
                                     <View
                                       style={
-                                        {
-                                          "flexShrink": 1,
-                                        }
+                                        [
+                                          {
+                                            "alignItems": "center",
+                                            "alignSelf": "flex-start",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 6,
+                                            "borderWidth": 1,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 6,
+                                          },
+                                          {
+                                            "backgroundColor": "#FFFFFF",
+                                            "borderColor": "#E8EBF1",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <RNSVGSvgView
-                                        accessibilityElementsHidden={true}
-                                        accessibilityLabel=""
-                                        accessible={false}
-                                        align="xMidYMid"
-                                        bbHeight={16}
-                                        bbWidth={16}
-                                        focusable={false}
-                                        height={16}
-                                        importantForAccessibility="no-hide-descendants"
-                                        meetOrSlice={0}
-                                        minX={0}
-                                        minY={0}
+                                      <View
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "borderWidth": 0,
-                                            },
-                                            {
-                                              "color": "#427940",
-                                            },
-                                            {
-                                              "flex": 0,
-                                              "height": 16,
-                                              "width": 16,
-                                            },
-                                          ]
+                                          {
+                                            "flexShrink": 1,
+                                          }
                                         }
-                                        tintColor="#427940"
-                                        vbHeight={24}
-                                        vbWidth={24}
-                                        width={16}
                                       >
-                                        <RNSVGGroup
-                                          color="#427940"
-                                          fill={
-                                            {
-                                              "payload": 4278190080,
-                                              "type": 0,
-                                            }
+                                        <RNSVGSvgView
+                                          accessibilityElementsHidden={true}
+                                          accessibilityLabel=""
+                                          accessible={false}
+                                          align="xMidYMid"
+                                          bbHeight={16}
+                                          bbWidth={16}
+                                          focusable={false}
+                                          height={16}
+                                          importantForAccessibility="no-hide-descendants"
+                                          meetOrSlice={0}
+                                          minX={0}
+                                          minY={0}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "borderWidth": 0,
+                                              },
+                                              {
+                                                "color": "#427940",
+                                              },
+                                              {
+                                                "flex": 0,
+                                                "height": 16,
+                                                "width": 16,
+                                              },
+                                            ]
                                           }
+                                          tintColor="#427940"
+                                          vbHeight={24}
+                                          vbWidth={24}
+                                          width={16}
                                         >
-                                          <RNSVGPath
-                                            clipRule={0}
-                                            d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm17.707-1.293a1 1 0 0 0-1.414-1.414L10 15.586l-3.293-3.293a1 1 0 0 0-1.414 1.414L8.586 17a2 2 0 0 0 2.828 0l6.293-6.293Z"
+                                          <RNSVGGroup
+                                            color="#427940"
                                             fill={
                                               {
-                                                "type": 2,
+                                                "payload": 4278190080,
+                                                "type": 0,
                                               }
                                             }
-                                            fillRule={0}
-                                            propList={
-                                              [
-                                                "fill",
-                                                "fillRule",
-                                              ]
-                                            }
-                                          />
-                                        </RNSVGGroup>
-                                      </RNSVGSvgView>
-                                    </View>
-                                    <View
-                                      style={
-                                        {
-                                          "width": 6,
-                                        }
-                                      }
-                                    />
-                                    <Text
-                                      allowFontScaling={false}
-                                      ellipsizeMode="tail"
-                                      maxFontSizeMultiplier={1.25}
-                                      numberOfLines={1}
-                                      style={
-                                        [
-                                          {},
-                                          {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Sans Pro",
-                                            "fontSize": 12,
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                            "lineHeight": 16,
-                                          },
+                                          >
+                                            <RNSVGPath
+                                              clipRule={0}
+                                              d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Zm17.707-1.293a1 1 0 0 0-1.414-1.414L10 15.586l-3.293-3.293a1 1 0 0 0-1.414 1.414L8.586 17a2 2 0 0 0 2.828 0l6.293-6.293Z"
+                                              fill={
+                                                {
+                                                  "type": 2,
+                                                }
+                                              }
+                                              fillRule={0}
+                                              propList={
+                                                [
+                                                  "fill",
+                                                  "fillRule",
+                                                ]
+                                              }
+                                            />
+                                          </RNSVGGroup>
+                                        </RNSVGSvgView>
+                                      </View>
+                                      <View
+                                        style={
                                           {
-                                            "alignSelf": "center",
-                                            "flexShrink": 1,
-                                            "letterSpacing": 0.5,
-                                            "textTransform": "uppercase",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Paid
-                                    </Text>
+                                            "width": 6,
+                                          }
+                                        }
+                                      />
+                                      <Text
+                                        allowFontScaling={false}
+                                        ellipsizeMode="tail"
+                                        maxFontSizeMultiplier={1.25}
+                                        numberOfLines={1}
+                                        style={
+                                          [
+                                            {},
+                                            {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Sans Pro",
+                                              "fontSize": 12,
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                              "lineHeight": 16,
+                                            },
+                                            {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "letterSpacing": 0.5,
+                                              "textTransform": "uppercase",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Paid
+                                      </Text>
+                                    </View>
                                   </View>
                                 </View>
                               </View>
@@ -4020,7 +4026,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains p
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, contains unpaid payment, read message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, contains unpaid payment, read message 1`] = `
 <View
   style={
     {
@@ -4390,14 +4396,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 95,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 95,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -4877,7 +4879,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, contains unpaid payment, unread message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, contains unpaid payment, unread message 1`] = `
 <View
   style={
     {
@@ -5247,14 +5249,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 95,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 95,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -5789,7 +5787,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, contains u
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, not a payment, read message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, not a payment, read message 1`] = `
 <View
   style={
     {
@@ -6159,14 +6157,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 95,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 95,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
@@ -6524,7 +6518,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym
 </View>
 `;
 
-exports[`WrappedMessageListItem should match snapshot, not from SEND, not a payment, unread message 1`] = `
+exports[`WrappedListItemMessage should match snapshot, not from SEND, not a payment, unread message 1`] = `
 <View
   style={
     {
@@ -6894,14 +6888,10 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, not a paym
                         onStartShouldSetResponder={[Function]}
                         onTouchEnd={[Function]}
                         style={
-                          [
-                            {
-                              "backgroundColor": undefined,
-                            },
-                            {
-                              "minHeight": 95,
-                            },
-                          ]
+                          {
+                            "backgroundColor": undefined,
+                            "minHeight": 95,
+                          }
                         }
                         testID="wrapped_message_list_item_0"
                       >
diff --git a/ts/features/messages/components/Home/homeUtils.ts b/ts/features/messages/components/Home/homeUtils.ts
index 95f3d90160b..f3b4539925a 100644
--- a/ts/features/messages/components/Home/homeUtils.ts
+++ b/ts/features/messages/components/Home/homeUtils.ts
@@ -31,8 +31,11 @@ import { TagEnum } from "../../../../../definitions/backend/MessageCategoryPN";
 import NavigationService from "../../../../navigation/NavigationService";
 import { trackMessageListEndReached, trackMessagesPage } from "../../analytics";
 import { MESSAGES_ROUTES } from "../../navigation/routes";
-import { EnhancedHeight, StandardHeight } from "./DS/MessageListItem";
-import { SkeletonHeight } from "./DS/MessageListItemSkeleton";
+import {
+  ListItemMessageEnhancedHeight,
+  ListItemMessageStandardHeight
+} from "./DS/ListItemMessage";
+import { SkeletonHeight } from "./DS/ListItemMessageSkeleton";
 
 export type LayoutInfo = {
   index: number;
@@ -247,7 +250,9 @@ export const generateMessageListLayoutInfo = (
         isPaymentMessageWithPaidNoticeSelector(state, message.category);
       const itemLayoutInfo: LayoutInfo = {
         index: i,
-        length: messageHasBadge ? EnhancedHeight : StandardHeight,
+        length: messageHasBadge
+          ? ListItemMessageEnhancedHeight
+          : ListItemMessageStandardHeight,
         offset:
           i > 0
             ? messageListLayoutInfo[i - 1].offset +
diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
index 44d59ab6921..acb02120b2b 100644
--- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
@@ -14,7 +14,7 @@ import { useIOSelector } from "../../../../store/hooks";
 import { SERVICES_ROUTES } from "../../../services/common/navigation/routes";
 import { messagePaymentDataSelector } from "../../store/reducers/detailsById";
 import { UIMessageId } from "../../types";
-import { DoubleAvatar } from "../Home/DS/DoubleAvatar";
+import { AvatarDouble } from "../Home/DS/AvatarDouble";
 
 export type OrganizationHeaderProps = {
   messageId: UIMessageId;
@@ -77,7 +77,7 @@ export const OrganizationHeader = ({
       </View>
       <View style={styles.itemAvatar}>
         {paymentData ? (
-          <DoubleAvatar backgroundLogoUri={logoUri} />
+          <AvatarDouble backgroundLogoUri={logoUri} />
         ) : (
           <Avatar logoUri={logoUri} size="small" />
         )}
diff --git a/ts/features/messages/screens/MessagesSearchScreen.tsx b/ts/features/messages/screens/MessagesSearchScreen.tsx
index 1830f7e5da6..17c1e152fa9 100644
--- a/ts/features/messages/screens/MessagesSearchScreen.tsx
+++ b/ts/features/messages/screens/MessagesSearchScreen.tsx
@@ -27,7 +27,7 @@ import { EmptyList } from "../components/Search/EmptyList";
 import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import { useIOStore } from "../../../store/hooks";
 import { UIMessage } from "../types";
-import { WrappedMessageListItem } from "../components/Home/WrappedMessageListItem";
+import { WrappedListItemMessage } from "../components/Home/WrappedListItemMessage";
 import {
   trackMessageSearchClosing,
   trackMessageSearchPage
@@ -58,7 +58,7 @@ export const MessagesSearchScreen = () => {
 
   const renderItemCallback = useCallback(
     (itemInfo: ListRenderItemInfo<UIMessage>) => (
-      <WrappedMessageListItem
+      <WrappedListItemMessage
         index={itemInfo.index}
         message={itemInfo.item}
         source="SEARCH"
diff --git a/ts/features/services/common/components/ListItemSearchInstitution.tsx b/ts/features/services/common/components/ListItemSearchInstitution.tsx
index aa7893efe53..a1e3adafbba 100644
--- a/ts/features/services/common/components/ListItemSearchInstitution.tsx
+++ b/ts/features/services/common/components/ListItemSearchInstitution.tsx
@@ -16,7 +16,7 @@ import React, { ComponentProps, memo, useCallback } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 
-export type ListItemSearchInstitutionProps = WithTestID<
+export type ListItemSearchInstitution = WithTestID<
   {
     value: string | React.ReactNode;
     avatarProps: AvatarSearchProps;
@@ -42,7 +42,7 @@ export const ListItemSearchInstitution = memo(
     accessibilityHint,
     testID,
     numberOfLines
-  }: ListItemSearchInstitutionProps) => {
+  }: ListItemSearchInstitution) => {
     const { isExperimental } = useIOExperimentalDesign();
     const theme = useIOTheme();