diff --git a/app/containers/Separator/MessageSeparator.tsx b/app/containers/Separator/MessageSeparator.tsx
index 5a4e1bf519..bd20d746f2 100644
--- a/app/containers/Separator/MessageSeparator.tsx
+++ b/app/containers/Separator/MessageSeparator.tsx
@@ -2,52 +2,53 @@ import { type ReactElement } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import I18n from '~/i18n';
-import { formatLongDate } from '~/lib/dayjs';
 import sharedStyles from '~/views/Styles';
 import { useTheme } from '~/theme';
-import DateSeparator from './DateSeparator';
+import DateSeparator, { DateSeparatorLabel } from './DateSeparator';
 import { separatorStyles } from './styles';
 
 const styles = StyleSheet.create({
 	text: {
-		fontSize: 14,
-		...sharedStyles.textMedium
+		fontSize: 12,
+		lineHeight: 16,
+		marginLeft: 8,
+		...sharedStyles.textBold
 	},
-	marginRight: {
-		marginRight: 14
-	},
-	marginHorizontal: {
-		marginHorizontal: 14
+	dateLabel: {
+		marginHorizontal: 12
 	}
 });
 
-const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): ReactElement | null => {
+const UnreadSeparator = ({ ts }: { ts?: Date | string | null }): ReactElement => {
 	const { colors } = useTheme();
+	const lineStyle = { backgroundColor: colors.strokeError };
+
+	return (
+		<View style={separatorStyles.container}>
+			<View style={[separatorStyles.line, lineStyle]} />
+			{ts ? (
+				<>
+					<View style={styles.dateLabel}>
+						<DateSeparatorLabel ts={ts} />
+					</View>
+					<View style={[separatorStyles.line, lineStyle]} />
+				</>
+			) : null}
+			<Text style={[styles.text, { color: colors.fontDanger }]}>{I18n.t('unread_messages')}</Text>
+		</View>
+	);
+};
 
+const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): ReactElement | null => {
 	if (!ts && !unread) {
 		return null;
 	}
 
-	const unreadLine = { backgroundColor: colors.buttonBackgroundDangerDefault };
-	const unreadText = { color: colors.fontDanger };
-	if (ts && unread) {
-		return (
-			<View style={separatorStyles.container}>
-				<Text style={[styles.text, unreadText]}>{I18n.t('unread_messages')}</Text>
-				<View style={[separatorStyles.line, unreadLine, styles.marginHorizontal]} />
-				<Text style={[styles.text, unreadText]}>{formatLongDate(ts)}</Text>
-			</View>
-		);
-	}
-	if (ts) {
-		return <DateSeparator ts={ts} />;
+	if (unread) {
+		return <UnreadSeparator ts={ts} />;
 	}
-	return (
-		<View style={separatorStyles.container}>
-			<Text style={[styles.text, unreadText, styles.marginRight]}>{I18n.t('unread_messages')}</Text>
-			<View style={[separatorStyles.line, unreadLine]} />
-		</View>
-	);
+
+	return <DateSeparator ts={ts!} />;
 };
 
 export default MessageSeparator;
diff --git a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
index d61b74ca5d..de402e89cb 100644
--- a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
@@ -23097,27 +23097,63 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
         }
       }
     >
-      <Text
+      <View
         style={
           [
             {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 14,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "500",
-              "textAlign": "left",
+              "flex": 1,
+              "height": 1,
             },
             {
-              "color": "#D40C26",
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
+      />
+      <View
+        style={
+          {
+            "marginHorizontal": 12,
+          }
+        }
       >
-        unread
-      </Text>
+        <View
+          style={
+            [
+              {
+                "borderRadius": 16,
+                "paddingHorizontal": 8,
+                "paddingVertical": 2,
+              },
+              {
+                "backgroundColor": "#E4E7EA",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "700",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            November 10, 2017
+          </Text>
+        </View>
+      </View>
       <View
         style={
           [
@@ -23128,9 +23164,6 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
             {
               "backgroundColor": "#EC0D2A",
             },
-            {
-              "marginHorizontal": 14,
-            },
           ]
         }
       />
@@ -23140,11 +23173,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
@@ -23153,7 +23188,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           ]
         }
       >
-        November 10, 2017
+        unread
       </Text>
     </View>
     <ExternalKeyboardView
@@ -23621,43 +23656,42 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
         }
       }
     >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
+            },
+          ]
+        }
+      />
       <Text
         style={
           [
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
               "color": "#D40C26",
             },
-            {
-              "marginRight": 14,
-            },
           ]
         }
       >
         unread
       </Text>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EC0D2A",
-            },
-          ]
-        }
-      />
     </View>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -25338,27 +25372,63 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
         }
       }
     >
-      <Text
+      <View
         style={
           [
             {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 14,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "500",
-              "textAlign": "left",
+              "flex": 1,
+              "height": 1,
             },
             {
-              "color": "#D40C26",
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
+      />
+      <View
+        style={
+          {
+            "marginHorizontal": 12,
+          }
+        }
       >
-        unread
-      </Text>
+        <View
+          style={
+            [
+              {
+                "borderRadius": 16,
+                "paddingHorizontal": 8,
+                "paddingVertical": 2,
+              },
+              {
+                "backgroundColor": "#E4E7EA",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "700",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            November 10, 2017
+          </Text>
+        </View>
+      </View>
       <View
         style={
           [
@@ -25369,9 +25439,6 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
             {
               "backgroundColor": "#EC0D2A",
             },
-            {
-              "marginHorizontal": 14,
-            },
           ]
         }
       />
@@ -25381,11 +25448,13 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
@@ -25394,7 +25463,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           ]
         }
       >
-        November 10, 2017
+        unread
       </Text>
     </View>
     <ExternalKeyboardView
@@ -25862,43 +25931,42 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
         }
       }
     >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
+            },
+          ]
+        }
+      />
       <Text
         style={
           [
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
               "color": "#D40C26",
             },
-            {
-              "marginRight": 14,
-            },
           ]
         }
       >
         unread
       </Text>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EC0D2A",
-            },
-          ]
-        }
-      />
     </View>
     <ExternalKeyboardView
       canBeFocused={true}