diff --git a/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx b/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx
new file mode 100644
index 00000000000..849cf89df7c
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx
@@ -0,0 +1,48 @@
+import { Divider, H3, LabelSmall, VSpacer } from "@pagopa/io-app-design-system";
+import React, { PropsWithChildren } from "react";
+import { StyleSheet, View } from "react-native";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
+
+export type MessageDetailHeaderProps = PropsWithChildren<{
+  createdAt: Date;
+  subject: string;
+  sender?: string;
+  service?: ServicePublic;
+}>;
+
+const styles = StyleSheet.create({
+  header: {
+    paddingHorizontal: 24
+  }
+});
+
+const MessageHeaderContent = ({
+  subject,
+  createdAt
+}: MessageDetailHeaderProps) => (
+  <>
+    <H3 testID="message-header-subject">{subject}</H3>
+    <VSpacer size={8} />
+    <LabelSmall fontSize="regular" color="grey-700">
+      {localeDateFormat(
+        createdAt,
+        I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
+      )}
+    </LabelSmall>
+  </>
+);
+
+export const MessageDetailHeader = ({
+  children,
+  ...rest
+}: MessageDetailHeaderProps) => (
+  <View style={styles.header}>
+    {children}
+    <MessageHeaderContent {...rest} />
+    <VSpacer size={8} />
+    <Divider />
+    {/* TODO: Add MessageHeaderService */}
+  </View>
+);
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx
new file mode 100644
index 00000000000..5539b0d3fdc
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx
@@ -0,0 +1,35 @@
+import React, { ComponentProps } from "react";
+import { render } from "@testing-library/react-native";
+import { MessageDetailHeader } from "../MessageDetailHeader";
+import { ServicePublic } from "../../../../../../definitions/backend/ServicePublic";
+
+const service = {
+  service_id: "serviceId",
+  service_name: "health",
+  organization_name: "Organization foo",
+  department_name: "Department one",
+  organization_fiscal_code: "OFSAAAAAA"
+} as ServicePublic;
+
+const defaultProps: ComponentProps<typeof MessageDetailHeader> = {
+  subject: "Subject",
+  createdAt: new Date("2021-10-18T16:00:30.541Z")
+};
+
+describe("MessageDetailHeader component", () => {
+  it("should match the snapshot with default props", () => {
+    const component = render(<MessageDetailHeader {...defaultProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should match the snapshot with all props", () => {
+    const component = render(
+      <MessageDetailHeader
+        {...defaultProps}
+        sender="Sender"
+        service={service}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap
new file mode 100644
index 00000000000..d1597d22480
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap
@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailHeader component should match the snapshot with all props 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 24,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    color="bluegreyDark"
+    defaultColor="bluegreyDark"
+    defaultWeight="SemiBold"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 24,
+        "lineHeight": 34,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        },
+        Object {
+          "color": "#17324D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
+      ]
+    }
+    testID="message-header-subject"
+    weight="SemiBold"
+  >
+    Subject
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="grey-700"
+    defaultColor="blue"
+    defaultWeight="Bold"
+    font="TitilliumWeb"
+    fontSize="regular"
+    fontStyle={
+      Object {
+        "fontSize": 14,
+        "lineHeight": 21,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "#555C70",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "700",
+        },
+      ]
+    }
+    weight="Bold"
+  >
+    18 Oct 2021, 16:00
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#D2D6E3",
+        "height": 0.5,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`MessageDetailHeader component should match the snapshot with default props 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 24,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    color="bluegreyDark"
+    defaultColor="bluegreyDark"
+    defaultWeight="SemiBold"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 24,
+        "lineHeight": 34,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        },
+        Object {
+          "color": "#17324D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
+      ]
+    }
+    testID="message-header-subject"
+    weight="SemiBold"
+  >
+    Subject
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="grey-700"
+    defaultColor="blue"
+    defaultWeight="Bold"
+    font="TitilliumWeb"
+    fontSize="regular"
+    fontStyle={
+      Object {
+        "fontSize": 14,
+        "lineHeight": 21,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "#555C70",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "700",
+        },
+      ]
+    }
+    weight="Bold"
+  >
+    18 Oct 2021, 16:00
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#D2D6E3",
+        "height": 0.5,
+      }
+    }
+  />
+</View>
+`;
diff --git a/ts/features/pn/__mocks__/message.ts b/ts/features/pn/__mocks__/message.ts
new file mode 100644
index 00000000000..6bfc8eeaccb
--- /dev/null
+++ b/ts/features/pn/__mocks__/message.ts
@@ -0,0 +1,46 @@
+import { ThirdPartyMessageWithContent } from "../../../../definitions/backend/ThirdPartyMessageWithContent";
+import { message_1 } from "../../messages/__mocks__/message";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+
+export const thirdPartyMessage: ThirdPartyMessageWithContent = {
+  ...message_1,
+  created_at: new Date("2020-01-01T00:00:00.000Z"),
+  third_party_message: {
+    details: {
+      abstract: "######## abstract ########",
+      attachments: [
+        {
+          messageId: message_1.id,
+          id: "1",
+          displayName: "A First Attachment",
+          contentType: "application/pdf",
+          category: ATTACHMENT_CATEGORY.DOCUMENT,
+          resourceUrl: { href: "/resource/attachment1.pdf" }
+        },
+        {
+          messageId: message_1.id,
+          id: "2",
+          displayName: "A Second Attachment",
+          contentType: "application/pdf",
+          category: ATTACHMENT_CATEGORY.DOCUMENT,
+          resourceUrl: { href: "/resource/attachment2.pdf" }
+        }
+      ],
+      iun: "731143-7-0317-8200-0",
+      subject: "######## subject ########",
+      recipients: [
+        {
+          recipientType: "-",
+          taxId: "AAABBB00A00A000A",
+          denomination: "AaAaAa BbBbBb",
+          payment: {
+            noticeCode: "026773337463073118",
+            creditorTaxId: "00000000009"
+          }
+        }
+      ],
+      notificationStatusHistory: [],
+      senderDenomination: "Sender denomination"
+    }
+  }
+};
diff --git a/ts/features/pn/components/LegacyMessageDetails.tsx b/ts/features/pn/components/LegacyMessageDetails.tsx
new file mode 100644
index 00000000000..78d59087e5e
--- /dev/null
+++ b/ts/features/pn/components/LegacyMessageDetails.tsx
@@ -0,0 +1,193 @@
+import React, { useCallback, createRef, useRef } from "react";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import * as SEP from "fp-ts/lib/Separated";
+import { View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import {
+  IOVisualCostants,
+  ListItemInfoCopy,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
+import { H5 } from "../../../components/core/typography/H5";
+import I18n from "../../../i18n";
+import { useIOSelector } from "../../../store/hooks";
+import { pnFrontendUrlSelector } from "../../../store/reducers/backendStatus";
+import { UIAttachment, UIMessageId } from "../../messages/types";
+import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
+import { LegacyMessageAttachments } from "../../messages/components/LegacyMessageAttachments";
+import NavigationService from "../../../navigation/NavigationService";
+import PN_ROUTES from "../navigation/routes";
+import { PNMessage } from "../store/types/types";
+import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
+import { trackPNAttachmentOpening } from "../analytics";
+import { DSFullWidthComponent } from "../../design-system/components/DSFullWidthComponent";
+import StatusContent from "../../../components/SectionStatus/StatusContent";
+import {
+  getStatusTextColor,
+  statusColorMap,
+  statusIconMap
+} from "../../../components/SectionStatus";
+import { LevelEnum } from "../../../../definitions/content/SectionStatus";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+import { maxVisiblePaymentCountGenerator } from "../utils";
+import { LegacyMessageDetailsContent } from "./LegacyMessageDetailsContent";
+import { MessageDetailsHeader } from "./MessageDetailsHeader";
+import { MessageDetailsSection } from "./MessageDetailsSection";
+import { MessageTimeline } from "./MessageTimeline";
+import { MessageTimelineCTA } from "./MessageTimelineCTA";
+import { MessageF24 } from "./MessageF24";
+import { MessagePayments } from "./MessagePayments";
+import { MessageFooter } from "./MessageFooter";
+import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
+
+type Props = Readonly<{
+  messageId: UIMessageId;
+  message: PNMessage;
+  service: ServicePublic | undefined;
+  payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
+}>;
+
+export const LegacyMessageDetails = ({
+  message,
+  messageId,
+  service,
+  payments
+}: Props) => {
+  const viewRef = createRef<View>();
+  const presentPaymentsBottomSheetRef = useRef<() => void>();
+  const frontendUrl = useIOSelector(pnFrontendUrlSelector);
+
+  const partitionedAttachments = pipe(
+    message.attachments,
+    O.fromNullable,
+    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
+    RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
+  );
+
+  const f24List = SEP.right(partitionedAttachments);
+  const attachmentList = SEP.left(partitionedAttachments);
+
+  const isCancelled = message.isCancelled ?? false;
+  const completedPaymentNoticeCodes = isCancelled
+    ? message.completedPayments
+    : undefined;
+
+  const openAttachment = useCallback(
+    (attachment: UIAttachment) => {
+      trackPNAttachmentOpening(attachment.category);
+      NavigationService.navigate(PN_ROUTES.MESSAGE_ATTACHMENT, {
+        messageId,
+        attachmentId: attachment.id,
+        category: attachment.category
+      });
+    },
+    [messageId]
+  );
+
+  const maxVisiblePaymentCount = maxVisiblePaymentCountGenerator();
+  const scrollViewRef = React.createRef<ScrollView>();
+
+  return (
+    <>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: IOVisualCostants.appMarginDefault
+        }}
+        ref={scrollViewRef}
+      >
+        {service && <MessageDetailsHeader service={service} />}
+        <VSpacer />
+        <LegacyMessageDetailsContent message={message} />
+        {isCancelled && (
+          <>
+            <VSpacer />
+            <DSFullWidthComponent>
+              <StatusContent
+                accessibilityLabel={I18n.t(
+                  "features.pn.details.cancelledMessage.body"
+                )}
+                backgroundColor={statusColorMap.warning}
+                foregroundColor={getStatusTextColor(LevelEnum.warning)}
+                iconName={statusIconMap.warning}
+                testID={"PnCancelledMessageBanner"}
+                ref={viewRef}
+              >
+                {I18n.t("features.pn.details.cancelledMessage.body")}
+              </StatusContent>
+            </DSFullWidthComponent>
+          </>
+        )}
+
+        {RA.isNonEmpty(attachmentList) && (
+          <MessageDetailsSection
+            title={I18n.t("features.pn.details.attachmentsSection.title")}
+          >
+            <LegacyMessageAttachments
+              disabled={isCancelled}
+              attachments={attachmentList}
+              downloadAttachmentBeforePreview={true}
+              openPreview={openAttachment}
+            />
+          </MessageDetailsSection>
+        )}
+        <MessagePayments
+          messageId={messageId}
+          isCancelled={isCancelled}
+          payments={payments}
+          completedPaymentNoticeCodes={completedPaymentNoticeCodes}
+          maxVisiblePaymentCount={maxVisiblePaymentCount}
+          presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+        />
+
+        {!isCancelled && RA.isNonEmpty(f24List) ? (
+          <>
+            <MessageF24 attachments={f24List} openPreview={openAttachment} />
+            <VSpacer size={24} />
+          </>
+        ) : null}
+
+        <MessageDetailsSection
+          title={I18n.t("features.pn.details.infoSection.title")}
+        >
+          <ListItemInfoCopy
+            value={message.iun}
+            onPress={() => clipboardSetStringWithFeedback(message.iun)}
+            accessibilityLabel={I18n.t("features.pn.details.infoSection.iun")}
+            label={I18n.t("features.pn.details.infoSection.iun")}
+          />
+          <H5 color="bluegrey">
+            {I18n.t("features.pn.details.timeline.title")}
+          </H5>
+          <VSpacer size={24} />
+          <MessageTimeline
+            message={message}
+            onExpand={() => {
+              scrollViewRef.current?.scrollToEnd({ animated: true });
+            }}
+          />
+          {frontendUrl.length > 0 && <MessageTimelineCTA url={frontendUrl} />}
+        </MessageDetailsSection>
+      </ScrollView>
+
+      {payments && !isCancelled && (
+        <MessagePaymentBottomSheet
+          messageId={messageId}
+          payments={payments}
+          presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+        />
+      )}
+
+      <MessageFooter
+        messageId={messageId}
+        payments={payments}
+        maxVisiblePaymentCount={maxVisiblePaymentCount}
+        isCancelled={isCancelled}
+        presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+      />
+    </>
+  );
+};
diff --git a/ts/features/pn/components/LegacyMessageDetailsContent.tsx b/ts/features/pn/components/LegacyMessageDetailsContent.tsx
new file mode 100644
index 00000000000..59cb0f34fbe
--- /dev/null
+++ b/ts/features/pn/components/LegacyMessageDetailsContent.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+import { Body } from "../../../components/core/typography/Body";
+import { H1 } from "../../../components/core/typography/H1";
+import { H2 } from "../../../components/core/typography/H2";
+import { PNMessage } from "../store/types/types";
+import customVariables from "../../../theme/variables";
+import { isStringNullyOrEmpty } from "../../../utils/strings";
+
+const styles = StyleSheet.create({
+  subject: {
+    marginTop: customVariables.spacerExtrasmallHeight
+  },
+  abstract: {
+    marginTop: customVariables.spacerExtrasmallHeight
+  }
+});
+
+type Props = Readonly<{ message: PNMessage }> & ViewProps;
+
+export const LegacyMessageDetailsContent = (props: Props) => (
+  <View style={props.style}>
+    {!isStringNullyOrEmpty(props.message.senderDenomination) && (
+      <H2>{props.message.senderDenomination}</H2>
+    )}
+    <H1 style={styles.subject}>{props.message.subject}</H1>
+    {!isStringNullyOrEmpty(props.message.abstract) && (
+      <Body style={styles.abstract}>{props.message.abstract}</Body>
+    )}
+  </View>
+);
diff --git a/ts/features/pn/components/MessageDetails.tsx b/ts/features/pn/components/MessageDetails.tsx
index a2370ecabd8..d6f25513ce4 100644
--- a/ts/features/pn/components/MessageDetails.tsx
+++ b/ts/features/pn/components/MessageDetails.tsx
@@ -1,193 +1,27 @@
-import React, { useCallback, createRef, useRef } from "react";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as RA from "fp-ts/lib/ReadonlyArray";
-import * as SEP from "fp-ts/lib/Separated";
-import { View } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import {
-  IOVisualCostants,
-  ListItemInfoCopy,
-  VSpacer
-} from "@pagopa/io-app-design-system";
+import React from "react";
+import { ScrollView } from "react-native";
 import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
-import { H5 } from "../../../components/core/typography/H5";
-import I18n from "../../../i18n";
-import { useIOSelector } from "../../../store/hooks";
-import { pnFrontendUrlSelector } from "../../../store/reducers/backendStatus";
-import { UIAttachment, UIMessageId } from "../../messages/types";
-import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
-import { LegacyMessageAttachments } from "../../messages/components/LegacyMessageAttachments";
-import NavigationService from "../../../navigation/NavigationService";
-import PN_ROUTES from "../navigation/routes";
+import { UIMessageId } from "../../messages/types";
 import { PNMessage } from "../store/types/types";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
-import { trackPNAttachmentOpening } from "../analytics";
-import { DSFullWidthComponent } from "../../design-system/components/DSFullWidthComponent";
-import StatusContent from "../../../components/SectionStatus/StatusContent";
-import {
-  getStatusTextColor,
-  statusColorMap,
-  statusIconMap
-} from "../../../components/SectionStatus";
-import { LevelEnum } from "../../../../definitions/content/SectionStatus";
-import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
-import { maxVisiblePaymentCountGenerator } from "../utils";
+import { MessageDetailHeader } from "../../messages/components/MessageDetail/MessageDetailHeader";
 import { MessageDetailsContent } from "./MessageDetailsContent";
-import { MessageDetailsHeader } from "./MessageDetailsHeader";
-import { MessageDetailsSection } from "./MessageDetailsSection";
-import { MessageTimeline } from "./MessageTimeline";
-import { MessageTimelineCTA } from "./MessageTimelineCTA";
-import { MessageF24 } from "./MessageF24";
-import { MessagePayments } from "./MessagePayments";
-import { MessageFooter } from "./MessageFooter";
-import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
 
-type Props = Readonly<{
-  messageId: UIMessageId;
+type MessageDetailsProps = {
   message: PNMessage;
-  service: ServicePublic | undefined;
-  payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
-}>;
-
-export const MessageDetails = ({
-  message,
-  messageId,
-  service,
-  payments
-}: Props) => {
-  const viewRef = createRef<View>();
-  const presentPaymentsBottomSheetRef = useRef<() => void>();
-  const frontendUrl = useIOSelector(pnFrontendUrlSelector);
-
-  const partitionedAttachments = pipe(
-    message.attachments,
-    O.fromNullable,
-    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
-    RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
-  );
-
-  const f24List = SEP.right(partitionedAttachments);
-  const attachmentList = SEP.left(partitionedAttachments);
-
-  const isCancelled = message.isCancelled ?? false;
-  const completedPaymentNoticeCodes = isCancelled
-    ? message.completedPayments
-    : undefined;
-
-  const openAttachment = useCallback(
-    (attachment: UIAttachment) => {
-      trackPNAttachmentOpening(attachment.category);
-      NavigationService.navigate(PN_ROUTES.MESSAGE_ATTACHMENT, {
-        messageId,
-        attachmentId: attachment.id,
-        category: attachment.category
-      });
-    },
-    [messageId]
-  );
-
-  const maxVisiblePaymentCount = maxVisiblePaymentCountGenerator();
-  const scrollViewRef = React.createRef<ScrollView>();
-
-  return (
-    <>
-      <ScrollView
-        contentContainerStyle={{
-          flexGrow: 1,
-          padding: IOVisualCostants.appMarginDefault
-        }}
-        ref={scrollViewRef}
-      >
-        {service && <MessageDetailsHeader service={service} />}
-        <VSpacer />
-        <MessageDetailsContent message={message} />
-        {isCancelled && (
-          <>
-            <VSpacer />
-            <DSFullWidthComponent>
-              <StatusContent
-                accessibilityLabel={I18n.t(
-                  "features.pn.details.cancelledMessage.body"
-                )}
-                backgroundColor={statusColorMap.warning}
-                foregroundColor={getStatusTextColor(LevelEnum.warning)}
-                iconName={statusIconMap.warning}
-                testID={"PnCancelledMessageBanner"}
-                ref={viewRef}
-              >
-                {I18n.t("features.pn.details.cancelledMessage.body")}
-              </StatusContent>
-            </DSFullWidthComponent>
-          </>
-        )}
-
-        {RA.isNonEmpty(attachmentList) && (
-          <MessageDetailsSection
-            title={I18n.t("features.pn.details.attachmentsSection.title")}
-          >
-            <LegacyMessageAttachments
-              disabled={isCancelled}
-              attachments={attachmentList}
-              downloadAttachmentBeforePreview={true}
-              openPreview={openAttachment}
-            />
-          </MessageDetailsSection>
-        )}
-        <MessagePayments
-          messageId={messageId}
-          isCancelled={isCancelled}
-          payments={payments}
-          completedPaymentNoticeCodes={completedPaymentNoticeCodes}
-          maxVisiblePaymentCount={maxVisiblePaymentCount}
-          presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
-        />
-
-        {!isCancelled && RA.isNonEmpty(f24List) ? (
-          <>
-            <MessageF24 attachments={f24List} openPreview={openAttachment} />
-            <VSpacer size={24} />
-          </>
-        ) : null}
-
-        <MessageDetailsSection
-          title={I18n.t("features.pn.details.infoSection.title")}
-        >
-          <ListItemInfoCopy
-            value={message.iun}
-            onPress={() => clipboardSetStringWithFeedback(message.iun)}
-            accessibilityLabel={I18n.t("features.pn.details.infoSection.iun")}
-            label={I18n.t("features.pn.details.infoSection.iun")}
-          />
-          <H5 color="bluegrey">
-            {I18n.t("features.pn.details.timeline.title")}
-          </H5>
-          <VSpacer size={24} />
-          <MessageTimeline
-            message={message}
-            onExpand={() => {
-              scrollViewRef.current?.scrollToEnd({ animated: true });
-            }}
-          />
-          {frontendUrl.length > 0 && <MessageTimelineCTA url={frontendUrl} />}
-        </MessageDetailsSection>
-      </ScrollView>
-
-      {payments && !isCancelled && (
-        <MessagePaymentBottomSheet
-          messageId={messageId}
-          payments={payments}
-          presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
-        />
-      )}
-
-      <MessageFooter
-        messageId={messageId}
-        payments={payments}
-        maxVisiblePaymentCount={maxVisiblePaymentCount}
-        isCancelled={isCancelled}
-        presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
-      />
-    </>
-  );
+  messageId: UIMessageId;
+  service?: ServicePublic;
+  payments?: ReadonlyArray<NotificationPaymentInfo>;
 };
+
+export const MessageDetails = ({ message, service }: MessageDetailsProps) => (
+  <ScrollView>
+    <MessageDetailHeader
+      service={service}
+      sender={message.senderDenomination}
+      subject={message.subject}
+      createdAt={message.created_at}
+    />
+    <MessageDetailsContent abstract={message.abstract} />
+  </ScrollView>
+);
diff --git a/ts/features/pn/components/MessageDetailsContent.tsx b/ts/features/pn/components/MessageDetailsContent.tsx
index 21b33cfef0c..96cbdbbe3ad 100644
--- a/ts/features/pn/components/MessageDetailsContent.tsx
+++ b/ts/features/pn/components/MessageDetailsContent.tsx
@@ -1,31 +1,21 @@
 import React from "react";
-import { View, ViewProps, StyleSheet } from "react-native";
-import { Body } from "../../../components/core/typography/Body";
-import { H1 } from "../../../components/core/typography/H1";
-import { H2 } from "../../../components/core/typography/H2";
-import { PNMessage } from "../store/types/types";
-import customVariables from "../../../theme/variables";
-import { isStringNullyOrEmpty } from "../../../utils/strings";
+import { Body, ContentWrapper, VSpacer } from "@pagopa/io-app-design-system";
 
-const styles = StyleSheet.create({
-  subject: {
-    marginTop: customVariables.spacerExtrasmallHeight
-  },
-  abstract: {
-    marginTop: customVariables.spacerExtrasmallHeight
-  }
-});
+type MessageDetailsContentProps = {
+  abstract?: string;
+};
 
-type Props = Readonly<{ message: PNMessage }> & ViewProps;
+export const MessageDetailsContent = ({
+  abstract
+}: MessageDetailsContentProps) => {
+  if (abstract === undefined) {
+    return null;
+  }
 
-export const MessageDetailsContent = (props: Props) => (
-  <View style={props.style}>
-    {!isStringNullyOrEmpty(props.message.senderDenomination) && (
-      <H2>{props.message.senderDenomination}</H2>
-    )}
-    <H1 style={styles.subject}>{props.message.subject}</H1>
-    {!isStringNullyOrEmpty(props.message.abstract) && (
-      <Body style={styles.abstract}>{props.message.abstract}</Body>
-    )}
-  </View>
-);
+  return (
+    <ContentWrapper>
+      <VSpacer size={16} />
+      <Body color="grey-850">{abstract}</Body>
+    </ContentWrapper>
+  );
+};
diff --git a/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx b/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx
new file mode 100644
index 00000000000..a7ec40d4d30
--- /dev/null
+++ b/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx
@@ -0,0 +1,188 @@
+import React from "react";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { act, fireEvent } from "@testing-library/react-native";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { LegacyMessageDetails } from "../LegacyMessageDetails";
+import { GlobalState } from "../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import PN_ROUTES from "../../navigation/routes";
+import { UIAttachment, UIMessageId } from "../../../messages/types";
+import { PNMessage } from "../../store/types/types";
+import { Download } from "../../../messages/store/reducers/downloads";
+import { NotificationRecipient } from "../../../../../definitions/pn/NotificationRecipient";
+import { ATTACHMENT_CATEGORY } from "../../../messages/types/attachmentCategory";
+
+const mockedOnAttachmentSelect = jest.fn();
+
+jest.mock("../../../messages/hooks/useAttachmentDownload", () => ({
+  useAttachmentDownload: (
+    _attachment: UIAttachment,
+    _openPreview: (attachment: UIAttachment) => void
+  ) => ({
+    onAttachmentSelect: mockedOnAttachmentSelect,
+    downloadPot: { kind: "PotNone" } as pot.Pot<Download, Error>
+  })
+}));
+
+describe("LegacyMessageDetails component", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should not show the cancelled banner when the PN message is not cancelled", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(generatePnMessage())
+    );
+    expect(component.queryByTestId("PnCancelledMessageBanner")).toBeFalsy();
+  });
+
+  it("every attachment item should have a full opaque style when the PN message is not cancelled", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(generatePnMessage())
+    );
+    const messageAttachmentComponents = component.queryAllByTestId(
+      "MessageAttachmentTouchable"
+    );
+    expect(messageAttachmentComponents.length).toBe(2);
+
+    messageAttachmentComponents.forEach(messageAttachmentComponent => {
+      const opacity = messageAttachmentComponent?.props.style.opacity;
+      expect(opacity).toBe(1.0);
+    });
+  });
+
+  it("should show the cancelled banner when the PN message is cancelled", () => {
+    const { component } = renderComponent(
+      generateComponentProperties({
+        ...generatePnMessage(),
+        isCancelled: true
+      })
+    );
+    expect(component.queryByTestId("PnCancelledMessageBanner")).toBeDefined();
+  });
+
+  it("every attachment item should have a semi-transparent style when the PN message is cancelled", () => {
+    const { component } = renderComponent(
+      generateComponentProperties({
+        ...generatePnMessage(),
+        isCancelled: true
+      })
+    );
+    const messageAttachmentComponents = component.queryAllByTestId(
+      "MessageAttachmentTouchable"
+    );
+    expect(messageAttachmentComponents.length).toBe(2);
+
+    messageAttachmentComponents.forEach(messageAttachmentComponent => {
+      const opacity = messageAttachmentComponent?.props.style.opacity;
+      expect(opacity).toBe(0.5);
+    });
+  });
+
+  it("every attachment item should handle input when the PN message not is cancelled", async () => {
+    const { component } = renderComponent(
+      generateComponentProperties(generatePnMessage())
+    );
+    const messageAttachmentComponents = component.queryAllByTestId(
+      "MessageAttachmentTouchable"
+    );
+    expect(messageAttachmentComponents.length).toBe(2);
+    await act(() => {
+      messageAttachmentComponents.forEach(messageAttachmentComponent =>
+        fireEvent.press(messageAttachmentComponent)
+      );
+    });
+    expect(mockedOnAttachmentSelect).toHaveBeenCalledTimes(
+      messageAttachmentComponents.length
+    );
+  });
+
+  it("every attachment item should not handle input when the PN message is cancelled", async () => {
+    const { component } = renderComponent(
+      generateComponentProperties({ ...generatePnMessage(), isCancelled: true })
+    );
+    const messageAttachmentComponents = component.queryAllByTestId(
+      "MessageAttachmentTouchable"
+    );
+    expect(messageAttachmentComponents.length).toBe(2);
+    // eslint-disable-next-line sonarjs/no-identical-functions
+    await act(() => {
+      messageAttachmentComponents.forEach(messageAttachmentComponent =>
+        fireEvent.press(messageAttachmentComponent)
+      );
+    });
+    expect(mockedOnAttachmentSelect).toHaveBeenCalledTimes(0);
+  });
+
+  it("should NOT render the F24 section if there are no multiple F24", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(generatePnMessage())
+    );
+    expect(component.queryByTestId("pn-message-f24-section")).toBeFalsy();
+  });
+});
+
+const generateTestMessageId = () => "00000000000000000000000004" as UIMessageId;
+const generateTestFiscalCode = () => "AAABBB00A00A000A";
+const generatePnMessage = (): PNMessage => ({
+  created_at: new Date(),
+  iun: "731143-7-0317-8200-0",
+  subject: "This is the message subject",
+  senderDenomination: "Sender denomination",
+  abstract: "Message abstract",
+  notificationStatusHistory: [],
+  recipients: [
+    {
+      recipientType: "-",
+      taxId: generateTestFiscalCode(),
+      denomination: "AaAaAa BbBbBb",
+      payment: {
+        noticeCode: "026773337463073118",
+        creditorTaxId: "00000000009"
+      }
+    }
+  ] as Array<NotificationRecipient>,
+  attachments: [
+    {
+      messageId: generateTestMessageId(),
+      id: "1",
+      displayName: "A First Attachment",
+      contentType: "application/pdf",
+      category: ATTACHMENT_CATEGORY.DOCUMENT,
+      resourceUrl: { href: "/resource/attachment1.pdf" }
+    },
+    {
+      messageId: generateTestMessageId(),
+      id: "2",
+      displayName: "A Second Attachment",
+      contentType: "application/pdf",
+      category: ATTACHMENT_CATEGORY.DOCUMENT,
+      resourceUrl: { href: "/resource/attachment2.pdf" }
+    }
+  ] as Array<UIAttachment>
+});
+const generateComponentProperties = (pnMessage: PNMessage) => ({
+  payments: undefined,
+  messageId: generateTestMessageId(),
+  message: pnMessage,
+  service: undefined
+});
+
+const renderComponent = (
+  props: React.ComponentProps<typeof LegacyMessageDetails>
+) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const store = createStore(appReducer, globalState as any);
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <LegacyMessageDetails {...props} />,
+      PN_ROUTES.MESSAGE_DETAILS,
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/pn/components/__test__/MessageDetails.test.tsx b/ts/features/pn/components/__test__/MessageDetails.test.tsx
index 11a7c0e7b65..b6c8687b84c 100644
--- a/ts/features/pn/components/__test__/MessageDetails.test.tsx
+++ b/ts/features/pn/components/__test__/MessageDetails.test.tsx
@@ -1,171 +1,38 @@
 import React from "react";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { act, fireEvent } from "@testing-library/react-native";
-import { createStore } from "redux";
+import configureMockStore from "redux-mock-store";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
 import { applicationChangeState } from "../../../../store/actions/application";
 import { appReducer } from "../../../../store/reducers";
 import { MessageDetails } from "../MessageDetails";
 import { GlobalState } from "../../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
-import PN_ROUTES from "../../navigation/routes";
-import { UIAttachment, UIMessageId } from "../../../messages/types";
 import { PNMessage } from "../../store/types/types";
-import { Download } from "../../../messages/store/reducers/downloads";
-import { NotificationRecipient } from "../../../../../definitions/pn/NotificationRecipient";
-import { ATTACHMENT_CATEGORY } from "../../../messages/types/attachmentCategory";
+import { thirdPartyMessage } from "../../__mocks__/message";
+import { toPNMessage } from "../../store/types/transformers";
+import { UIMessageId } from "../../../messages/types";
 
-const mockedOnAttachmentSelect = jest.fn();
-
-jest.mock("../../../messages/hooks/useAttachmentDownload", () => ({
-  useAttachmentDownload: (
-    _attachment: UIAttachment,
-    _openPreview: (attachment: UIAttachment) => void
-  ) => ({
-    onAttachmentSelect: mockedOnAttachmentSelect,
-    downloadPot: { kind: "PotNone" } as pot.Pot<Download, Error>
-  })
-}));
+const pnMessage = pipe(thirdPartyMessage, toPNMessage, O.toUndefined);
 
 describe("MessageDetails component", () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should not show the cancelled banner when the PN message is not cancelled", () => {
-    const { component } = renderComponent(
-      generateComponentProperties(generatePnMessage())
-    );
-    expect(component.queryByTestId("PnCancelledMessageBanner")).toBeFalsy();
-  });
-
-  it("every attachment item should have a full opaque style when the PN message is not cancelled", () => {
-    const { component } = renderComponent(
-      generateComponentProperties(generatePnMessage())
-    );
-    const messageAttachmentComponents = component.queryAllByTestId(
-      "MessageAttachmentTouchable"
-    );
-    expect(messageAttachmentComponents.length).toBe(2);
-
-    messageAttachmentComponents.forEach(messageAttachmentComponent => {
-      const opacity = messageAttachmentComponent?.props.style.opacity;
-      expect(opacity).toBe(1.0);
-    });
-  });
-
-  it("should show the cancelled banner when the PN message is cancelled", () => {
+  it("should match the snapshot", () => {
     const { component } = renderComponent(
-      generateComponentProperties({
-        ...generatePnMessage(),
-        isCancelled: true
-      })
+      generateComponentProperties(
+        thirdPartyMessage.id as UIMessageId,
+        pnMessage!
+      )
     );
-    expect(component.queryByTestId("PnCancelledMessageBanner")).toBeDefined();
-  });
-
-  it("every attachment item should have a semi-transparent style when the PN message is cancelled", () => {
-    const { component } = renderComponent(
-      generateComponentProperties({
-        ...generatePnMessage(),
-        isCancelled: true
-      })
-    );
-    const messageAttachmentComponents = component.queryAllByTestId(
-      "MessageAttachmentTouchable"
-    );
-    expect(messageAttachmentComponents.length).toBe(2);
-
-    messageAttachmentComponents.forEach(messageAttachmentComponent => {
-      const opacity = messageAttachmentComponent?.props.style.opacity;
-      expect(opacity).toBe(0.5);
-    });
-  });
-
-  it("every attachment item should handle input when the PN message not is cancelled", async () => {
-    const { component } = renderComponent(
-      generateComponentProperties(generatePnMessage())
-    );
-    const messageAttachmentComponents = component.queryAllByTestId(
-      "MessageAttachmentTouchable"
-    );
-    expect(messageAttachmentComponents.length).toBe(2);
-    await act(() => {
-      messageAttachmentComponents.forEach(messageAttachmentComponent =>
-        fireEvent.press(messageAttachmentComponent)
-      );
-    });
-    expect(mockedOnAttachmentSelect).toHaveBeenCalledTimes(
-      messageAttachmentComponents.length
-    );
-  });
-
-  it("every attachment item should not handle input when the PN message is cancelled", async () => {
-    const { component } = renderComponent(
-      generateComponentProperties({ ...generatePnMessage(), isCancelled: true })
-    );
-    const messageAttachmentComponents = component.queryAllByTestId(
-      "MessageAttachmentTouchable"
-    );
-    expect(messageAttachmentComponents.length).toBe(2);
-    // eslint-disable-next-line sonarjs/no-identical-functions
-    await act(() => {
-      messageAttachmentComponents.forEach(messageAttachmentComponent =>
-        fireEvent.press(messageAttachmentComponent)
-      );
-    });
-    expect(mockedOnAttachmentSelect).toHaveBeenCalledTimes(0);
-  });
-
-  it("should NOT render the F24 section if there are no multiple F24", () => {
-    const { component } = renderComponent(
-      generateComponentProperties(generatePnMessage())
-    );
-    expect(component.queryByTestId("pn-message-f24-section")).toBeFalsy();
+    expect(component).toMatchSnapshot();
   });
 });
 
-const generateTestMessageId = () => "00000000000000000000000004" as UIMessageId;
-const generateTestFiscalCode = () => "AAABBB00A00A000A";
-const generatePnMessage = (): PNMessage => ({
-  iun: "731143-7-0317-8200-0",
-  subject: "This is the message subject",
-  senderDenomination: "Sender denomination",
-  abstract: "Message abstract",
-  notificationStatusHistory: [],
-  recipients: [
-    {
-      recipientType: "-",
-      taxId: generateTestFiscalCode(),
-      denomination: "AaAaAa BbBbBb",
-      payment: {
-        noticeCode: "026773337463073118",
-        creditorTaxId: "00000000009"
-      }
-    }
-  ] as Array<NotificationRecipient>,
-  attachments: [
-    {
-      messageId: generateTestMessageId(),
-      id: "1",
-      displayName: "A First Attachment",
-      contentType: "application/pdf",
-      category: ATTACHMENT_CATEGORY.DOCUMENT,
-      resourceUrl: { href: "/resource/attachment1.pdf" }
-    },
-    {
-      messageId: generateTestMessageId(),
-      id: "2",
-      displayName: "A Second Attachment",
-      contentType: "application/pdf",
-      category: ATTACHMENT_CATEGORY.DOCUMENT,
-      resourceUrl: { href: "/resource/attachment2.pdf" }
-    }
-  ] as Array<UIAttachment>
-});
-const generateComponentProperties = (pnMessage: PNMessage) => ({
+const generateComponentProperties = (
+  messageId: UIMessageId,
+  message: PNMessage
+) => ({
+  messageId,
+  message,
   payments: undefined,
-  messageId: generateTestMessageId(),
-  message: pnMessage,
   service: undefined
 });
 
@@ -173,12 +40,13 @@ const renderComponent = (
   props: React.ComponentProps<typeof MessageDetails>
 ) => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
-  const store = createStore(appReducer, globalState as any);
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(globalState);
 
   return {
     component: renderScreenWithNavigationStoreContext<GlobalState>(
       () => <MessageDetails {...props} />,
-      PN_ROUTES.MESSAGE_DETAILS,
+      "DUMMY_ROUTE",
       {},
       store
     ),
diff --git a/ts/features/pn/components/__test__/MessageDetailsContent.test.tsx b/ts/features/pn/components/__test__/MessageDetailsContent.test.tsx
new file mode 100644
index 00000000000..31e5a7c3603
--- /dev/null
+++ b/ts/features/pn/components/__test__/MessageDetailsContent.test.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { MessageDetailsContent } from "../MessageDetailsContent";
+
+describe("MessageDetailsContent component", () => {
+  it("should match the snapshot when abstract is defined", () => {
+    const component = render(<MessageDetailsContent abstract="abstract" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should match the snapshot when abstract is not defined", () => {
+    const component = render(<MessageDetailsContent />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
new file mode 100644
index 00000000000..45785dc4e5f
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
@@ -0,0 +1,449 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetails component should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="box-none"
+      style={
+        Object {
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        importantForAccessibility="auto"
+        onLayout={[Function]}
+        pointerEvents="box-none"
+        style={null}
+      >
+        <View
+          collapsable={false}
+          pointerEvents="box-none"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "zIndex": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "borderBottomColor": "rgb(216, 216, 216)",
+                "flex": 1,
+                "shadowColor": "rgb(216, 216, 216)",
+                "shadowOffset": Object {
+                  "height": 0.5,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.85,
+                "shadowRadius": 0,
+              }
+            }
+          />
+        </View>
+        <View
+          collapsable={false}
+          pointerEvents="box-none"
+          style={
+            Object {
+              "height": 64,
+              "maxHeight": undefined,
+              "minHeight": undefined,
+              "opacity": undefined,
+              "transform": undefined,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+            style={
+              Object {
+                "height": 20,
+              }
+            }
+          />
+          <View
+            pointerEvents="box-none"
+            style={
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "justifyContent": "center",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "marginHorizontal": 16,
+                  "opacity": 1,
+                }
+              }
+            >
+              <Text
+                accessibilityRole="header"
+                aria-level="1"
+                collapsable={false}
+                numberOfLines={1}
+                onLayout={[Function]}
+                style={
+                  Object {
+                    "color": "rgb(28, 28, 30)",
+                    "fontSize": 17,
+                    "fontWeight": "600",
+                  }
+                }
+              >
+                DUMMY_ROUTE
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="box-none"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        />
+        <View
+          accessibilityElementsHidden={false}
+          closing={false}
+          gestureVelocityImpact={0.3}
+          importantForAccessibility="auto"
+          onClose={[Function]}
+          onGestureBegin={[Function]}
+          onGestureCanceled={[Function]}
+          onGestureEnd={[Function]}
+          onOpen={[Function]}
+          onTransition={[Function]}
+          pointerEvents="box-none"
+          style={
+            Array [
+              Object {
+                "overflow": undefined,
+              },
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+            ]
+          }
+          transitionSpec={
+            Object {
+              "close": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+              "open": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            needsOffscreenAlphaCompositing={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              forwardedRef={[Function]}
+              handlerTag={1}
+              handlerType="PanGestureHandler"
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              style={
+                Object {
+                  "flex": 1,
+                  "transform": Array [
+                    Object {
+                      "translateX": 0,
+                    },
+                    Object {
+                      "translateX": 0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="none"
+                style={
+                  Object {
+                    "backgroundColor": "#FFFFFF",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "shadowColor": "#000",
+                    "shadowOffset": Object {
+                      "height": 1,
+                      "width": -1,
+                    },
+                    "shadowOpacity": 0.3,
+                    "shadowRadius": 5,
+                    "top": 0,
+                    "width": 3,
+                  }
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    Array [
+                      Object {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
+                  >
+                    <RCTScrollView>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "paddingHorizontal": 24,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="SemiBold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 24,
+                                "lineHeight": 34,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "600",
+                                },
+                              ]
+                            }
+                            testID="message-header-subject"
+                            weight="SemiBold"
+                          >
+                            ######## subject ########
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 8,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="blue"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontSize="regular"
+                            fontStyle={
+                              Object {
+                                "fontSize": 14,
+                                "lineHeight": 21,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            01 Jan 2020, 00:00
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 8,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "backgroundColor": "#D2D6E3",
+                                "height": 0.5,
+                              }
+                            }
+                          />
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "paddingHorizontal": 24,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-850"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#2B2E38",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            ######## abstract ########
+                          </Text>
+                        </View>
+                      </View>
+                    </RCTScrollView>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap
new file mode 100644
index 00000000000..19f593ad32a
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsContent component should match the snapshot when abstract is defined 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 24,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "height": 16,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="grey-850"
+    defaultColor="bluegrey"
+    defaultWeight="Regular"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 16,
+        "lineHeight": 24,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        Object {
+          "color": "#2B2E38",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+      ]
+    }
+    weight="Regular"
+  >
+    abstract
+  </Text>
+</View>
+`;
+
+exports[`MessageDetailsContent component should match the snapshot when abstract is not defined 1`] = `null`;
diff --git a/ts/features/pn/navigation/navigator.tsx b/ts/features/pn/navigation/navigator.tsx
index 5b6a533ca60..d837d801971 100644
--- a/ts/features/pn/navigation/navigator.tsx
+++ b/ts/features/pn/navigation/navigator.tsx
@@ -2,30 +2,50 @@ import * as React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { isGestureEnabled } from "../../../utils/navigation";
 import { MessageDetailsScreen } from "../screens/MessageDetailsScreen";
+import { LegacyMessageDetailsScreen } from "../screens/LegacyMessageDetailsScreen";
 import { AttachmentPreviewScreen } from "../screens/AttachmentPreviewScreen";
 import { PaidPaymentScreen } from "../screens/PaidPaymentScreen";
+import { useIOSelector } from "../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
 import { PnParamsList } from "./params";
 import PN_ROUTES from "./routes";
 
 const Stack = createStackNavigator<PnParamsList>();
 
-export const PnStackNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={PN_ROUTES.MESSAGE_DETAILS}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={PN_ROUTES.MESSAGE_DETAILS}
-      component={MessageDetailsScreen}
-    />
-    <Stack.Screen
-      name={PN_ROUTES.MESSAGE_ATTACHMENT}
-      component={AttachmentPreviewScreen}
-    />
-    <Stack.Screen
-      name={PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT}
-      component={PaidPaymentScreen}
-    />
-  </Stack.Navigator>
-);
+export const PnStackNavigator = () => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+
+  return (
+    <Stack.Navigator
+      initialRouteName={PN_ROUTES.MESSAGE_DETAILS}
+      headerMode="screen"
+      screenOptions={{ gestureEnabled: isGestureEnabled }}
+    >
+      <Stack.Screen
+        name={PN_ROUTES.MESSAGE_DETAILS}
+        component={
+          isDesignSystemEnabled
+            ? MessageDetailsScreen
+            : LegacyMessageDetailsScreen
+        }
+        options={{
+          headerShown: isDesignSystemEnabled
+        }}
+      />
+      <Stack.Screen
+        name={PN_ROUTES.MESSAGE_ATTACHMENT}
+        component={AttachmentPreviewScreen}
+        options={{
+          headerShown: false
+        }}
+      />
+      <Stack.Screen
+        name={PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT}
+        component={PaidPaymentScreen}
+        options={{
+          headerShown: false
+        }}
+      />
+    </Stack.Navigator>
+  );
+};
diff --git a/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx b/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx
new file mode 100644
index 00000000000..7d2ad7d08a2
--- /dev/null
+++ b/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx
@@ -0,0 +1,132 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import React from "react";
+import { SafeAreaView } from "react-native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useStore } from "react-redux";
+import { IOStyles } from "../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
+import I18n from "../../../i18n";
+import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { serviceByIdSelector } from "../../../store/reducers/entities/services/servicesById";
+import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
+import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
+import { LegacyMessageDetails } from "../components/LegacyMessageDetails";
+import { PnParamsList } from "../navigation/params";
+import { pnMessageFromIdSelector } from "../store/reducers";
+import { cancelPreviousAttachmentDownload } from "../../messages/store/actions";
+import { profileFiscalCodeSelector } from "../../../store/reducers/profile";
+import {
+  containsF24FromPNMessagePot,
+  isCancelledFromPNMessagePot,
+  paymentsFromPNMessagePot
+} from "../utils";
+import { trackPNUxSuccess } from "../analytics";
+import { isStrictSome } from "../../../utils/pot";
+import {
+  cancelPaymentStatusTracking,
+  cancelQueuedPaymentUpdates,
+  clearSelectedPayment,
+  startPaymentStatusTracking,
+  updatePaymentForMessage
+} from "../store/actions";
+import { GlobalState } from "../../../store/reducers/types";
+import { selectedPaymentIdSelector } from "../store/reducers/payments";
+import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
+import { renderInfoRasterImage } from "../../../components/infoScreen/imageRendering";
+import genericErrorIcon from "../../../../img/wallet/errors/generic-error-icon.png";
+
+export const LegacyMessageDetailsScreen = (
+  props: IOStackNavigationRouteProps<PnParamsList, "PN_ROUTES_MESSAGE_DETAILS">
+): React.ReactElement => {
+  const { messageId, serviceId, firstTimeOpening } = props.route.params;
+
+  const dispatch = useIODispatch();
+  const navigation = useNavigation();
+
+  const service = pot.toUndefined(
+    useIOSelector(state => serviceByIdSelector(state, serviceId))
+  );
+
+  const currentFiscalCode = useIOSelector(profileFiscalCodeSelector);
+  const messagePot = useIOSelector(state =>
+    pnMessageFromIdSelector(state, messageId)
+  );
+  const payments = paymentsFromPNMessagePot(currentFiscalCode, messagePot);
+
+  const customGoBack = React.useCallback(() => {
+    dispatch(cancelPreviousAttachmentDownload());
+    dispatch(cancelQueuedPaymentUpdates());
+    dispatch(cancelPaymentStatusTracking());
+    navigation.goBack();
+  }, [dispatch, navigation]);
+
+  useOnFirstRender(() => {
+    dispatch(startPaymentStatusTracking(messageId));
+
+    if (isStrictSome(messagePot)) {
+      const paymentCount = payments?.length ?? 0;
+      const isCancelled = isCancelledFromPNMessagePot(messagePot);
+      const containsF24 = containsF24FromPNMessagePot(messagePot);
+
+      trackPNUxSuccess(
+        paymentCount,
+        firstTimeOpening,
+        isCancelled,
+        containsF24
+      );
+    }
+  });
+
+  const store = useStore();
+  useFocusEffect(
+    React.useCallback(() => {
+      const globalState = store.getState() as GlobalState;
+      const selectedPaymentId = selectedPaymentIdSelector(globalState);
+      if (selectedPaymentId) {
+        dispatch(clearSelectedPayment());
+        dispatch(
+          updatePaymentForMessage.request({
+            messageId,
+            paymentId: selectedPaymentId
+          })
+        );
+      }
+    }, [dispatch, messageId, store])
+  );
+
+  return (
+    <BaseScreenComponent
+      goBack={customGoBack}
+      headerTitle={I18n.t("features.pn.details.title")}
+      contextualHelp={emptyContextualHelp}
+    >
+      <SafeAreaView style={IOStyles.flex}>
+        {pipe(
+          messagePot,
+          pot.toOption,
+          O.flatten,
+          O.fold(
+            () => (
+              <InfoScreenComponent
+                image={renderInfoRasterImage(genericErrorIcon)}
+                title={I18n.t("features.pn.details.loadError.title")}
+                body={I18n.t("features.pn.details.loadError.body")}
+              />
+            ),
+            message => (
+              <LegacyMessageDetails
+                messageId={messageId}
+                message={message}
+                service={service}
+                payments={payments}
+              />
+            )
+          )
+        )}
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
diff --git a/ts/features/pn/screens/MessageDetailsScreen.tsx b/ts/features/pn/screens/MessageDetailsScreen.tsx
index bd84320d4a5..cc4ff8e8dbe 100644
--- a/ts/features/pn/screens/MessageDetailsScreen.tsx
+++ b/ts/features/pn/screens/MessageDetailsScreen.tsx
@@ -1,19 +1,19 @@
+import React, { useCallback } from "react";
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute
+} from "@react-navigation/native";
+import { useStore } from "react-redux";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import React from "react";
-import { SafeAreaView } from "react-native";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import { useStore } from "react-redux";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { UIMessageId } from "../../messages/types";
 import { serviceByIdSelector } from "../../../store/reducers/entities/services/servicesById";
-import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
 import { MessageDetails } from "../components/MessageDetails";
 import { PnParamsList } from "../navigation/params";
@@ -36,40 +36,48 @@ import {
 } from "../store/actions";
 import { GlobalState } from "../../../store/reducers/types";
 import { selectedPaymentIdSelector } from "../store/reducers/payments";
-import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
-import { renderInfoRasterImage } from "../../../components/infoScreen/imageRendering";
-import genericErrorIcon from "../../../../img/wallet/errors/generic-error-icon.png";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
 
-export type MessageDetailsScreenNavigationParams = Readonly<{
+export type MessageDetailsScreenNavigationParams = {
   messageId: UIMessageId;
   serviceId: ServiceId;
   firstTimeOpening: boolean;
-}>;
+};
 
-export const MessageDetailsScreen = (
-  props: IOStackNavigationRouteProps<PnParamsList, "PN_ROUTES_MESSAGE_DETAILS">
-): React.ReactElement => {
-  const { messageId, serviceId, firstTimeOpening } = props.route.params;
+type MessageDetailsRouteProps = RouteProp<
+  PnParamsList,
+  "PN_ROUTES_MESSAGE_DETAILS"
+>;
 
+export const MessageDetailsScreen = () => {
   const dispatch = useIODispatch();
   const navigation = useNavigation();
+  const route = useRoute<MessageDetailsRouteProps>();
+
+  const { messageId, serviceId, firstTimeOpening } = route.params;
 
   const service = pot.toUndefined(
     useIOSelector(state => serviceByIdSelector(state, serviceId))
   );
-
   const currentFiscalCode = useIOSelector(profileFiscalCodeSelector);
   const messagePot = useIOSelector(state =>
     pnMessageFromIdSelector(state, messageId)
   );
   const payments = paymentsFromPNMessagePot(currentFiscalCode, messagePot);
 
-  const customGoBack = React.useCallback(() => {
+  const goBack = useCallback(() => {
     dispatch(cancelPreviousAttachmentDownload());
     dispatch(cancelQueuedPaymentUpdates());
     dispatch(cancelPaymentStatusTracking());
     navigation.goBack();
-  }, [dispatch, navigation]);
+  }, []);
+
+  useHeaderSecondLevel({
+    title: "",
+    goBack,
+    supportRequest: true
+  });
 
   useOnFirstRender(() => {
     dispatch(startPaymentStatusTracking(messageId));
@@ -90,7 +98,7 @@ export const MessageDetailsScreen = (
 
   const store = useStore();
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       const globalState = store.getState() as GlobalState;
       const selectedPaymentId = selectedPaymentIdSelector(globalState);
       if (selectedPaymentId) {
@@ -106,35 +114,29 @@ export const MessageDetailsScreen = (
   );
 
   return (
-    <BaseScreenComponent
-      goBack={customGoBack}
-      headerTitle={I18n.t("features.pn.details.title")}
-      contextualHelp={emptyContextualHelp}
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        {pipe(
-          messagePot,
-          pot.toOption,
-          O.flatten,
-          O.fold(
-            () => (
-              <InfoScreenComponent
-                image={renderInfoRasterImage(genericErrorIcon)}
-                title={I18n.t("features.pn.details.loadError.title")}
-                body={I18n.t("features.pn.details.loadError.body")}
-              />
-            ),
-            message => (
-              <MessageDetails
-                messageId={messageId}
-                message={message}
-                service={service}
-                payments={payments}
-              />
-            )
+    <>
+      {pipe(
+        messagePot,
+        pot.toOption,
+        O.flatten,
+        O.fold(
+          () => (
+            <OperationResultScreenContent
+              pictogram="umbrellaNew"
+              title={I18n.t("features.pn.details.loadError.title")}
+              subtitle={I18n.t("features.pn.details.loadError.body")}
+            />
+          ),
+          message => (
+            <MessageDetails
+              messageId={messageId}
+              message={message}
+              service={service}
+              payments={payments}
+            />
           )
-        )}
-      </SafeAreaView>
-    </BaseScreenComponent>
+        )
+      )}
+    </>
   );
 };
diff --git a/ts/features/pn/screens/__test__/MessageDetailsScreen.test.tsx b/ts/features/pn/screens/__test__/MessageDetailsScreen.test.tsx
new file mode 100644
index 00000000000..0aa4268dca0
--- /dev/null
+++ b/ts/features/pn/screens/__test__/MessageDetailsScreen.test.tsx
@@ -0,0 +1,83 @@
+import configureMockStore from "redux-mock-store";
+import { Action, Store } from "redux";
+import PN_ROUTES from "../../navigation/routes";
+import { GlobalState } from "../../../../store/reducers/types";
+import { appReducer } from "../../../../store/reducers";
+import { MessageDetailsScreen } from "../MessageDetailsScreen";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { reproduceSequence } from "../../../../utils/tests";
+import {
+  loadMessageById,
+  loadMessageDetails,
+  loadThirdPartyMessage
+} from "../../../messages/store/actions";
+import {
+  toUIMessage,
+  toUIMessageDetails
+} from "../../../messages/store/reducers/transformers";
+import { message_1 } from "../../../messages/__mocks__/message";
+import { loadServiceDetail } from "../../../../store/actions/services";
+import { service_1 } from "../../../messages/__mocks__/messages";
+import { UIMessageId } from "../../../messages/types";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { thirdPartyMessage } from "../../__mocks__/message";
+
+describe("MessageDetailsScreen", () => {
+  it("should match the snapshot when there is an error", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active")
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const mockStore = configureMockStore<GlobalState>();
+    const store: Store<GlobalState> = mockStore(state);
+
+    const { component } = renderComponent(store);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should match the snapshot when everything went fine", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageById.success(toUIMessage(message_1)),
+      loadServiceDetail.success(service_1),
+      loadMessageDetails.success(toUIMessageDetails(message_1)),
+      loadThirdPartyMessage.success({
+        id: message_1.id as UIMessageId,
+        content: thirdPartyMessage
+      })
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const mockStore = configureMockStore<GlobalState>();
+    const store: Store<GlobalState> = mockStore(state);
+
+    const { component } = renderComponent(store);
+    expect(component).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (store: Store<GlobalState>) => {
+  const { id, sender_service_id } = message_1;
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      MessageDetailsScreen,
+      PN_ROUTES.MESSAGE_DETAILS,
+      {
+        firstTimeOpening: false,
+        messageId: id,
+        serviceId: sender_service_id
+      },
+      store
+    )
+  };
+};
diff --git a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
new file mode 100644
index 00000000000..48edcca56d3
--- /dev/null
+++ b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
@@ -0,0 +1,1372 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsScreen should match the snapshot when everything went fine 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="box-none"
+      style={
+        Object {
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        importantForAccessibility="auto"
+        onLayout={[Function]}
+        pointerEvents="box-none"
+        style={null}
+      >
+        <View
+          accessibilityRole="header"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#FFFFFF",
+              },
+              Object {
+                "borderBottomWidth": 1,
+              },
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "borderColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 20,
+                },
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "height": 56,
+                  "justifyContent": "space-between",
+                  "paddingHorizontal": 24,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Back"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "disabled": false,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              hitSlop={8}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "height": 24,
+                      "width": 24,
+                    },
+                    Object {
+                      "alignItems": "center",
+                    },
+                    Object {
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "transform": Array [
+                        Object {
+                          "scale": undefined,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <RNSVGSvgView
+                  accessibilityElementsHidden={true}
+                  accessibilityLabel=""
+                  accessible={false}
+                  align="xMidYMid"
+                  animatedProps={
+                    Object {
+                      "color": undefined,
+                    }
+                  }
+                  bbHeight={24}
+                  bbWidth={24}
+                  color={4279111443}
+                  focusable={false}
+                  height={24}
+                  importantForAccessibility="no-hide-descendants"
+                  meetOrSlice={0}
+                  minX={0}
+                  minY={0}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "borderWidth": 0,
+                      },
+                      Object {
+                        "color": "#0E0F13",
+                      },
+                      Object {
+                        "flex": 0,
+                        "height": 24,
+                        "width": 24,
+                      },
+                    ]
+                  }
+                  tintColor={4279111443}
+                  vbHeight={24}
+                  vbWidth={24}
+                  width={24}
+                >
+                  <RNSVGGroup>
+                    <RNSVGPath
+                      clipRule={0}
+                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                      fill={
+                        Array [
+                          2,
+                        ]
+                      }
+                      fillRule={0}
+                      propList={
+                        Array [
+                          "fill",
+                          "fillRule",
+                        ]
+                      }
+                    />
+                  </RNSVGGroup>
+                </RNSVGSvgView>
+              </View>
+            </View>
+            <Text
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "flexGrow": 1,
+                    "flexShrink": 1,
+                    "fontSize": 14,
+                    "marginHorizontal": 16,
+                    "textAlign": "center",
+                  },
+                  Object {
+                    "fontFamily": "Titillium Web",
+                    "fontStyle": "normal",
+                    "fontWeight": "600",
+                  },
+                  Object {
+                    "opacity": 1,
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "flexDirection": "row",
+                  },
+                  Object {
+                    "flexShrink": 0,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="Contextual Help"
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={8}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "height": 24,
+                        "width": 24,
+                      },
+                      Object {
+                        "alignItems": "center",
+                      },
+                      Object {
+                        "justifyContent": "center",
+                      },
+                      Object {
+                        "transform": Array [
+                          Object {
+                            "scale": undefined,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                >
+                  <RNSVGSvgView
+                    accessibilityElementsHidden={true}
+                    accessibilityLabel=""
+                    accessible={false}
+                    align="xMidYMid"
+                    animatedProps={
+                      Object {
+                        "color": undefined,
+                      }
+                    }
+                    bbHeight={24}
+                    bbWidth={24}
+                    color={4279111443}
+                    focusable={false}
+                    height={24}
+                    importantForAccessibility="no-hide-descendants"
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        Object {
+                          "color": "#0E0F13",
+                        },
+                        Object {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    tintColor={4279111443}
+                    vbHeight={24}
+                    vbWidth={24}
+                    width={24}
+                  >
+                    <RNSVGGroup>
+                      <RNSVGPath
+                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                        fill={
+                          Array [
+                            2,
+                          ]
+                        }
+                        propList={
+                          Array [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="box-none"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        />
+        <View
+          accessibilityElementsHidden={false}
+          closing={false}
+          gestureVelocityImpact={0.3}
+          importantForAccessibility="auto"
+          onClose={[Function]}
+          onGestureBegin={[Function]}
+          onGestureCanceled={[Function]}
+          onGestureEnd={[Function]}
+          onOpen={[Function]}
+          onTransition={[Function]}
+          pointerEvents="box-none"
+          style={
+            Array [
+              Object {
+                "overflow": undefined,
+              },
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+            ]
+          }
+          transitionSpec={
+            Object {
+              "close": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+              "open": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            needsOffscreenAlphaCompositing={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              forwardedRef={[Function]}
+              handlerTag={3}
+              handlerType="PanGestureHandler"
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              style={
+                Object {
+                  "flex": 1,
+                  "transform": Array [
+                    Object {
+                      "translateX": 0,
+                    },
+                    Object {
+                      "translateX": 0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="none"
+                style={
+                  Object {
+                    "backgroundColor": "#FFFFFF",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "shadowColor": "#000",
+                    "shadowOffset": Object {
+                      "height": 1,
+                      "width": -1,
+                    },
+                    "shadowOpacity": 0.3,
+                    "shadowRadius": 5,
+                    "top": 0,
+                    "width": 3,
+                  }
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    Array [
+                      Object {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
+                  >
+                    <RCTScrollView>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "paddingHorizontal": 24,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="SemiBold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 24,
+                                "lineHeight": 34,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "600",
+                                },
+                              ]
+                            }
+                            testID="message-header-subject"
+                            weight="SemiBold"
+                          >
+                            ######## subject ########
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 8,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="blue"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontSize="regular"
+                            fontStyle={
+                              Object {
+                                "fontSize": 14,
+                                "lineHeight": 21,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            01 Jan 2020, 00:00
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 8,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "backgroundColor": "#D2D6E3",
+                                "height": 0.5,
+                              }
+                            }
+                          />
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "paddingHorizontal": 24,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-850"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#2B2E38",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            ######## abstract ########
+                          </Text>
+                        </View>
+                      </View>
+                    </RCTScrollView>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScreen should match the snapshot when there is an error 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="box-none"
+      style={
+        Object {
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        importantForAccessibility="auto"
+        onLayout={[Function]}
+        pointerEvents="box-none"
+        style={null}
+      >
+        <View
+          accessibilityRole="header"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#FFFFFF",
+              },
+              Object {
+                "borderBottomWidth": 1,
+              },
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "borderColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 20,
+                },
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "height": 56,
+                  "justifyContent": "space-between",
+                  "paddingHorizontal": 24,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="Back"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "disabled": false,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              hitSlop={8}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "height": 24,
+                      "width": 24,
+                    },
+                    Object {
+                      "alignItems": "center",
+                    },
+                    Object {
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "transform": Array [
+                        Object {
+                          "scale": undefined,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              >
+                <RNSVGSvgView
+                  accessibilityElementsHidden={true}
+                  accessibilityLabel=""
+                  accessible={false}
+                  align="xMidYMid"
+                  animatedProps={
+                    Object {
+                      "color": undefined,
+                    }
+                  }
+                  bbHeight={24}
+                  bbWidth={24}
+                  color={4279111443}
+                  focusable={false}
+                  height={24}
+                  importantForAccessibility="no-hide-descendants"
+                  meetOrSlice={0}
+                  minX={0}
+                  minY={0}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "borderWidth": 0,
+                      },
+                      Object {
+                        "color": "#0E0F13",
+                      },
+                      Object {
+                        "flex": 0,
+                        "height": 24,
+                        "width": 24,
+                      },
+                    ]
+                  }
+                  tintColor={4279111443}
+                  vbHeight={24}
+                  vbWidth={24}
+                  width={24}
+                >
+                  <RNSVGGroup>
+                    <RNSVGPath
+                      clipRule={0}
+                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                      fill={
+                        Array [
+                          2,
+                        ]
+                      }
+                      fillRule={0}
+                      propList={
+                        Array [
+                          "fill",
+                          "fillRule",
+                        ]
+                      }
+                    />
+                  </RNSVGGroup>
+                </RNSVGSvgView>
+              </View>
+            </View>
+            <Text
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "flexGrow": 1,
+                    "flexShrink": 1,
+                    "fontSize": 14,
+                    "marginHorizontal": 16,
+                    "textAlign": "center",
+                  },
+                  Object {
+                    "fontFamily": "Titillium Web",
+                    "fontStyle": "normal",
+                    "fontWeight": "600",
+                  },
+                  Object {
+                    "opacity": 1,
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "flexDirection": "row",
+                  },
+                  Object {
+                    "flexShrink": 0,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="Contextual Help"
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={8}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "height": 24,
+                        "width": 24,
+                      },
+                      Object {
+                        "alignItems": "center",
+                      },
+                      Object {
+                        "justifyContent": "center",
+                      },
+                      Object {
+                        "transform": Array [
+                          Object {
+                            "scale": undefined,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                >
+                  <RNSVGSvgView
+                    accessibilityElementsHidden={true}
+                    accessibilityLabel=""
+                    accessible={false}
+                    align="xMidYMid"
+                    animatedProps={
+                      Object {
+                        "color": undefined,
+                      }
+                    }
+                    bbHeight={24}
+                    bbWidth={24}
+                    color={4279111443}
+                    focusable={false}
+                    height={24}
+                    importantForAccessibility="no-hide-descendants"
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        Object {
+                          "color": "#0E0F13",
+                        },
+                        Object {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    tintColor={4279111443}
+                    vbHeight={24}
+                    vbWidth={24}
+                    width={24}
+                  >
+                    <RNSVGGroup>
+                      <RNSVGPath
+                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                        fill={
+                          Array [
+                            2,
+                          ]
+                        }
+                        propList={
+                          Array [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="box-none"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        />
+        <View
+          accessibilityElementsHidden={false}
+          closing={false}
+          gestureVelocityImpact={0.3}
+          importantForAccessibility="auto"
+          onClose={[Function]}
+          onGestureBegin={[Function]}
+          onGestureCanceled={[Function]}
+          onGestureEnd={[Function]}
+          onOpen={[Function]}
+          onTransition={[Function]}
+          pointerEvents="box-none"
+          style={
+            Array [
+              Object {
+                "overflow": undefined,
+              },
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+            ]
+          }
+          transitionSpec={
+            Object {
+              "close": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+              "open": Object {
+                "animation": "spring",
+                "config": Object {
+                  "damping": 500,
+                  "mass": 3,
+                  "overshootClamping": true,
+                  "restDisplacementThreshold": 10,
+                  "restSpeedThreshold": 10,
+                  "stiffness": 1000,
+                },
+              },
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            needsOffscreenAlphaCompositing={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              forwardedRef={[Function]}
+              handlerTag={1}
+              handlerType="PanGestureHandler"
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              style={
+                Object {
+                  "flex": 1,
+                  "transform": Array [
+                    Object {
+                      "translateX": 0,
+                    },
+                    Object {
+                      "translateX": 0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="none"
+                style={
+                  Object {
+                    "backgroundColor": "#FFFFFF",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "shadowColor": "#000",
+                    "shadowOffset": Object {
+                      "height": 1,
+                      "width": -1,
+                    },
+                    "shadowOpacity": 0.3,
+                    "shadowRadius": 5,
+                    "top": 0,
+                    "width": 3,
+                  }
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    Array [
+                      Object {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
+                  >
+                    <RCTSafeAreaView
+                      emulateUnlessSupported={true}
+                      style={
+                        Object {
+                          "flexGrow": 1,
+                          "marginHorizontal": 24,
+                        }
+                      }
+                    >
+                      <RCTScrollView
+                        centerContent={true}
+                        collapsable={false}
+                        contentContainerStyle={
+                          Array [
+                            Object {
+                              "alignContent": "center",
+                              "alignItems": "stretch",
+                              "flex": 1,
+                              "justifyContent": "center",
+                            },
+                            false,
+                          ]
+                        }
+                        handlerTag={2}
+                        handlerType="NativeViewGestureHandler"
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        waitFor={
+                          Array [
+                            Object {
+                              "current": null,
+                            },
+                          ]
+                        }
+                      >
+                        <View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              align="xMidYMid"
+                              bbHeight={120}
+                              bbWidth={120}
+                              color={4278240714}
+                              focusable={false}
+                              height={120}
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 120,
+                                    "width": 120,
+                                  },
+                                ]
+                              }
+                              tintColor={4278240714}
+                              vbHeight={240}
+                              vbWidth={240}
+                              width={120}
+                            >
+                              <RNSVGGroup>
+                                <RNSVGPath
+                                  d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
+                                  fill={4289392367}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
+                                  fill={4278240714}
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
+                                  fill={4289392367}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
+                                  fill={4278927075}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
+                                  fill={4278927075}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
+                                  fill={4278927075}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
+                                  fill={4278927075}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
+                                  fill={4278927075}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
+                                  fill={4278240714}
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                          </View>
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="SemiBold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 24,
+                                "lineHeight": 34,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "textAlign": "center",
+                                },
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "600",
+                                },
+                              ]
+                            }
+                            weight="SemiBold"
+                          >
+                            Qualcosa è andato storto
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 8,
+                              }
+                            }
+                          />
+                          <Text
+                            color="grey-650"
+                            defaultColor="blue"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 14,
+                                "lineHeight": 21,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "textAlign": "center",
+                                },
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                },
+                                Object {
+                                  "color": "#636B82",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            Non è stato possibile recuperare i dettagli del tuo messaggio. Riprova per favore
+                          </Text>
+                        </View>
+                      </RCTScrollView>
+                    </RCTSafeAreaView>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/store/types/transformers.ts b/ts/features/pn/store/types/transformers.ts
index e89ffc030b4..3b0c5269074 100644
--- a/ts/features/pn/store/types/transformers.ts
+++ b/ts/features/pn/store/types/transformers.ts
@@ -15,6 +15,7 @@ export const toPNMessage = (
     O.chainNullableK(message => message.details),
     O.map(details => ({
       ...details,
+      created_at: messageFromApi.created_at,
       attachments: pipe(
         attachmentsFromThirdPartyMessage(messageFromApi),
         O.toUndefined
diff --git a/ts/features/pn/store/types/types.ts b/ts/features/pn/store/types/types.ts
index 525cce459d3..192e7d9652a 100644
--- a/ts/features/pn/store/types/types.ts
+++ b/ts/features/pn/store/types/types.ts
@@ -1,7 +1,7 @@
 import { IOReceivedNotification } from "../../../../../definitions/pn/IOReceivedNotification";
 import { UIAttachment } from "../../../messages/types";
 
-export type PNMessage = IOReceivedNotification &
-  Readonly<{
-    attachments?: ReadonlyArray<UIAttachment>;
-  }>;
+export type PNMessage = IOReceivedNotification & {
+  created_at: Date;
+  attachments?: ReadonlyArray<UIAttachment>;
+};