diff --git a/package/src/components/ChannelPreview/ChannelMessagePreview.tsx b/package/src/components/ChannelPreview/ChannelMessagePreview.tsx
new file mode 100644
index 0000000000..0527ab3112
--- /dev/null
+++ b/package/src/components/ChannelPreview/ChannelMessagePreview.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
+import { primitives } from '../../theme';
+
+export type ChannelMessagePreviewProps = {
+  message: LocalMessage | MessageResponse | DraftMessage;
+};
+
+export const ChannelMessagePreview = ({ message }: ChannelMessagePreviewProps) => {
+  const isMessageDeleted = message?.type === 'deleted';
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const styles = useStyles({ isMessageDeleted });
+  const MessagePreviewIcon = useMessagePreviewIcon({ message });
+  const messagePreviewTitle = useMessagePreviewText({ message });
+
+  return (
+    <View style={[styles.container]}>
+      {MessagePreviewIcon ? (
+        <MessagePreviewIcon
+          height={16}
+          stroke={isMessageDeleted ? semantics.textTertiary : semantics.textSecondary}
+          width={16}
+        />
+      ) : null}
+      <Text numberOfLines={1} style={[styles.subtitle]}>
+        {messagePreviewTitle}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = ({ isMessageDeleted = false }: { isMessageDeleted?: boolean }) => {
+  const {
+    theme: {
+      channelPreview: { messagePreview },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: primitives.spacingXxs,
+        flexShrink: 1,
+        ...messagePreview.container,
+      },
+      subtitle: {
+        color: isMessageDeleted ? semantics.textTertiary : semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightRegular,
+        includeFontPadding: false,
+        lineHeight: primitives.typographyLineHeightNormal,
+        flexShrink: 1,
+        ...messagePreview.subtitle,
+      },
+    });
+  }, [
+    isMessageDeleted,
+    semantics.textTertiary,
+    semantics.textSecondary,
+    messagePreview.container,
+    messagePreview.subtitle,
+  ]);
+};
diff --git a/package/src/components/ChannelPreview/ChannelListMessageDeliveryStatus.tsx b/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
similarity index 70%
rename from package/src/components/ChannelPreview/ChannelListMessageDeliveryStatus.tsx
rename to package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
index b7ebb4afdb..4048c40920 100644
--- a/package/src/components/ChannelPreview/ChannelListMessageDeliveryStatus.tsx
+++ b/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx
@@ -1,28 +1,26 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { LocalMessage } from 'stream-chat';
+import { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { ChannelPreviewProps } from './ChannelPreview';
-import { LastMessageType } from './hooks/useChannelPreviewData';
-
-import { MessageDeliveryStatus, useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
 import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 
-export type ChannelListMessageDeliveryStatusProps = Pick<ChannelPreviewProps, 'channel'> & {
-  lastMessage: LastMessageType;
+export type ChannelMessagePreviewDeliveryStatusProps = Pick<ChannelPreviewProps, 'channel'> & {
+  message: MessageResponse | LocalMessage;
 };
 
-export const ChannelListMessageDeliveryStatus = ({
+export const ChannelMessagePreviewDeliveryStatus = ({
   channel,
-  lastMessage,
-}: ChannelListMessageDeliveryStatusProps) => {
+  message,
+}: ChannelMessagePreviewDeliveryStatusProps) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const channelConfigExists = typeof channel?.getConfig === 'function';
@@ -36,9 +34,15 @@ export const ChannelListMessageDeliveryStatus = ({
     },
   } = useTheme();
 
+  const membersWithoutSelf = useMemo(() => {
+    return Object.values(channel.state?.members || {}).filter(
+      (member) => member.user?.id !== client.user?.id,
+    );
+  }, [channel.state?.members, client.user?.id]);
+
   const isLastMessageByCurrentUser = useMemo(() => {
-    return lastMessage?.user?.id === client.user?.id;
-  }, [lastMessage, client.user?.id]);
+    return message?.user?.id === client.user?.id;
+  }, [message, client.user?.id]);
 
   const readEvents = useMemo(() => {
     if (!channelConfigExists) {
@@ -53,19 +57,23 @@ export const ChannelListMessageDeliveryStatus = ({
 
   const { status } = useMessageDeliveryStatus({
     channel,
-    lastMessage: lastMessage as LocalMessage,
+    lastMessage: message as LocalMessage,
     isReadEventsEnabled: readEvents,
   });
 
-  if (!isLastMessageByCurrentUser) {
+  if (!channel.data?.name && membersWithoutSelf.length === 1 && !isLastMessageByCurrentUser) {
     return null;
   }
 
+  if (!isLastMessageByCurrentUser) {
+    return <Text style={styles.username}>{message?.user?.name || message?.user?.id}:</Text>;
+  }
+
   return (
     <View style={styles.container}>
-      {lastMessage.status === MessageStatusTypes.SENDING ? (
+      {message.status === MessageStatusTypes.SENDING ? (
         <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
-      ) : lastMessage.status === MessageStatusTypes.RECEIVED &&
+      ) : message.status === MessageStatusTypes.RECEIVED &&
         status === MessageDeliveryStatus.READ ? (
         <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
       ) : status === MessageDeliveryStatus.DELIVERED ? (
@@ -103,6 +111,12 @@ const useStyles = () => {
         lineHeight: primitives.typographyLineHeightNormal,
         ...text,
       },
+      username: {
+        color: semantics.textTertiary,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightNormal,
+      },
     });
   }, [semantics, text, container]);
 };
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
index ab2b663db0..1277d46900 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
+++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
-
+import { ChannelMessagePreview } from './ChannelMessagePreview';
+import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewProps } from './ChannelPreview';
 
 import { ChannelTypingIndicatorPreview } from './ChannelTypingIndicatorPreview';
@@ -20,8 +20,6 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { NewPoll } from '../../icons/NewPoll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
-import { MessagePreview } from '../MessagePreview/MessagePreview';
-import { MessagePreviewUserDetails } from '../MessagePreview/MessagePreviewUserDetails';
 import { ErrorBadge } from '../ui';
 
 export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> & {
@@ -53,25 +51,6 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   const isFailedMessage =
     lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
 
-  const textStyle = useMemo(() => {
-    return [styles.subtitle];
-  }, [styles.subtitle]);
-
-  const iconProps = useMemo(() => {
-    return {
-      width: 16,
-      height: 16,
-      stroke: isMessageDeleted ? semantics.textTertiary : semantics.textSecondary,
-    };
-  }, [isMessageDeleted, semantics.textTertiary, semantics.textSecondary]);
-
-  const renderMessagePreview = useCallback(
-    (message: LocalMessage | MessageResponse | DraftMessage) => {
-      return <MessagePreview message={message} textStyle={textStyle} iconProps={iconProps} />;
-    },
-    [textStyle, iconProps],
-  );
-
   if (usersTyping.length > 0) {
     return <ChannelTypingIndicatorPreview channel={channel} usersTyping={usersTyping} />;
   }
@@ -80,7 +59,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <Text style={styles.draftText}>{t('Draft')}:</Text>
-        {renderMessagePreview(draftMessage)}
+        <ChannelMessagePreview message={draftMessage} />
       </View>
     );
   }
@@ -115,15 +94,15 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        <MessagePreviewUserDetails channel={channel} message={lastMessage} />
-        {renderMessagePreview(lastMessage)}
+        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
+        <ChannelMessagePreview message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <MessagePreviewUserDetails channel={channel} message={lastMessage} />
-        {renderMessagePreview(lastMessage)}
+        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
+        <ChannelMessagePreview message={lastMessage} />
       </View>
     );
   }
diff --git a/package/src/components/Indicators/EmptyStateIndicator.tsx b/package/src/components/Indicators/EmptyStateIndicator.tsx
index 9e585446a8..e4b9d1845d 100644
--- a/package/src/components/Indicators/EmptyStateIndicator.tsx
+++ b/package/src/components/Indicators/EmptyStateIndicator.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { useViewport } from '../../hooks/useViewport';
-import { ChatIcon, MessageBubbleEmpty, MessageIcon } from '../../icons';
+import { MessageBubbleEmpty } from '../../icons';
+import { primitives } from '../../theme';
 
 export type EmptyStateProps = {
   listType?: 'channel' | 'message' | 'threads' | 'default';
@@ -13,78 +13,81 @@ export type EmptyStateProps = {
 export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
   const {
     theme: {
-      colors: { black, grey, grey_gainsboro },
-      emptyStateIndicator: {
-        channelContainer,
-        channelDetails,
-        channelTitle,
-        messageContainer,
-        messageTitle,
-      },
+      emptyStateIndicator: { channelContainer, channelTitle, messageContainer, messageTitle },
+      semantics,
     },
   } = useTheme();
-  const { vw } = useViewport();
-  const width = vw(33);
   const { t } = useTranslationContext();
+  const styles = useStyles();
 
   switch (listType) {
     case 'channel':
       return (
         <View style={[styles.container, channelContainer]}>
-          <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />
-          <Text
-            style={[styles.channelTitle, { color: black }, channelTitle]}
-            testID='empty-channel-state-title'
-          >
-            {t("Let's start chatting!")}
-          </Text>
-          <Text
-            style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
-            testID='empty-channel-state-details'
-          >
-            {t('How about sending your first message to a friend?')}
+          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <Text style={[styles.channelTitle, channelTitle]} testID='empty-channel-state-title'>
+            {t('No conversations yet')}
           </Text>
         </View>
       );
     case 'message':
       return (
         <View style={[styles.container, messageContainer]}>
-          <ChatIcon height={width} pathFill={grey_gainsboro} width={width} />
-          <Text style={[styles.messageTitle, { color: grey_gainsboro }, messageTitle]}>
-            {t('No chats here yet…')}
-          </Text>
+          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <Text style={[styles.messageTitle, messageTitle]}>{t('No chats here yet…')}</Text>
         </View>
       );
     case 'threads':
       return (
-        <View style={[styles.container]}>
-          <MessageBubbleEmpty height={width} pathFill={'#B4BBBA'} width={width} />
-          <Text style={{ color: '#7E828B' }}>{t('No threads here yet')}...</Text>
+        <View style={styles.container}>
+          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <Text style={styles.threadText}>{t('Reply to a message to start a thread')}</Text>
         </View>
       );
     default:
-      return <Text style={[{ color: black }, messageContainer]}>No items exist</Text>;
+      return (
+        <Text style={[{ color: semantics.textSecondary }, messageContainer]}>No items exist</Text>
+      );
   }
 };
 
-const styles = StyleSheet.create({
-  channelDetails: {
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  channelTitle: {
-    fontSize: 16,
-    paddingBottom: 8,
-    paddingTop: 16,
-  },
-  container: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  messageTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    paddingBottom: 8,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      channelDetails: {
+        fontSize: 14,
+        textAlign: 'center',
+      },
+      channelTitle: {
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'center',
+        paddingVertical: primitives.spacingSm,
+      },
+      container: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center',
+      },
+      messageTitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        paddingBottom: 8,
+      },
+      threadText: {
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'center',
+        paddingVertical: primitives.spacingSm,
+      },
+    });
+  }, [semantics]);
+};
diff --git a/package/src/components/MessagePreview/MessagePreview.tsx b/package/src/components/MessagePreview/MessagePreview.tsx
deleted file mode 100644
index d78befb7da..0000000000
--- a/package/src/components/MessagePreview/MessagePreview.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import React, { useMemo } from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
-
-import dayjs from 'dayjs';
-import {
-  DraftMessage,
-  LiveLocationPayload,
-  LocalMessage,
-  MessageResponse,
-  PollState,
-} from 'stream-chat';
-
-import { useGroupedAttachments } from './hook/useGroupedAttachments';
-
-import { useTheme } from '../../contexts';
-
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { useStateStore } from '../../hooks';
-import { CircleBan } from '../../icons/CircleBan';
-import { NewFile } from '../../icons/NewFile';
-import { NewLink } from '../../icons/NewLink';
-import { NewMapPin } from '../../icons/NewMapPin';
-import { NewMic } from '../../icons/NewMic';
-import { NewPhoto } from '../../icons/NewPhoto';
-import { NewPoll } from '../../icons/NewPoll';
-import { NewVideo } from '../../icons/NewVideo';
-import { IconProps } from '../../icons/utils/base';
-import { primitives } from '../../theme';
-import { FileTypes } from '../../types/types';
-
-const selector = (nextValue: PollState) => ({
-  name: nextValue.name,
-});
-
-const MessagePreviewText = React.memo(
-  ({
-    message,
-    style,
-  }: {
-    message?: LocalMessage | MessageResponse | DraftMessage | null;
-    style?: StyleProp<TextStyle>;
-  }) => {
-    const { client } = useChatContext();
-    const poll = client.polls.fromState(message?.poll_id ?? '');
-    const { name: pollName } = useStateStore(poll?.state, selector) ?? {};
-    const styles = useStyles();
-    const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
-      message?.attachments,
-    );
-    const attachmentsLength = message?.attachments?.length;
-
-    const subtitle = useMemo(() => {
-      const onlyImages = images?.length && images?.length === attachmentsLength;
-      const onlyVideos = videos?.length && videos?.length === attachmentsLength;
-      const onlyFiles = files?.length && files?.length === attachmentsLength;
-      const onlyAudio = audios?.length === attachmentsLength;
-      const onlyVoiceRecordings =
-        voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
-
-      if (message?.type === 'deleted') {
-        return 'Message deleted';
-      }
-
-      if (pollName) {
-        return pollName;
-      }
-
-      if (message?.shared_location) {
-        if (
-          // There is a problem with types in Draft Message, and its not able to infer the type of `end_at` correctly, so the `as` is used.
-          (message?.shared_location as LiveLocationPayload)?.end_at &&
-          new Date((message?.shared_location as LiveLocationPayload)?.end_at) > new Date()
-        ) {
-          return 'Live Location';
-        }
-        return 'Location';
-      }
-
-      if (message?.text) {
-        return message?.text;
-      }
-
-      if (onlyImages) {
-        if (images?.length === 1) {
-          return 'Photo';
-        } else {
-          return `${images?.length} Photos`;
-        }
-      }
-
-      if (onlyVideos) {
-        if (videos?.length === 1) {
-          return 'Video';
-        } else {
-          return `${videos?.length} Videos`;
-        }
-      }
-
-      if (onlyAudio) {
-        if (audios?.length === 1) {
-          return 'Audio';
-        } else {
-          return `${audios?.length} Audios`;
-        }
-      }
-
-      if (onlyVoiceRecordings) {
-        if (voiceRecordings?.length === 1) {
-          return `Voice message (${dayjs.duration(voiceRecordings?.[0]?.duration ?? 0, 'seconds').format('m:ss')})`;
-        } else {
-          return `${voiceRecordings?.length} Voice messages`;
-        }
-      }
-
-      if (giphys?.length) {
-        return 'Giphy';
-      }
-
-      if (onlyFiles && files?.length === 1) {
-        return files?.[0]?.title;
-      }
-
-      return `${attachmentsLength} Files`;
-    }, [
-      attachmentsLength,
-      audios?.length,
-      files,
-      giphys?.length,
-      images?.length,
-      message?.shared_location,
-      message?.text,
-      message?.type,
-      pollName,
-      videos?.length,
-      voiceRecordings,
-    ]);
-
-    if (!subtitle) {
-      return null;
-    }
-
-    return (
-      <Text numberOfLines={1} style={[styles.subtitle, style]}>
-        {subtitle}
-      </Text>
-    );
-  },
-);
-
-const MessagePreviewIcon = React.memo(
-  (props: {
-    message?: LocalMessage | MessageResponse | DraftMessage | null;
-    iconProps?: IconProps;
-  }) => {
-    const { message, iconProps } = props;
-    const {
-      theme: { semantics },
-    } = useTheme();
-    const styles = useStyles();
-    const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
-      message?.attachments,
-    );
-    const attachmentsLength = message?.attachments?.length;
-    if (!message) {
-      return null;
-    }
-
-    const onlyImages = images?.length && images?.length === attachmentsLength;
-    const onlyAudio = audios?.length && audios?.length === attachmentsLength;
-    const onlyVideos = videos?.length && videos?.length === attachmentsLength;
-    const onlyVoiceRecordings =
-      voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
-    const hasLink = message?.attachments?.some(
-      (attachment) => attachment.type === FileTypes.Image && attachment.og_scrape_url,
-    );
-
-    if (message.type === 'deleted') {
-      return (
-        <CircleBan
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (message.poll_id) {
-      return (
-        <NewPoll
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (message.shared_location) {
-      return (
-        <NewMapPin
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (hasLink) {
-      return (
-        <NewLink
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (onlyAudio || onlyVoiceRecordings) {
-      return (
-        <NewMic
-          height={12}
-          stroke={semantics.textPrimary}
-          strokeWidth={1.2}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (onlyVideos) {
-      return (
-        <NewVideo
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (onlyImages) {
-      return (
-        <NewPhoto
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (giphys?.length) {
-      return (
-        <NewFile
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    if (files?.length || images?.length || videos?.length || audios?.length) {
-      return (
-        <NewFile
-          height={12}
-          stroke={semantics.textPrimary}
-          style={styles.iconStyle}
-          width={12}
-          {...iconProps}
-        />
-      );
-    }
-
-    return null;
-  },
-);
-
-export type MessagePreviewProps = {
-  message: LocalMessage | MessageResponse | DraftMessage;
-  iconProps?: IconProps;
-  textStyle?: StyleProp<TextStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-};
-
-export const MessagePreview = ({
-  message,
-  iconProps,
-  textStyle,
-  containerStyle,
-}: MessagePreviewProps) => {
-  const styles = useStyles();
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <MessagePreviewIcon message={message} iconProps={iconProps} />
-      <MessagePreviewText message={message} style={textStyle} />
-    </View>
-  );
-};
-
-const useStyles = () => {
-  return useMemo(() => {
-    return StyleSheet.create({
-      subtitle: {
-        fontSize: primitives.typographyFontSizeXs,
-        fontWeight: primitives.typographyFontWeightRegular,
-        lineHeight: primitives.typographyLineHeightTight,
-        includeFontPadding: false,
-      },
-      container: {
-        alignItems: 'center',
-        flexDirection: 'row',
-        gap: primitives.spacingXxs,
-        flexShrink: 1,
-      },
-      iconStyle: {},
-    });
-  }, []);
-};
diff --git a/package/src/components/MessagePreview/MessagePreviewUserDetails.tsx b/package/src/components/MessagePreview/MessagePreviewUserDetails.tsx
deleted file mode 100644
index ff953e8c4a..0000000000
--- a/package/src/components/MessagePreview/MessagePreviewUserDetails.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useMemo } from 'react';
-import { Text, StyleSheet } from 'react-native';
-
-import { Channel, LocalMessage, MessageResponse } from 'stream-chat';
-
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { primitives } from '../../theme';
-import { ChannelListMessageDeliveryStatus } from '../ChannelPreview/ChannelListMessageDeliveryStatus';
-
-export type MessagePreviewUserDetailsProps = {
-  message: LocalMessage | MessageResponse;
-  channel: Channel;
-};
-
-export const MessagePreviewUserDetails = ({ channel, message }: MessagePreviewUserDetailsProps) => {
-  const styles = useStyles();
-  const { client } = useChatContext();
-
-  return message?.user?.id === client.user?.id ? (
-    <ChannelListMessageDeliveryStatus channel={channel} lastMessage={message} />
-  ) : (
-    <Text style={styles.username}>{message?.user?.name || message?.user?.id}:</Text>
-  );
-};
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-  return useMemo(() => {
-    return StyleSheet.create({
-      username: {
-        color: semantics.textTertiary,
-        fontSize: primitives.typographyFontSizeSm,
-        fontWeight: primitives.typographyFontWeightSemiBold,
-        lineHeight: primitives.typographyLineHeightNormal,
-      },
-    });
-  }, [semantics]);
-};
diff --git a/package/src/components/Reply/Reply.tsx b/package/src/components/Reply/Reply.tsx
index f4b70a4c0f..ea8b5446ef 100644
--- a/package/src/components/Reply/Reply.tsx
+++ b/package/src/components/Reply/Reply.tsx
@@ -8,6 +8,8 @@ import {
   MessageComposerState,
 } from 'stream-chat';
 
+import { ReplyMessageView } from './ReplyMessageView';
+
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
   MessageContextValue,
@@ -22,7 +24,6 @@ import { FileTypes } from '../../types/types';
 import { checkQuotedMessageEquality } from '../../utils/utils';
 import { FileIcon } from '../Attachment/FileIcon';
 import { AttachmentRemoveControl } from '../MessageInput/components/AttachmentPreview/AttachmentRemoveControl';
-import { MessagePreview } from '../MessagePreview/MessagePreview';
 import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
 const messageComposerStateStoreSelector = (state: MessageComposerState) => ({
@@ -134,13 +135,11 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
     <View style={[!messageFromContext?.quoted_message ? styles.wrapper : null, wrapper]}>
       <View style={[styles.container, container, stylesProp?.container]}>
         <View style={[styles.leftContainer, leftContainer, stylesProp?.leftContainer]}>
-          <View style={styles.titleContainer}>
-            <Text numberOfLines={1} style={[styles.title, titleStyle, stylesProp?.title]}>
-              {title}
-            </Text>
-          </View>
+          <Text numberOfLines={1} style={[styles.title, titleStyle, stylesProp?.title]}>
+            {title}
+          </Text>
 
-          <MessagePreview message={quotedMessage} textStyle={styles.subtitle} />
+          <ReplyMessageView message={quotedMessage} isMyMessage={isMyMessage} />
         </View>
         <View style={[styles.rightContainer, rightContainer, stylesProp?.rightContainer]}>
           <RightContent ImageComponent={ImageComponent} message={quotedMessage} />
@@ -272,7 +271,6 @@ const useStyles = () => {
           right: 0,
           top: 0,
         },
-        iconStyle: {},
         leftContainer: {
           borderLeftWidth: 2,
           flex: 1,
@@ -284,25 +282,12 @@ const useStyles = () => {
           gap: primitives.spacingXxxs,
         },
         rightContainer: {},
-        subtitle: {
-          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
-          flexShrink: 1,
-          fontSize: primitives.typographyFontSizeXs,
-          fontWeight: primitives.typographyFontWeightRegular,
-          includeFontPadding: false,
-          lineHeight: primitives.typographyLineHeightTight,
-        },
-        titleContainer: {
-          alignItems: 'center',
-          flexDirection: 'row',
-          gap: primitives.spacingXxs,
-        },
         title: {
-          color: semantics.textPrimary,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightSemiBold,
           includeFontPadding: false,
-          lineHeight: 16,
+          lineHeight: primitives.typographyLineHeightTight,
         },
         wrapper: {
           padding: primitives.spacingXxs,
diff --git a/package/src/components/Reply/ReplyMessageView.tsx b/package/src/components/Reply/ReplyMessageView.tsx
new file mode 100644
index 0000000000..f5bfaeaa71
--- /dev/null
+++ b/package/src/components/Reply/ReplyMessageView.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
+import { primitives } from '../../theme';
+
+export type ReplyMessageViewProps = {
+  message: LocalMessage | MessageResponse;
+  isMyMessage: boolean;
+};
+
+export const ReplyMessageView = ({ message, isMyMessage }: ReplyMessageViewProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const styles = useStyles({ isMyMessage });
+  const MessagePreviewIcon = useMessagePreviewIcon({ message });
+  const messagePreviewTitle = useMessagePreviewText({ message });
+
+  return (
+    <View style={[styles.container]}>
+      {MessagePreviewIcon ? (
+        <MessagePreviewIcon
+          height={12}
+          stroke={isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming}
+          width={12}
+        />
+      ) : null}
+      <Text numberOfLines={1} style={[styles.subtitle]}>
+        {messagePreviewTitle}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
+  const {
+    theme: {
+      reply: { messagePreview },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: primitives.spacingXxs,
+        flexShrink: 1,
+        ...messagePreview.container,
+      },
+      subtitle: {
+        color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightRegular,
+        includeFontPadding: false,
+        lineHeight: primitives.typographyLineHeightTight,
+        flexShrink: 1,
+        ...messagePreview.subtitle,
+      },
+    });
+  }, [
+    isMyMessage,
+    semantics.chatTextOutgoing,
+    semantics.chatTextIncoming,
+    messagePreview.container,
+    messagePreview.subtitle,
+  ]);
+};
diff --git a/package/src/components/ThreadList/ThreadList.tsx b/package/src/components/ThreadList/ThreadList.tsx
index 9fd3355074..909fa7a797 100644
--- a/package/src/components/ThreadList/ThreadList.tsx
+++ b/package/src/components/ThreadList/ThreadList.tsx
@@ -4,6 +4,7 @@ import { FlatList, View } from 'react-native';
 import { Thread, ThreadManagerState } from 'stream-chat';
 
 import { ThreadListItem } from './ThreadListItem';
+import { ThreadListItemSkeleton } from './ThreadListItemSkeleton';
 import { ThreadListUnreadBanner as DefaultThreadListBanner } from './ThreadListUnreadBanner';
 
 import { useChatContext } from '../../contexts';
@@ -37,7 +38,13 @@ export type ThreadListProps = Pick<
 
 export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
 
-export const DefaultThreadListLoadingIndicator = () => <LoadingIndicator listType='threads' />;
+export const DefaultThreadListLoadingIndicator = () => (
+  <View style={{ flex: 1 }}>
+    {Array.from({ length: 10 }).map((_, index) => (
+      <ThreadListItemSkeleton key={index} />
+    ))}
+  </View>
+);
 export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator />;
 
 const renderItem = (props: { item: Thread }) => <ThreadListItem thread={props.item} />;
@@ -56,11 +63,7 @@ const ThreadListComponent = () => {
   } = useThreadsContext();
 
   if (isLoading) {
-    return (
-      <View style={{ flex: 1 }}>
-        <ThreadListLoadingIndicator />
-      </View>
-    );
+    return <ThreadListLoadingIndicator />;
   }
 
   return (
diff --git a/package/src/components/ThreadList/ThreadListItem.tsx b/package/src/components/ThreadList/ThreadListItem.tsx
index f02794c6bd..8ea107c79e 100644
--- a/package/src/components/ThreadList/ThreadListItem.tsx
+++ b/package/src/components/ThreadList/ThreadListItem.tsx
@@ -1,8 +1,12 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { LocalMessage, Thread, ThreadState } from 'stream-chat';
 
+import { ThreadListItemMessagePreview } from './ThreadListItemMessagePreview';
+
+import { ThreadMessagePreviewDeliveryStatus } from './ThreadMessagePreviewDeliveryStatus';
+
 import { useChatContext, useTheme, useTranslationContext } from '../../contexts';
 import {
   ThreadListItemProvider,
@@ -10,10 +14,10 @@ import {
 } from '../../contexts/threadsContext/ThreadListItemContext';
 import { useThreadsContext } from '../../contexts/threadsContext/ThreadsContext';
 import { useStateStore } from '../../hooks';
-import { MessageBubble } from '../../icons';
+import { primitives } from '../../theme';
 import { getDateString } from '../../utils/i18n/getDateString';
 import { useChannelPreviewDisplayName } from '../ChannelPreview/hooks/useChannelPreviewDisplayName';
-import { MessagePreview } from '../MessagePreview/MessagePreview';
+import { BadgeNotification, UserAvatarStack } from '../ui';
 import { UserAvatar } from '../ui/Avatar/UserAvatar';
 
 export type ThreadListItemProps = {
@@ -21,47 +25,6 @@ export type ThreadListItemProps = {
   timestampTranslationKey?: string;
 };
 
-const styles = StyleSheet.create({
-  boldText: { fontSize: 14, fontWeight: '500' },
-  contentRow: {
-    flexDirection: 'row',
-    marginTop: 6,
-  },
-  contentTextWrapper: {
-    flex: 1,
-    marginLeft: 8,
-  },
-  dateText: { alignSelf: 'flex-end' },
-  headerRow: {
-    flexDirection: 'row',
-  },
-  infoRow: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  parentMessagePreviewContainer: {
-    flex: 1,
-    marginVertical: 2,
-  },
-  previewMessageContainer: {
-    flex: 1,
-    marginTop: 4,
-  },
-  touchableWrapper: {
-    flex: 1,
-    paddingHorizontal: 8,
-    paddingVertical: 14,
-  },
-  unreadBubbleWrapper: {
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-    borderRadius: 50,
-    height: 22,
-    justifyContent: 'center',
-    width: 22,
-  },
-});
-
 export const attachmentTypeIconMap = {
   audio: '🔈',
   file: '📄',
@@ -83,11 +46,10 @@ export const ThreadListItemComponent = () => {
   const displayName = useChannelPreviewDisplayName(channel);
   const { onThreadSelect } = useThreadsContext();
   const {
-    theme: {
-      colors: { accent_red, text_low_emphasis, white },
-      threadListItem,
-    },
+    theme: { semantics },
   } = useTheme();
+  const styles = useStyles();
+  const { t } = useTranslationContext();
 
   useEffect(() => {
     const unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
@@ -95,71 +57,64 @@ export const ThreadListItemComponent = () => {
   }, [thread.messageComposer]);
 
   return (
-    <TouchableOpacity
-      onPress={() => {
-        if (onThreadSelect) {
-          onThreadSelect(
-            { thread: parentMessage as LocalMessage, threadInstance: thread },
-            channel,
-          );
-        }
-      }}
-      style={[styles.touchableWrapper, threadListItem.touchableWrapper]}
-      testID='thread-list-item'
-    >
-      <View style={[styles.headerRow, threadListItem.headerRow]}>
-        <MessageBubble />
-        <Text
-          numberOfLines={1}
-          style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}
-        >
-          {displayName || 'N/A'}
-        </Text>
-      </View>
-      <View style={[styles.infoRow, threadListItem.infoRow]}>
-        <View
-          style={[
-            styles.parentMessagePreviewContainer,
-            threadListItem.parentMessagePreviewContainer,
-          ]}
-        >
-          <MessagePreview message={parentMessage as LocalMessage} />
-        </View>
-        {ownUnreadMessageCount > 0 && !deletedAtDateString ? (
-          <View
-            style={[
-              styles.unreadBubbleWrapper,
-              { backgroundColor: accent_red },
-              threadListItem.unreadBubbleWrapper,
-            ]}
-          >
-            <Text style={[{ color: white }, threadListItem.unreadBubbleText]}>
-              {ownUnreadMessageCount}
-            </Text>
-          </View>
-        ) : null}
-      </View>
-      <View style={[styles.contentRow, threadListItem.contentRow]}>
+    <View style={styles.wrapper}>
+      <Pressable
+        onPress={() => {
+          if (onThreadSelect) {
+            onThreadSelect(
+              { thread: parentMessage as LocalMessage, threadInstance: thread },
+              channel,
+            );
+          }
+        }}
+        style={({ pressed }) => [
+          styles.container,
+          { backgroundColor: pressed ? semantics.backgroundCorePressed : 'transparent' },
+        ]}
+        testID='thread-list-item'
+      >
         {lastReply?.user ? (
-          <UserAvatar user={lastReply?.user} size='lg' showOnlineIndicator showBorder />
+          <UserAvatar user={lastReply?.user} size='xl' showOnlineIndicator showBorder />
         ) : null}
 
-        <View style={[styles.contentTextWrapper, threadListItem.contentTextWrapper]}>
-          <Text style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}>
-            {lastReply?.user?.name}
+        <View style={styles.content}>
+          <Text numberOfLines={1} style={styles.channelName}>
+            {displayName || 'N/A'}
           </Text>
-          <View style={[styles.headerRow, threadListItem.headerRow]}>
-            <View style={[styles.previewMessageContainer, threadListItem.previewMessageContainer]}>
-              <MessagePreview message={lastReply as LocalMessage} />
+          {lastReply ? (
+            <View style={styles.previewMessageContainer}>
+              <ThreadMessagePreviewDeliveryStatus
+                channel={channel}
+                message={parentMessage as LocalMessage}
+              />
+              <ThreadListItemMessagePreview message={parentMessage as LocalMessage} />
             </View>
-
-            <Text style={[styles.dateText, { color: text_low_emphasis }, threadListItem.dateText]}>
-              {deletedAtDateString ?? dateString}
+          ) : null}
+          <View style={styles.lowerRow}>
+            <UserAvatarStack
+              users={parentMessage?.thread_participants || []}
+              avatarSize='sm'
+              maxVisible={3}
+              overlap={0.4}
+            />
+            <Text style={styles.messageRepliesText}>
+              {parentMessage?.reply_count === 1
+                ? t('1 Reply')
+                : t('{{ replyCount }} Replies', {
+                    replyCount: parentMessage?.reply_count,
+                  })}
             </Text>
+            <Text style={styles.dateText}>{deletedAtDateString ?? dateString}</Text>
           </View>
         </View>
-      </View>
-    </TouchableOpacity>
+
+        {ownUnreadMessageCount > 0 && !deletedAtDateString ? (
+          <View style={styles.unreadBubbleWrapper}>
+            <BadgeNotification count={ownUnreadMessageCount} size='sm' />
+          </View>
+        ) : null}
+      </Pressable>
+    </View>
   );
 };
 
@@ -227,3 +182,69 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
     </ThreadListItemProvider>
   );
 };
+
+const useStyles = () => {
+  const {
+    theme: { threadListItem, semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          flex: 1,
+          padding: primitives.spacingXxs,
+          borderBottomWidth: 1,
+          borderBottomColor: semantics.borderCoreSubtle,
+          ...threadListItem.wrapper,
+        },
+        container: {
+          flexDirection: 'row',
+          gap: primitives.spacingSm,
+          padding: primitives.spacingSm,
+          borderRadius: primitives.radiusLg,
+          ...threadListItem.container,
+        },
+        channelName: {
+          color: semantics.textTertiary,
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          ...threadListItem.channelName,
+        },
+        content: {
+          flex: 1,
+          gap: primitives.spacingXs,
+          ...threadListItem.content,
+        },
+        previewMessageContainer: {
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+          ...threadListItem.previewMessageContainer,
+        },
+        lowerRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: primitives.spacingXs,
+          ...threadListItem.lowerRow,
+        },
+        messageRepliesText: {
+          color: semantics.textLink,
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
+          ...threadListItem.messageRepliesText,
+        },
+        dateText: {
+          color: semantics.textTertiary,
+          fontSize: primitives.typographyFontSizeSm,
+          fontWeight: primitives.typographyFontWeightRegular,
+          lineHeight: primitives.typographyLineHeightNormal,
+          ...threadListItem.dateText,
+        },
+        unreadBubbleWrapper: {
+          ...threadListItem.unreadBubbleWrapper,
+        },
+      }),
+    [semantics, threadListItem],
+  );
+};
diff --git a/package/src/components/ThreadList/ThreadListItemMessagePreview.tsx b/package/src/components/ThreadList/ThreadListItemMessagePreview.tsx
new file mode 100644
index 0000000000..5a07d28643
--- /dev/null
+++ b/package/src/components/ThreadList/ThreadListItemMessagePreview.tsx
@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
+import { primitives } from '../../theme';
+
+export type ThreadListItemMessagePreviewProps = {
+  message: LocalMessage | MessageResponse | DraftMessage;
+};
+
+export const ThreadListItemMessagePreview = ({ message }: ThreadListItemMessagePreviewProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const styles = useStyles();
+  const MessagePreviewIcon = useMessagePreviewIcon({ message });
+  const messagePreviewTitle = useMessagePreviewText({ message });
+
+  return (
+    <View style={[styles.container]}>
+      {MessagePreviewIcon ? (
+        <MessagePreviewIcon height={20} stroke={semantics.textPrimary} width={20} />
+      ) : null}
+      <Text numberOfLines={1} style={[styles.subtitle]}>
+        {messagePreviewTitle}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: {
+      threadListItem: { messagePreview },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: primitives.spacingXxs,
+        flexShrink: 1,
+        ...messagePreview.container,
+      },
+      subtitle: {
+        color: semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightRegular,
+        includeFontPadding: false,
+        lineHeight: primitives.typographyLineHeightNormal,
+        flexShrink: 1,
+        ...messagePreview.subtitle,
+      },
+    });
+  }, [messagePreview.container, messagePreview.subtitle, semantics.textPrimary]);
+};
diff --git a/package/src/components/ThreadList/ThreadListItemSkeleton.tsx b/package/src/components/ThreadList/ThreadListItemSkeleton.tsx
new file mode 100644
index 0000000000..e3454c02dc
--- /dev/null
+++ b/package/src/components/ThreadList/ThreadListItemSkeleton.tsx
@@ -0,0 +1,281 @@
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path, Rect, Defs, LinearGradient, Stop, ClipPath, G, Mask } from 'react-native-svg';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export const ThreadListItemSkeleton = () => {
+  const width = useWindowDimensions().width;
+  const startOffset = useSharedValue(-width);
+  const styles = useStyles();
+
+  const {
+    theme: {
+      channelListSkeleton: { animationTime = 1500, container, height = 112 },
+      semantics,
+    },
+  } = useTheme();
+
+  useEffect(() => {
+    startOffset.value = withRepeat(
+      withTiming(width, {
+        duration: animationTime,
+        easing: Easing.linear,
+      }),
+      -1,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: startOffset.value }],
+    }),
+    [],
+  );
+
+  return (
+    <View style={[styles.container, container]} testID='channel-preview-skeleton'>
+      <Animated.View style={[animatedStyle]}>
+        <Svg width={width} height={height} viewBox={`0 0 402 112`} fill='none'>
+          <Mask id='path-1-inside-1_6371_335396'>
+            <Path d='M0 0H402V112H0V0Z' fill='white' />
+          </Mask>
+          <Path
+            d='M402 112V111H0V112V113H402V112Z'
+            fill={semantics.backgroundCoreSurface}
+            mask='url(#path-1-inside-1_6371_335396)'
+          />
+          <G clip-path='url(#clip0_6371_335396)'>
+            <Path
+              d='M16 40C16 26.7452 26.7452 16 40 16C53.2548 16 64 26.7452 64 40C64 53.2548 53.2548 64 40 64C26.7452 64 16 53.2548 16 40Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='48'
+              height='48'
+              transform='translate(16 16)'
+              fill='url(#paint0_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip1_6371_335396)'>
+            <Path
+              d='M76 26C76 22.6863 78.6863 20 82 20H190C193.314 20 196 22.6863 196 26C196 29.3137 193.314 32 190 32H82C78.6863 32 76 29.3137 76 26Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='120'
+              height='12'
+              transform='translate(76 20)'
+              fill='url(#paint1_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip2_6371_335396)'>
+            <Path
+              d='M76 50C76 44.4772 80.4772 40 86 40H316C321.523 40 326 44.4772 326 50C326 55.5228 321.523 60 316 60H86C80.4772 60 76 55.5228 76 50Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='250'
+              height='20'
+              transform='translate(76 40)'
+              fill='url(#paint2_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip3_6371_335396)'>
+            <Path
+              d='M76 84C76 77.3726 81.3726 72 88 72C94.6274 72 100 77.3726 100 84C100 90.6274 94.6274 96 88 96C81.3726 96 76 90.6274 76 84Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='24'
+              height='24'
+              transform='translate(76 72)'
+              fill='url(#paint3_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip4_6371_335396)'>
+            <Path
+              d='M108 84C108 80.6863 110.686 78 114 78H166C169.314 78 172 80.6863 172 84C172 87.3137 169.314 90 166 90H114C110.686 90 108 87.3137 108 84Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='64'
+              height='12'
+              transform='translate(108 78)'
+              fill='url(#paint4_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip5_6371_335396)'>
+            <Path
+              d='M180 84C180 80.6863 182.686 78 186 78H238C241.314 78 244 80.6863 244 84C244 87.3137 241.314 90 238 90H186C182.686 90 180 87.3137 180 84Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='64'
+              height='12'
+              transform='translate(180 78)'
+              fill='url(#paint5_linear_6371_335396)'
+            />
+          </G>
+          <G clip-path='url(#clip6_6371_335396)'>
+            <Path
+              d='M338 24C338 19.5817 341.582 16 346 16H378C382.418 16 386 19.5817 386 24C386 28.4183 382.418 32 378 32H346C341.582 32 338 28.4183 338 24Z'
+              fill={semantics.backgroundCoreSurface}
+            />
+            <Rect
+              width='48'
+              height='16'
+              transform='translate(338 16)'
+              fill='url(#paint6_linear_6371_335396)'
+            />
+          </G>
+          <Defs>
+            <LinearGradient
+              id='paint0_linear_6371_335396'
+              x1='48'
+              y1='24'
+              x2='-1.5262e-07'
+              y2='24'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint1_linear_6371_335396'
+              x1='120'
+              y1='6'
+              x2='-3.8155e-07'
+              y2='5.99999'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint2_linear_6371_335396'
+              x1='250'
+              y1='10'
+              x2='-7.94895e-07'
+              y2='9.99998'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint3_linear_6371_335396'
+              x1='24'
+              y1='12'
+              x2='-7.63101e-08'
+              y2='12'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint4_linear_6371_335396'
+              x1='64'
+              y1='6'
+              x2='-2.03494e-07'
+              y2='6'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint5_linear_6371_335396'
+              x1='64'
+              y1='6'
+              x2='-2.03494e-07'
+              y2='6'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <LinearGradient
+              id='paint6_linear_6371_335396'
+              x1='48'
+              y1='8'
+              x2='-1.5262e-07'
+              y2='8'
+              gradientUnits='userSpaceOnUse'
+            >
+              <Stop stopColor='white' />
+              <Stop offset='1' stopColor='white' stopOpacity='0' />
+            </LinearGradient>
+            <ClipPath id='clip0_6371_335396'>
+              <Path
+                d='M16 40C16 26.7452 26.7452 16 40 16C53.2548 16 64 26.7452 64 40C64 53.2548 53.2548 64 40 64C26.7452 64 16 53.2548 16 40Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip1_6371_335396'>
+              <Path
+                d='M76 26C76 22.6863 78.6863 20 82 20H190C193.314 20 196 22.6863 196 26C196 29.3137 193.314 32 190 32H82C78.6863 32 76 29.3137 76 26Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip2_6371_335396'>
+              <Path
+                d='M76 50C76 44.4772 80.4772 40 86 40H316C321.523 40 326 44.4772 326 50C326 55.5228 321.523 60 316 60H86C80.4772 60 76 55.5228 76 50Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip3_6371_335396'>
+              <Path
+                d='M76 84C76 77.3726 81.3726 72 88 72C94.6274 72 100 77.3726 100 84C100 90.6274 94.6274 96 88 96C81.3726 96 76 90.6274 76 84Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip4_6371_335396'>
+              <Path
+                d='M108 84C108 80.6863 110.686 78 114 78H166C169.314 78 172 80.6863 172 84C172 87.3137 169.314 90 166 90H114C110.686 90 108 87.3137 108 84Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip5_6371_335396'>
+              <Path
+                d='M180 84C180 80.6863 182.686 78 186 78H238C241.314 78 244 80.6863 244 84C244 87.3137 241.314 90 238 90H186C182.686 90 180 87.3137 180 84Z'
+                fill='white'
+              />
+            </ClipPath>
+            <ClipPath id='clip6_6371_335396'>
+              <Path
+                d='M338 24C338 19.5817 341.582 16 346 16H378C382.418 16 386 19.5817 386 24C386 28.4183 382.418 32 378 32H346C341.582 32 338 28.4183 338 24Z'
+                fill='white'
+              />
+            </ClipPath>
+          </Defs>
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        borderBottomColor: semantics.borderCoreDefault,
+      },
+    });
+  }, [semantics]);
+};
diff --git a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
index 6e414d1071..e128f27a55 100644
--- a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
+++ b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
@@ -1,53 +1,103 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { ThreadManagerState } from 'stream-chat';
 
-import { useChatContext, useTheme } from '../../contexts';
+import { useChatContext, useTheme, useTranslationContext } from '../../contexts';
 import { useStateStore } from '../../hooks';
-import { Reload } from '../../icons';
-
-const styles = StyleSheet.create({
-  text: { alignSelf: 'flex-start', flex: 1, fontSize: 16 },
-  touchableWrapper: {
-    borderRadius: 16,
-    flexDirection: 'row',
-    marginHorizontal: 8,
-    marginVertical: 6,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-  },
-});
+import { Loading, Reload } from '../../icons';
+import { NewExclamationCircle } from '../../icons/NewExclamationCircle';
+import { primitives } from '../../theme';
 
 const selector = (nextValue: ThreadManagerState) =>
   ({ unseenThreadIds: nextValue.unseenThreadIds }) as const;
 
 export const ThreadListUnreadBanner = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
   const { client } = useChatContext();
+  const { t } = useTranslationContext();
   const {
-    theme: {
-      colors: { text_high_emphasis, white },
-      threadListUnreadBanner,
-    },
+    theme: { semantics },
   } = useTheme();
+  const styles = useStyles();
   const { unseenThreadIds } = useStateStore(client.threads.state, selector);
   if (!unseenThreadIds.length) {
     return null;
   }
 
+  const handlePress = async () => {
+    try {
+      setLoading(true);
+      await client.threads.reload();
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.container}>
+        <Loading height={20} width={20} />
+        <Text style={styles.text}>{t('Loading...')}</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.container}>
+        <NewExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />
+        <Text style={styles.text}>{t("Couldn't load new threads. Tap to retry")}</Text>
+      </View>
+    );
+  }
+
   return (
-    <TouchableOpacity
-      onPress={() => client.threads.reload()}
-      style={[
-        styles.touchableWrapper,
-        { backgroundColor: text_high_emphasis },
-        threadListUnreadBanner.touchableWrapper,
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.container,
+        {
+          backgroundColor: pressed
+            ? semantics.backgroundCorePressed
+            : semantics.backgroundCoreSurface,
+        },
       ]}
     >
-      <Text style={[styles.text, { color: white }, threadListUnreadBanner.text]}>
-        {unseenThreadIds.length} unread threads
+      <Reload stroke={semantics.textSecondary} height={20} width={20} />
+      <Text style={styles.text}>
+        {t('{{count}} new threads', { count: unseenThreadIds.length })}
       </Text>
-      <Reload pathFill={white} />
-    </TouchableOpacity>
+    </Pressable>
   );
 };
+
+const useStyles = () => {
+  const {
+    theme: { semantics, threadListUnreadBanner },
+  } = useTheme();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      text: {
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightTight,
+        ...threadListUnreadBanner.text,
+      },
+      container: {
+        backgroundColor: semantics.backgroundCoreSurface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: primitives.spacingSm,
+        gap: primitives.spacingXs,
+        ...threadListUnreadBanner.container,
+      },
+    });
+  }, [semantics, threadListUnreadBanner]);
+};
diff --git a/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx b/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx
new file mode 100644
index 0000000000..e262ca8063
--- /dev/null
+++ b/package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx
@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Channel, LocalMessage } from 'stream-chat';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
+import { Check, CheckAll, Time } from '../../icons';
+import { primitives } from '../../theme';
+import { MessageStatusTypes } from '../../utils/utils';
+
+export type ThreadMessagePreviewDeliveryStatusProps = {
+  channel: Channel;
+  message: LocalMessage;
+};
+
+export const ThreadMessagePreviewDeliveryStatus = ({
+  channel,
+  message,
+}: ThreadMessagePreviewDeliveryStatusProps) => {
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const channelConfigExists = typeof channel?.getConfig === 'function';
+  const styles = useStyles();
+  const {
+    theme: {
+      channelPreview: {
+        messageDeliveryStatus: { checkAllIcon, checkIcon, timeIcon },
+      },
+      semantics,
+    },
+  } = useTheme();
+
+  const membersWithoutSelf = useMemo(() => {
+    return Object.values(channel.state?.members || {}).filter(
+      (member) => member.user?.id !== client.user?.id,
+    );
+  }, [channel.state?.members, client.user?.id]);
+
+  const isLastMessageByCurrentUser = useMemo(() => {
+    return message?.user?.id === client.user?.id;
+  }, [message, client.user?.id]);
+
+  const readEvents = useMemo(() => {
+    if (!channelConfigExists) {
+      return true;
+    }
+    const read_events = !channel.disconnected && !!channel?.id && channel.getConfig()?.read_events;
+    if (typeof read_events !== 'boolean') {
+      return true;
+    }
+    return read_events;
+  }, [channelConfigExists, channel]);
+
+  const { status } = useMessageDeliveryStatus({
+    channel,
+    lastMessage: message as LocalMessage,
+    isReadEventsEnabled: readEvents,
+  });
+
+  if (!channel.data?.name && membersWithoutSelf.length === 1 && !isLastMessageByCurrentUser) {
+    return null;
+  }
+
+  if (!isLastMessageByCurrentUser) {
+    return <Text style={styles.username}>{message?.user?.name || message?.user?.id}:</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      {message.status === MessageStatusTypes.SENDING ? (
+        <Time stroke={semantics.chatTextTimestamp} height={20} width={20} {...timeIcon} />
+      ) : message.status === MessageStatusTypes.RECEIVED &&
+        status === MessageDeliveryStatus.READ ? (
+        <CheckAll stroke={semantics.accentPrimary} height={20} width={20} {...checkAllIcon} />
+      ) : status === MessageDeliveryStatus.DELIVERED ? (
+        <CheckAll stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkAllIcon} />
+      ) : status === MessageDeliveryStatus.SENT ? (
+        <Check stroke={semantics.chatTextTimestamp} height={20} width={20} {...checkIcon} />
+      ) : null}
+      <Text style={styles.text}>{t('You')}:</Text>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      threadListItem: {
+        messagePreviewDeliveryStatus: { container, text, username },
+      },
+    },
+  } = useTheme();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: primitives.spacingXxs,
+        ...container,
+      },
+      text: {
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightNormal,
+        ...text,
+      },
+      username: {
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightNormal,
+        ...username,
+      },
+    });
+  }, [semantics, text, container, username]);
+};
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
index a23fc62bac..c19b007b83 100644
--- a/package/src/components/index.ts
+++ b/package/src/components/index.ts
@@ -55,7 +55,7 @@ export * from './ChannelPreview/hooks/useChannelPreviewDisplayName';
 export * from './ChannelPreview/hooks/useChannelPreviewDisplayPresence';
 export * from './ChannelPreview/hooks/useChannelPreviewData';
 export * from './ChannelPreview/hooks/useIsChannelMuted';
-export * from './ChannelPreview/hooks/useMessageDeliveryStatus';
+export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 
 export * from './Chat/Chat';
 export * from './Chat/hooks/useCreateChatClient';
@@ -168,8 +168,6 @@ export * from './MessageMenu/MessageUserReactionsAvatar';
 export * from './MessageMenu/MessageReactionPicker';
 export * from './MessageMenu/hooks/useFetchReactions';
 
-export * from './MessagePreview/MessagePreview';
-
 export * from './ProgressControl/ProgressControl';
 export * from './ProgressControl/WaveProgressBar';
 export * from './Poll';
diff --git a/package/src/components/ui/Badge/BadgeNotification.tsx b/package/src/components/ui/Badge/BadgeNotification.tsx
index 8bcc599dbf..3b6d517dea 100644
--- a/package/src/components/ui/Badge/BadgeNotification.tsx
+++ b/package/src/components/ui/Badge/BadgeNotification.tsx
@@ -5,7 +5,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
 
 export type BadgeNotificationProps = {
-  type: 'primary' | 'error' | 'neutral';
+  type?: 'primary' | 'error' | 'neutral';
   count: number;
   size: 'sm' | 'xs';
   testID?: string;
@@ -36,7 +36,7 @@ const textStyles = {
 };
 
 export const BadgeNotification = (props: BadgeNotificationProps) => {
-  const { type, count, size = 'sm', testID } = props;
+  const { type = 'primary', count, size = 'sm', testID } = props;
   const styles = useStyles();
   const {
     theme: { semantics },
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 45606ebd80..583fb7fdb7 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -204,6 +204,10 @@ export type Theme = {
       errorText: TextStyle;
       draftText: TextStyle;
     };
+    messagePreview: {
+      container: ViewStyle;
+      subtitle: TextStyle;
+    };
   };
   dateHeader: {
     container: ViewStyle;
@@ -923,6 +927,10 @@ export type Theme = {
     subtitleContainer: ViewStyle;
     videoIcon: IconProps;
     wrapper: ViewStyle;
+    messagePreview: {
+      container: ViewStyle;
+      subtitle: TextStyle;
+    };
   };
   screenPadding: number;
   spinner: ViewStyle;
@@ -935,22 +943,28 @@ export type Theme = {
     };
   };
   threadListItem: {
-    boldText: TextStyle;
-    contentRow: ViewStyle;
-    contentTextWrapper: ViewStyle;
+    wrapper: ViewStyle;
+    container: ViewStyle;
+    content: ViewStyle;
+    channelName: TextStyle;
     dateText: TextStyle;
-    headerRow: ViewStyle;
-    infoRow: ViewStyle;
-    parentMessagePreviewContainer: ViewStyle;
-    parentMessageText: TextStyle;
+    lowerRow: ViewStyle;
+    messageRepliesText: TextStyle;
     previewMessageContainer: ViewStyle;
-    touchableWrapper: ViewStyle;
-    unreadBubbleText: TextStyle;
     unreadBubbleWrapper: ViewStyle;
+    messagePreview: {
+      container: ViewStyle;
+      subtitle: TextStyle;
+    };
+    messagePreviewDeliveryStatus: {
+      container: ViewStyle;
+      text: TextStyle;
+      username: TextStyle;
+    };
   };
   threadListUnreadBanner: {
     text: TextStyle;
-    touchableWrapper: ViewStyle;
+    container: ViewStyle;
   };
   typingIndicator: {
     container: ViewStyle;
@@ -1083,6 +1097,10 @@ export const defaultTheme: Theme = {
     statusContainer: {},
     titleContainer: {},
     wrapper: {},
+    messagePreview: {
+      container: {},
+      subtitle: {},
+    },
   },
   colors: Colors,
   dateHeader: {
@@ -1780,6 +1798,10 @@ export const defaultTheme: Theme = {
     title: {},
     videoIcon: {},
     wrapper: {},
+    messagePreview: {
+      container: {},
+      subtitle: {},
+    },
   },
   screenPadding: 16,
   spinner: {},
@@ -1789,22 +1811,28 @@ export const defaultTheme: Theme = {
     },
   },
   threadListItem: {
-    boldText: {},
-    contentRow: {},
-    contentTextWrapper: {},
-    dateText: {},
-    headerRow: {},
-    infoRow: {},
-    parentMessagePreviewContainer: {},
-    parentMessageText: {},
     previewMessageContainer: {},
-    touchableWrapper: {},
-    unreadBubbleText: {},
     unreadBubbleWrapper: {},
+    wrapper: {},
+    container: {},
+    content: {},
+    channelName: {},
+    dateText: {},
+    lowerRow: {},
+    messageRepliesText: {},
+    messagePreview: {
+      container: {},
+      subtitle: {},
+    },
+    messagePreviewDeliveryStatus: {
+      container: {},
+      text: {},
+      username: {},
+    },
   },
   threadListUnreadBanner: {
     text: {},
-    touchableWrapper: {},
+    container: {},
   },
   typingIndicator: {
     container: {},
diff --git a/package/src/hooks/index.ts b/package/src/hooks/index.ts
index cc90b8ba17..503cf5128b 100644
--- a/package/src/hooks/index.ts
+++ b/package/src/hooks/index.ts
@@ -12,3 +12,7 @@ export * from './useInAppNotificationsState';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayerControl';
 export * from './useAttachmentPickerState';
+export * from './messagePreview/useMessageDeliveryStatus';
+export * from './messagePreview/useGroupedAttachments';
+export * from './messagePreview/useMessagePreviewIcon';
+export * from './messagePreview/useMessagePreviewText';
diff --git a/package/src/components/MessagePreview/hook/useGroupedAttachments.ts b/package/src/hooks/messagePreview/useGroupedAttachments.ts
similarity index 100%
rename from package/src/components/MessagePreview/hook/useGroupedAttachments.ts
rename to package/src/hooks/messagePreview/useGroupedAttachments.ts
index 16cf6ef914..48373030de 100644
--- a/package/src/components/MessagePreview/hook/useGroupedAttachments.ts
+++ b/package/src/hooks/messagePreview/useGroupedAttachments.ts
@@ -41,6 +41,8 @@ export const useGroupedAttachments = (attachments?: Attachment[]) => {
       (acc, attachment) => {
         if (isGiphyAttachment(attachment)) {
           acc.giphys.push(attachment);
+        } else if (isVoiceRecordingAttachment(attachment)) {
+          acc.voiceRecordings.push(attachment);
         } else if (isAudioAttachment(attachment)) {
           acc.audios.push(attachment);
         } else if (isImageAttachment(attachment)) {
@@ -49,8 +51,6 @@ export const useGroupedAttachments = (attachments?: Attachment[]) => {
           acc.videos.push(attachment);
         } else if (isFileAttachment(attachment)) {
           acc.files.push(attachment);
-        } else if (isVoiceRecordingAttachment(attachment)) {
-          acc.voiceRecordings.push(attachment);
         }
 
         return acc;
diff --git a/package/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts b/package/src/hooks/messagePreview/useMessageDeliveryStatus.ts
similarity index 97%
rename from package/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
rename to package/src/hooks/messagePreview/useMessageDeliveryStatus.ts
index dd89b9a665..3ee9704cd4 100644
--- a/package/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
+++ b/package/src/hooks/messagePreview/useMessageDeliveryStatus.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
 
 export enum MessageDeliveryStatus {
   NOT_SENT_BY_CURRENT_USER = 'not_sent_by_current_user',
diff --git a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx
new file mode 100644
index 0000000000..dce65d9490
--- /dev/null
+++ b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx
@@ -0,0 +1,75 @@
+import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useGroupedAttachments } from './useGroupedAttachments';
+
+import { CircleBan } from '../../icons/CircleBan';
+import { NewFile } from '../../icons/NewFile';
+import { NewLink } from '../../icons/NewLink';
+import { NewMapPin } from '../../icons/NewMapPin';
+import { NewMic } from '../../icons/NewMic';
+import { NewPhoto } from '../../icons/NewPhoto';
+import { NewPoll } from '../../icons/NewPoll';
+import { NewVideo } from '../../icons/NewVideo';
+import { FileTypes } from '../../types/types';
+
+export const useMessagePreviewIcon = ({
+  message,
+}: {
+  message?: LocalMessage | MessageResponse | DraftMessage | null;
+}) => {
+  const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
+    message?.attachments,
+  );
+  const attachmentsLength = message?.attachments?.length;
+  if (!message) {
+    return null;
+  }
+
+  const onlyImages = images?.length && images?.length === attachmentsLength;
+  const onlyAudio = audios?.length && audios?.length === attachmentsLength;
+  const onlyVideos = videos?.length && videos?.length === attachmentsLength;
+  const onlyVoiceRecordings =
+    voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
+
+  const hasLink = message?.attachments?.some(
+    (attachment) => attachment.type === FileTypes.Image && attachment.og_scrape_url,
+  );
+
+  if (message.type === 'deleted') {
+    return CircleBan;
+  }
+
+  if (message.poll_id) {
+    return NewPoll;
+  }
+
+  if (message.shared_location) {
+    return NewMapPin;
+  }
+
+  if (hasLink) {
+    return NewLink;
+  }
+
+  if (onlyAudio || onlyVoiceRecordings) {
+    return NewMic;
+  }
+
+  if (onlyVideos) {
+    return NewVideo;
+  }
+
+  if (onlyImages) {
+    return NewPhoto;
+  }
+
+  if (giphys?.length) {
+    return NewFile;
+  }
+
+  if (files?.length || images?.length || videos?.length || audios?.length) {
+    return NewFile;
+  }
+
+  return null;
+};
diff --git a/package/src/hooks/messagePreview/useMessagePreviewText.tsx b/package/src/hooks/messagePreview/useMessagePreviewText.tsx
new file mode 100644
index 0000000000..34d8271685
--- /dev/null
+++ b/package/src/hooks/messagePreview/useMessagePreviewText.tsx
@@ -0,0 +1,103 @@
+import dayjs from 'dayjs';
+import {
+  DraftMessage,
+  LiveLocationPayload,
+  LocalMessage,
+  MessageResponse,
+  PollState,
+} from 'stream-chat';
+
+import { useGroupedAttachments } from './useGroupedAttachments';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../hooks';
+
+const selector = (nextValue: PollState) => ({
+  name: nextValue.name,
+});
+
+export const useMessagePreviewText = ({
+  message,
+}: {
+  message?: LocalMessage | MessageResponse | DraftMessage | null;
+}) => {
+  const { client } = useChatContext();
+  const poll = client.polls.fromState(message?.poll_id ?? '');
+  const { name: pollName } = useStateStore(poll?.state, selector) ?? {};
+  const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
+    message?.attachments,
+  );
+  const attachmentsLength = message?.attachments?.length;
+
+  const onlyImages = images?.length && images?.length === attachmentsLength;
+  const onlyVideos = videos?.length && videos?.length === attachmentsLength;
+  const onlyFiles = files?.length && files?.length === attachmentsLength;
+  const onlyAudio = audios?.length === attachmentsLength;
+  const onlyVoiceRecordings =
+    voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
+
+  if (message?.type === 'deleted') {
+    return 'Message deleted';
+  }
+
+  if (pollName) {
+    return pollName;
+  }
+
+  if (message?.shared_location) {
+    if (
+      // There is a problem with types in Draft Message, and its not able to infer the type of `end_at` correctly, so the `as` is used.
+      (message?.shared_location as LiveLocationPayload)?.end_at &&
+      new Date((message?.shared_location as LiveLocationPayload)?.end_at) > new Date()
+    ) {
+      return 'Live Location';
+    }
+    return 'Location';
+  }
+
+  if (message?.text) {
+    return message?.text;
+  }
+
+  if (onlyImages) {
+    if (images?.length === 1) {
+      return 'Photo';
+    } else {
+      return `${images?.length} Photos`;
+    }
+  }
+
+  if (onlyVideos) {
+    if (videos?.length === 1) {
+      return 'Video';
+    } else {
+      return `${videos?.length} Videos`;
+    }
+  }
+
+  if (onlyAudio) {
+    if (audios?.length === 1) {
+      return 'Audio';
+    } else {
+      return `${audios?.length} Audios`;
+    }
+  }
+
+  if (onlyVoiceRecordings) {
+    if (voiceRecordings?.length === 1) {
+      return `Voice message (${dayjs.duration(voiceRecordings?.[0]?.duration ?? 0, 'seconds').format('m:ss')})`;
+    } else {
+      return `${voiceRecordings?.length} Voice messages`;
+    }
+  }
+
+  if (giphys?.length) {
+    return 'Giphy';
+  }
+
+  if (onlyFiles && files?.length === 1) {
+    return files?.[0]?.title;
+  }
+
+  return `${attachmentsLength} Files`;
+};
diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json
index 43f607545d..eef58be35c 100644
--- a/package/src/i18n/en.json
+++ b/package/src/i18n/en.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Replied to a thread",
   "View": "View",
   "Reminder overdue": "Reminder overdue",
-  "Poll has ended": "Poll has ended"
+  "Poll has ended": "Poll has ended",
+  "Reply to a message to start a thread": "Reply to a message to start a thread",
+  "Couldn't load new threads. Tap to retry": "Couldn't load new threads. Tap to retry",
+  "{{count}} new threads": "{{count}} new threads",
+  "No conversations yet": "No conversations yet"
 }
diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json
index 981acfcc62..2fa8055f8e 100644
--- a/package/src/i18n/es.json
+++ b/package/src/i18n/es.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Respondido a un hilo",
   "View": "Ver",
   "Reminder overdue": "Recordatorio vencido",
-  "Poll has ended": "Votación finalizada"
+  "Poll has ended": "Votación finalizada",
+  "Reply to a message to start a thread": "Responde a un mensaje para empezar un hilo",
+  "Couldn't load new threads. Tap to retry": "No se pudieron cargar nuevos hilos. Toca para reintentar",
+  "{{count}} new threads": "{{count}} nuevos hilos",
+  "No conversations yet": "No hay conversaciones todavía"
 }
diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json
index 6527b6d296..284db2ccd0 100644
--- a/package/src/i18n/fr.json
+++ b/package/src/i18n/fr.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Respondido a un hilo",
   "View": "Ver",
   "Reminder overdue": "Recordatorio vencido",
-  "Poll has ended": "Vote terminé"
+  "Poll has ended": "Vote terminé",
+  "Reply to a message to start a thread": "Répondre à un message pour commencer un fil",
+  "Couldn't load new threads. Tap to retry": "Impossible de charger les nouveaux fils. Appuyez pour réessayer",
+  "{{count}} new threads": "{{count}} nouveaux fils",
+  "No conversations yet": "Aucune conversation pour le moment"
 }
diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json
index b104ee010c..09a9996cba 100644
--- a/package/src/i18n/he.json
+++ b/package/src/i18n/he.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "הגב/י בשרשור",
   "View": "צפה",
   "Reminder overdue": "הזמן פג",
-  "Poll has ended": "ההצבעה הסתיימה"
+  "Poll has ended": "ההצבעה הסתיימה",
+  "Reply to a message to start a thread": "השב/י להודעה כדי להתחיל שרשור",
+  "Couldn't load new threads. Tap to retry": "לא ניתן לטעון שרשורים חדשים. הקש כדי לנסות שוב",
+  "{{count}} new threads": "{{count}} שרשורים חדשים",
+  "No conversations yet": "אין שיחות עדיין"
 }
diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json
index 442f144292..f4812fded2 100644
--- a/package/src/i18n/hi.json
+++ b/package/src/i18n/hi.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "थ्रेड में उत्तर दिया",
   "View": "देखें",
   "Reminder overdue": "रीमिंडर ओवरडो",
-  "Poll has ended": "वोट समाप्त"
+  "Poll has ended": "वोट समाप्त",
+  "Reply to a message to start a thread": "एक संदेश का जवाब देकर थ्रेड शुरू करें",
+  "Couldn't load new threads. Tap to retry": "नये थ्रेड्स लोड नहीं हो सके। टैप करके पुनः कोशिश करें",
+  "{{count}} new threads": "{{count}} नये थ्रेड्स",
+  "No conversations yet": "अभी तक कोई चैट नहीं है"
 }
diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json
index b41c526707..e3bdf02906 100644
--- a/package/src/i18n/it.json
+++ b/package/src/i18n/it.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Respondido a un hilo",
   "View": "Ver",
   "Reminder overdue": "Recordatorio vencido",
-  "Poll has ended": "Votazione terminata"
+  "Poll has ended": "Votazione terminata",
+  "Reply to a message to start a thread": "Rispondi a un messaggio per iniziare un thread",
+  "Couldn't load new threads. Tap to retry": "Impossibile caricare nuovi thread. Tocca per riprovare",
+  "{{count}} new threads": "{{count}} nuovi thread",
+  "No conversations yet": "Ancora nessuna conversazione"
 }
diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json
index 015821c2a8..680a94799a 100644
--- a/package/src/i18n/ja.json
+++ b/package/src/i18n/ja.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "スレッドに返信",
   "View": "表示",
   "Reminder overdue": "リマインダー期限切れ",
-  "Poll has ended": "投票終了"
+  "Poll has ended": "投票終了",
+  "Reply to a message to start a thread": "メッセージに返信してスレッドを開始",
+  "Couldn't load new threads. Tap to retry": "新しいスレッドを読み込めませんでした。タップして再試行",
+  "{{count}} new threads": "{{count}} 新しいスレッド",
+  "No conversations yet": "まだ会話がありません"
 }
diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json
index 30d39822a4..f7b4a8d127 100644
--- a/package/src/i18n/ko.json
+++ b/package/src/i18n/ko.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "스레드에 답장",
   "View": "보기",
   "Reminder overdue": "리마인더 만료",
-  "Poll has ended": "투표 종료됨"
+  "Poll has ended": "투표 종료됨",
+  "Reply to a message to start a thread": "메시지에 답장하여 스레드 시작",
+  "Couldn't load new threads. Tap to retry": "새로운 스레드를 로드할 수 없습니다. 탭하여 다시 시도",
+  "{{count}} new threads": "{{count}} 새로운 스레드",
+  "No conversations yet": "아직 대화가 없습니다"
 }
diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json
index d8afc01355..3336766a97 100644
--- a/package/src/i18n/nl.json
+++ b/package/src/i18n/nl.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Replied to a thread",
   "View": "View",
   "Reminder overdue": "Reminder overdue",
-  "Poll has ended": "Stemmen beëindigd"
+  "Poll has ended": "Stemmen beëindigd",
+  "Reply to a message to start a thread": "Antwoord op een bericht om een thread te starten",
+  "Couldn't load new threads. Tap to retry": "Kan nieuwe threads niet laden. Tik om opnieuw te proberen",
+  "{{count}} new threads": "{{count}} nieuwe threads",
+  "No conversations yet": "Nog geen gesprekken"
 }
diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json
index a2f2fa827f..610206f75d 100644
--- a/package/src/i18n/pt-br.json
+++ b/package/src/i18n/pt-br.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Respondido a un hilo",
   "View": "Ver",
   "Reminder overdue": "Recordatorio vencido",
-  "Poll has ended": "Votação encerrada"
+  "Poll has ended": "Votação encerrada",
+  "Reply to a message to start a thread": "Responder a uma mensagem para iniciar um tópico",
+  "Couldn't load new threads. Tap to retry": "Não foi possível carregar novos tópicos. Toque para tentar novamente",
+  "{{count}} new threads": "{{count}} novos tópicos",
+  "No conversations yet": "Ainda não há conversas"
 }
diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json
index bffbac0807..2509f06761 100644
--- a/package/src/i18n/ru.json
+++ b/package/src/i18n/ru.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Ответил на тему",
   "View": "Посмотреть",
   "Reminder overdue": "Напоминание просрочено",
-  "Poll has ended": "Голосование завершено"
+  "Poll has ended": "Голосование завершено",
+  "Reply to a message to start a thread": "Ответить на сообщение, чтобы начать тему",
+  "Couldn't load new threads. Tap to retry": "Не удалось загрузить новые темы. Нажмите, чтобы попробовать снова",
+  "{{count}} new threads": "{{count}} новых тем",
+  "No conversations yet": "Нет чатов"
 }
diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json
index 167d288c06..d93dc63154 100644
--- a/package/src/i18n/tr.json
+++ b/package/src/i18n/tr.json
@@ -177,5 +177,9 @@
   "Replied to a thread": "Konuya yanıt verildi",
   "View": "Görüntüle",
   "Reminder overdue": "Hatırlatıcı süresi doldu",
-  "Poll has ended": "Oylama sona erdi"
+  "Poll has ended": "Oylama sona erdi",
+  "Reply to a message to start a thread": "Bir mesaja yanıt vermek için konu başlatın",
+  "Couldn't load new threads. Tap to retry": "Yeni konular yüklenemedi. Tekrar denemek için dokunun",
+  "{{count}} new threads": "{{count}} yeni konu",
+  "No conversations yet": "Henüz konuşma yok"
 }
diff --git a/package/src/icons/Edit.tsx b/package/src/icons/Edit.tsx
index a54c991e61..ad88a86ab9 100644
--- a/package/src/icons/Edit.tsx
+++ b/package/src/icons/Edit.tsx
@@ -4,21 +4,29 @@ import Svg, { Mask, Path } from 'react-native-svg';
 
 import { IconProps } from './utils/base';
 
-export const Edit = (props: IconProps) => (
-  <Svg viewBox='0 0 20 20' fill='none' {...props}>
+export const Edit = ({ height, width, ...rest }: IconProps) => (
+  <Svg viewBox='0 0 20 20' fill='none' height={height} width={width}>
     <Mask id='path-1-inside-1_6150_123' fill='none'>
-      <Path d='M9.375 3.75C9.72017 3.75 10 3.47018 10 3.125C10 2.77983 9.72017 2.5 9.375 2.5V3.75ZM17.5 10.625V10H16.25V10.625H17.5ZM14.2083 16.25H5.79167V17.5H14.2083V16.25ZM3.75 14.2083V5.79167H2.5V14.2083H3.75ZM5.79167 3.75H9.375V2.5H5.79167V3.75ZM16.25 10.625V14.2083H17.5V10.625H16.25ZM5.79167 16.25C5.31464 16.25 4.99447 16.2495 4.7479 16.2293C4.50863 16.2098 4.39423 16.1749 4.31876 16.1365L3.75128 17.2503C4.03233 17.3934 4.32954 17.4493 4.64611 17.4753C4.95538 17.5005 5.33527 17.5 5.79167 17.5V16.25ZM2.5 14.2083C2.5 14.6648 2.49952 15.0446 2.52478 15.3539C2.55065 15.6705 2.60658 15.9677 2.74978 16.2488L3.86353 15.6813C3.82508 15.6058 3.79018 15.4913 3.77063 15.2521C3.75048 15.0055 3.75 14.6853 3.75 14.2083H2.5ZM4.31876 16.1365C4.12276 16.0366 3.9634 15.8773 3.86353 15.6813L2.74978 16.2488C2.96948 16.6799 3.32007 17.0305 3.75128 17.2503L4.31876 16.1365ZM14.2083 17.5C14.6648 17.5 15.0446 17.5005 15.3539 17.4753C15.6705 17.4493 15.9677 17.3934 16.2488 17.2503L15.6813 16.1365C15.6058 16.1749 15.4913 16.2098 15.2521 16.2293C15.0055 16.2495 14.6853 16.25 14.2083 16.25V17.5ZM16.25 14.2083C16.25 14.6853 16.2495 15.0055 16.2293 15.2521C16.2098 15.4913 16.1749 15.6058 16.1365 15.6813L17.2503 16.2488C17.3934 15.9677 17.4493 15.6705 17.4753 15.3539C17.5005 15.0446 17.5 14.6648 17.5 14.2083H16.25ZM16.2488 17.2503C16.6799 17.0305 17.0305 16.6799 17.2503 16.2488L16.1365 15.6813C16.0366 15.8773 15.8773 16.0366 15.6813 16.1365L16.2488 17.2503ZM3.75 5.79167C3.75 5.31464 3.75048 4.99447 3.77063 4.7479C3.79018 4.50863 3.82508 4.39423 3.86353 4.31876L2.74978 3.75128C2.60658 4.03233 2.55065 4.32954 2.52478 4.64611C2.49952 4.95538 2.5 5.33527 2.5 5.79167H3.75ZM5.79167 2.5C5.33527 2.5 4.95538 2.49952 4.64611 2.52478C4.32954 2.55065 4.03233 2.60658 3.75128 2.74978L4.31876 3.86353C4.39423 3.82508 4.50863 3.79018 4.7479 3.77063C4.99447 3.75048 5.31464 3.75 5.79167 3.75V2.5ZM3.86353 4.31876C3.9634 4.12276 4.12276 3.9634 4.31876 3.86353L3.75128 2.74978C3.32007 2.96948 2.96948 3.32007 2.74978 3.75128L3.86353 4.31876Z' />
+      <Path
+        d='M9.375 3.75C9.72017 3.75 10 3.47018 10 3.125C10 2.77983 9.72017 2.5 9.375 2.5V3.75ZM17.5 10.625V10H16.25V10.625H17.5ZM14.2083 16.25H5.79167V17.5H14.2083V16.25ZM3.75 14.2083V5.79167H2.5V14.2083H3.75ZM5.79167 3.75H9.375V2.5H5.79167V3.75ZM16.25 10.625V14.2083H17.5V10.625H16.25ZM5.79167 16.25C5.31464 16.25 4.99447 16.2495 4.7479 16.2293C4.50863 16.2098 4.39423 16.1749 4.31876 16.1365L3.75128 17.2503C4.03233 17.3934 4.32954 17.4493 4.64611 17.4753C4.95538 17.5005 5.33527 17.5 5.79167 17.5V16.25ZM2.5 14.2083C2.5 14.6648 2.49952 15.0446 2.52478 15.3539C2.55065 15.6705 2.60658 15.9677 2.74978 16.2488L3.86353 15.6813C3.82508 15.6058 3.79018 15.4913 3.77063 15.2521C3.75048 15.0055 3.75 14.6853 3.75 14.2083H2.5ZM4.31876 16.1365C4.12276 16.0366 3.9634 15.8773 3.86353 15.6813L2.74978 16.2488C2.96948 16.6799 3.32007 17.0305 3.75128 17.2503L4.31876 16.1365ZM14.2083 17.5C14.6648 17.5 15.0446 17.5005 15.3539 17.4753C15.6705 17.4493 15.9677 17.3934 16.2488 17.2503L15.6813 16.1365C15.6058 16.1749 15.4913 16.2098 15.2521 16.2293C15.0055 16.2495 14.6853 16.25 14.2083 16.25V17.5ZM16.25 14.2083C16.25 14.6853 16.2495 15.0055 16.2293 15.2521C16.2098 15.4913 16.1749 15.6058 16.1365 15.6813L17.2503 16.2488C17.3934 15.9677 17.4493 15.6705 17.4753 15.3539C17.5005 15.0446 17.5 14.6648 17.5 14.2083H16.25ZM16.2488 17.2503C16.6799 17.0305 17.0305 16.6799 17.2503 16.2488L16.1365 15.6813C16.0366 15.8773 15.8773 16.0366 15.6813 16.1365L16.2488 17.2503ZM3.75 5.79167C3.75 5.31464 3.75048 4.99447 3.77063 4.7479C3.79018 4.50863 3.82508 4.39423 3.86353 4.31876L2.74978 3.75128C2.60658 4.03233 2.55065 4.32954 2.52478 4.64611C2.49952 4.95538 2.5 5.33527 2.5 5.79167H3.75ZM5.79167 2.5C5.33527 2.5 4.95538 2.49952 4.64611 2.52478C4.32954 2.55065 4.03233 2.60658 3.75128 2.74978L4.31876 3.86353C4.39423 3.82508 4.50863 3.79018 4.7479 3.77063C4.99447 3.75048 5.31464 3.75 5.79167 3.75V2.5ZM3.86353 4.31876C3.9634 4.12276 4.12276 3.9634 4.31876 3.86353L3.75128 2.74978C3.32007 2.96948 2.96948 3.32007 2.74978 3.75128L3.86353 4.31876Z'
+        {...rest}
+      />
     </Mask>
-    <Path d='M9.375 3.75C9.72017 3.75 10 3.47018 10 3.125C10 2.77983 9.72017 2.5 9.375 2.5V3.75ZM17.5 10.625V10H16.25V10.625H17.5ZM14.2083 16.25H5.79167V17.5H14.2083V16.25ZM3.75 14.2083V5.79167H2.5V14.2083H3.75ZM5.79167 3.75H9.375V2.5H5.79167V3.75ZM16.25 10.625V14.2083H17.5V10.625H16.25ZM5.79167 16.25C5.31464 16.25 4.99447 16.2495 4.7479 16.2293C4.50863 16.2098 4.39423 16.1749 4.31876 16.1365L3.75128 17.2503C4.03233 17.3934 4.32954 17.4493 4.64611 17.4753C4.95538 17.5005 5.33527 17.5 5.79167 17.5V16.25ZM2.5 14.2083C2.5 14.6648 2.49952 15.0446 2.52478 15.3539C2.55065 15.6705 2.60658 15.9677 2.74978 16.2488L3.86353 15.6813C3.82508 15.6058 3.79018 15.4913 3.77063 15.2521C3.75048 15.0055 3.75 14.6853 3.75 14.2083H2.5ZM4.31876 16.1365C4.12276 16.0366 3.9634 15.8773 3.86353 15.6813L2.74978 16.2488C2.96948 16.6799 3.32007 17.0305 3.75128 17.2503L4.31876 16.1365ZM14.2083 17.5C14.6648 17.5 15.0446 17.5005 15.3539 17.4753C15.6705 17.4493 15.9677 17.3934 16.2488 17.2503L15.6813 16.1365C15.6058 16.1749 15.4913 16.2098 15.2521 16.2293C15.0055 16.2495 14.6853 16.25 14.2083 16.25V17.5ZM16.25 14.2083C16.25 14.6853 16.2495 15.0055 16.2293 15.2521C16.2098 15.4913 16.1749 15.6058 16.1365 15.6813L17.2503 16.2488C17.3934 15.9677 17.4493 15.6705 17.4753 15.3539C17.5005 15.0446 17.5 14.6648 17.5 14.2083H16.25ZM16.2488 17.2503C16.6799 17.0305 17.0305 16.6799 17.2503 16.2488L16.1365 15.6813C16.0366 15.8773 15.8773 16.0366 15.6813 16.1365L16.2488 17.2503ZM3.75 5.79167C3.75 5.31464 3.75048 4.99447 3.77063 4.7479C3.79018 4.50863 3.82508 4.39423 3.86353 4.31876L2.74978 3.75128C2.60658 4.03233 2.55065 4.32954 2.52478 4.64611C2.49952 4.95538 2.5 5.33527 2.5 5.79167H3.75ZM5.79167 2.5C5.33527 2.5 4.95538 2.49952 4.64611 2.52478C4.32954 2.55065 4.03233 2.60658 3.75128 2.74978L4.31876 3.86353C4.39423 3.82508 4.50863 3.79018 4.7479 3.77063C4.99447 3.75048 5.31464 3.75 5.79167 3.75V2.5ZM3.86353 4.31876C3.9634 4.12276 4.12276 3.9634 4.31876 3.86353L3.75128 2.74978C3.32007 2.96948 2.96948 3.32007 2.74978 3.75128L3.86353 4.31876Z' />
+    <Path
+      d='M9.375 3.75C9.72017 3.75 10 3.47018 10 3.125C10 2.77983 9.72017 2.5 9.375 2.5V3.75ZM17.5 10.625V10H16.25V10.625H17.5ZM14.2083 16.25H5.79167V17.5H14.2083V16.25ZM3.75 14.2083V5.79167H2.5V14.2083H3.75ZM5.79167 3.75H9.375V2.5H5.79167V3.75ZM16.25 10.625V14.2083H17.5V10.625H16.25ZM5.79167 16.25C5.31464 16.25 4.99447 16.2495 4.7479 16.2293C4.50863 16.2098 4.39423 16.1749 4.31876 16.1365L3.75128 17.2503C4.03233 17.3934 4.32954 17.4493 4.64611 17.4753C4.95538 17.5005 5.33527 17.5 5.79167 17.5V16.25ZM2.5 14.2083C2.5 14.6648 2.49952 15.0446 2.52478 15.3539C2.55065 15.6705 2.60658 15.9677 2.74978 16.2488L3.86353 15.6813C3.82508 15.6058 3.79018 15.4913 3.77063 15.2521C3.75048 15.0055 3.75 14.6853 3.75 14.2083H2.5ZM4.31876 16.1365C4.12276 16.0366 3.9634 15.8773 3.86353 15.6813L2.74978 16.2488C2.96948 16.6799 3.32007 17.0305 3.75128 17.2503L4.31876 16.1365ZM14.2083 17.5C14.6648 17.5 15.0446 17.5005 15.3539 17.4753C15.6705 17.4493 15.9677 17.3934 16.2488 17.2503L15.6813 16.1365C15.6058 16.1749 15.4913 16.2098 15.2521 16.2293C15.0055 16.2495 14.6853 16.25 14.2083 16.25V17.5ZM16.25 14.2083C16.25 14.6853 16.2495 15.0055 16.2293 15.2521C16.2098 15.4913 16.1749 15.6058 16.1365 15.6813L17.2503 16.2488C17.3934 15.9677 17.4493 15.6705 17.4753 15.3539C17.5005 15.0446 17.5 14.6648 17.5 14.2083H16.25ZM16.2488 17.2503C16.6799 17.0305 17.0305 16.6799 17.2503 16.2488L16.1365 15.6813C16.0366 15.8773 15.8773 16.0366 15.6813 16.1365L16.2488 17.2503ZM3.75 5.79167C3.75 5.31464 3.75048 4.99447 3.77063 4.7479C3.79018 4.50863 3.82508 4.39423 3.86353 4.31876L2.74978 3.75128C2.60658 4.03233 2.55065 4.32954 2.52478 4.64611C2.49952 4.95538 2.5 5.33527 2.5 5.79167H3.75ZM5.79167 2.5C5.33527 2.5 4.95538 2.49952 4.64611 2.52478C4.32954 2.55065 4.03233 2.60658 3.75128 2.74978L4.31876 3.86353C4.39423 3.82508 4.50863 3.79018 4.7479 3.77063C4.99447 3.75048 5.31464 3.75 5.79167 3.75V2.5ZM3.86353 4.31876C3.9634 4.12276 4.12276 3.9634 4.31876 3.86353L3.75128 2.74978C3.32007 2.96948 2.96948 3.32007 2.74978 3.75128L3.86353 4.31876Z'
+      {...rest}
+    />
     <Path
       d='M4.31876 16.1365L4.98701 16.477L3.65051 15.796L4.31876 16.1365ZM15.6813 16.1365L16.3495 15.796L15.013 16.477L15.6813 16.1365ZM16.1365 15.6813L16.477 15.013L15.796 16.3495L16.1365 15.6813ZM4.03502 16.6933L4.70326 17.0338L4.987 16.477L4.31876 16.1365L3.65051 15.796L3.36677 16.3528L4.03502 16.6933ZM3.30666 15.965L3.64716 16.6333L4.20404 16.3495L3.86353 15.6813L3.52303 15.013L2.96616 15.2968L3.30666 15.965ZM3.30666 4.03502L3.64715 3.36676L3.09026 3.08302L2.74978 3.75128L2.40929 4.41953L2.96617 4.70327L3.30666 4.03502ZM4.03502 3.30666L4.70327 2.96617L4.41953 2.40929L3.75128 2.74978L3.08302 3.09026L3.36676 3.64715L4.03502 3.30666ZM9.375 2.5H8.625V3.75H9.375H10.125V2.5H9.375ZM15.965 16.6933L16.6332 16.3528L16.3495 15.796L15.6813 16.1365L15.013 16.477L15.2968 17.0339L15.965 16.6933ZM16.6933 15.965L17.0339 15.2968L16.477 15.013L16.1365 15.6813L15.796 16.3495L16.3528 16.6332L16.6933 15.965ZM16.25 10.625V11.375H17.5V10.625V9.875H16.25V10.625ZM5.79167 16.25H5.04167V17.5H5.79167H6.54167V16.25H5.79167ZM14.2083 17.5H14.9583V16.25H14.2083H13.4583V17.5H14.2083ZM3.75 5.79167V5.04167H2.5V5.79167V6.54167H3.75V5.79167ZM2.5 14.2083V14.9583H3.75V14.2083V13.4583H2.5V14.2083ZM5.79167 2.5H5.04167V3.75H5.79167H6.54167V2.5H5.79167ZM16.25 14.2083V14.9583H17.5V14.2083V13.4583H16.25V14.2083ZM4.31876 16.1365L3.6505 15.796L3.08302 16.9098L3.75128 17.2503L4.41953 17.5907L4.98701 16.477L4.31876 16.1365ZM2.74978 16.2488L3.09027 16.917L4.20403 16.3495L3.86353 15.6813L3.52304 15.013L2.40928 15.5805L2.74978 16.2488ZM16.2488 17.2503L16.917 16.9097L16.3495 15.796L15.6813 16.1365L15.013 16.477L15.5805 17.5908L16.2488 17.2503ZM16.1365 15.6813L15.796 16.3495L16.9097 16.917L17.2503 16.2488L17.5908 15.5805L16.477 15.013L16.1365 15.6813ZM3.86353 4.31876L4.20402 3.6505L3.09027 3.08302L2.74978 3.75128L2.40929 4.41953L3.52304 4.98702L3.86353 4.31876ZM3.75128 2.74978L3.08302 3.09027L3.6505 4.20402L4.31876 3.86353L4.98702 3.52304L4.41953 2.40929L3.75128 2.74978ZM4.31876 16.1365L3.6375 17.4729L3.63827 17.4733L4.31876 16.1365ZM3.86353 15.6813L2.52689 16.362L2.52702 16.3622L3.86353 15.6813ZM2.74978 3.75128L4.08629 4.43225L2.74978 3.75128ZM3.75128 2.74978L4.43225 4.08629L3.75128 2.74978ZM15.6813 16.1365L16.3615 17.4734L16.3625 17.4729L15.6813 16.1365ZM16.1365 15.6813L17.4729 16.3625L17.4734 16.3615L16.1365 15.6813ZM17.5 10H19V8.5H17.5V10ZM16.25 10V8.5H14.75V10H16.25ZM4.7479 16.2293L4.87018 14.7343L4.86974 14.7343L4.7479 16.2293ZM3.75128 17.2503L3.0702 18.5867L3.07042 18.5868L3.75128 17.2503ZM4.64611 17.4753L4.52372 18.9702L4.52405 18.9703L4.64611 17.4753ZM2.52478 15.3539L1.02976 15.476L1.02977 15.4761L2.52478 15.3539ZM2.74978 16.2488L1.41323 16.9297L1.41329 16.9298L2.74978 16.2488ZM3.77063 15.2521L5.26565 15.1299L5.26565 15.1299L3.77063 15.2521ZM15.3539 17.4753L15.476 18.9703L15.4763 18.9703L15.3539 17.4753ZM16.2488 17.2503L16.9295 18.5869L16.9299 18.5867L16.2488 17.2503ZM15.2521 16.2293L15.1302 14.7343L15.1298 14.7343L15.2521 16.2293ZM16.2293 15.2521L14.7343 15.1298L14.7343 15.1302L16.2293 15.2521ZM17.2503 16.2488L18.5867 16.9299L18.5869 16.9295L17.2503 16.2488ZM17.4753 15.3539L18.9703 15.4763L18.9703 15.476L17.4753 15.3539ZM3.77063 4.7479L5.26565 4.87008L5.26565 4.87005L3.77063 4.7479ZM3.86353 4.31876L2.52702 3.63777L2.52701 3.6378L3.86353 4.31876ZM2.52478 4.64611L1.02977 4.52395L1.02976 4.52397L2.52478 4.64611ZM4.64611 2.52478L4.52397 1.02976L4.52395 1.02977L4.64611 2.52478ZM4.31876 3.86353L3.6378 2.52701L3.63777 2.52702L4.31876 3.86353ZM4.7479 3.77063L4.87005 5.26565L4.87008 5.26565L4.7479 3.77063ZM9.375 3.75V5.25C10.5486 5.25 11.5 4.29862 11.5 3.125H10H8.5C8.5 2.64174 8.89175 2.25 9.375 2.25V3.75ZM10 3.125H11.5C11.5 1.95139 10.5486 1 9.375 1V2.5V4C8.89175 4 8.5 3.60827 8.5 3.125H10ZM17.5 10.625H19V10H17.5H16V10.625H17.5ZM17.5 10V8.5H16.25V10V11.5H17.5V10ZM16.25 10H14.75V10.625H16.25H17.75V10H16.25ZM14.2083 16.25V14.75H5.79167V16.25V17.75H14.2083V16.25ZM5.79167 17.5V19H14.2083V17.5V16H5.79167V17.5ZM3.75 14.2083H5.25V5.79167H3.75H2.25V14.2083H3.75ZM2.5 5.79167H1V14.2083H2.5H4V5.79167H2.5ZM5.79167 3.75V5.25H9.375V3.75V2.25H5.79167V3.75ZM9.375 2.5V1H5.79167V2.5V4H9.375V2.5ZM16.25 10.625H14.75V14.2083H16.25H17.75V10.625H16.25ZM17.5 14.2083H19V10.625H17.5H16V14.2083H17.5ZM5.79167 16.25V14.75C5.28917 14.75 5.04125 14.7483 4.87018 14.7343L4.7479 16.2293L4.62562 17.7243C4.94769 17.7507 5.34012 17.75 5.79167 17.75V16.25ZM4.7479 16.2293L4.86974 14.7343C4.79909 14.7285 4.78892 14.7236 4.8151 14.7298C4.83001 14.7333 4.85594 14.7402 4.88974 14.7523C4.92464 14.7648 4.9617 14.7806 4.99925 14.7997L4.31876 16.1365L3.63827 17.4733C3.96061 17.6374 4.29448 17.6974 4.62606 17.7244L4.7479 16.2293ZM3.75128 17.2503L3.07042 18.5868C3.59789 18.8555 4.11422 18.9367 4.52372 18.9702L4.64611 17.4753L4.7685 15.9803C4.54486 15.9619 4.46676 15.9313 4.43213 15.9137L3.75128 17.2503ZM4.64611 17.4753L4.52405 18.9703C4.90837 19.0017 5.35939 19 5.79167 19V17.5V16C5.31115 16 5.00239 15.9993 4.76817 15.9802L4.64611 17.4753ZM2.5 14.2083H1C1 14.6407 0.998365 15.0916 1.02976 15.476L2.52478 15.3539L4.01981 15.2318C4.00067 14.9975 4 14.6888 4 14.2083H2.5ZM2.52478 15.3539L1.02977 15.4761C1.06325 15.8859 1.14449 16.4022 1.41323 16.9297L2.74978 16.2488L4.08632 15.5678C4.06866 15.5332 4.03805 15.4551 4.0198 15.2318L2.52478 15.3539ZM3.86353 15.6813L5.20018 15.0005C5.21934 15.0381 5.23518 15.0752 5.24769 15.1102C5.2598 15.144 5.26668 15.1699 5.27018 15.1848C5.27632 15.2109 5.27143 15.2007 5.26565 15.1299L3.77063 15.2521L2.27562 15.3742C2.30268 15.7055 2.36264 16.0395 2.52689 16.362L3.86353 15.6813ZM3.77063 15.2521L5.26565 15.1299C5.25167 14.9588 5.25 14.7109 5.25 14.2083H3.75H2.25C2.25 14.6598 2.2493 15.0522 2.27562 15.3743L3.77063 15.2521ZM4.31876 16.1365L5.00001 14.8001C5.08595 14.8439 5.15605 14.9139 5.20004 15.0003L3.86353 15.6813L2.52702 16.3622C2.77075 16.8406 3.15957 17.2292 3.6375 17.4729L4.31876 16.1365ZM2.74978 16.2488L1.41329 16.9298C1.77681 17.6432 2.35684 18.2232 3.0702 18.5867L3.75128 17.2503L4.43236 15.9138C4.2833 15.8378 4.16216 15.7167 4.08626 15.5677L2.74978 16.2488ZM14.2083 17.5V19C14.6406 19 15.0916 19.0017 15.476 18.9703L15.3539 17.4753L15.2319 15.9802C14.9976 15.9993 14.6889 16 14.2083 16V17.5ZM15.3539 17.4753L15.4763 18.9703C15.8859 18.9367 16.4021 18.8555 16.9295 18.5869L16.2488 17.2503L15.568 15.9136C15.5332 15.9313 15.4551 15.9619 15.2315 15.9803L15.3539 17.4753ZM15.6813 16.1365L15.001 14.7996C15.0385 14.7805 15.0755 14.7647 15.1104 14.7523C15.1441 14.7402 15.17 14.7333 15.1849 14.7298C15.211 14.7237 15.2009 14.7285 15.1302 14.7343L15.2521 16.2293L15.3739 17.7244C15.7056 17.6973 16.0393 17.6373 16.3615 17.4734L15.6813 16.1365ZM15.2521 16.2293L15.1298 14.7343C14.9587 14.7483 14.7108 14.75 14.2083 14.75V16.25V17.75C14.6599 17.75 15.0523 17.7507 15.3744 17.7243L15.2521 16.2293ZM16.25 14.2083H14.75C14.75 14.7108 14.7483 14.9587 14.7343 15.1298L16.2293 15.2521L17.7243 15.3744C17.7507 15.0523 17.75 14.6599 17.75 14.2083H16.25ZM16.2293 15.2521L14.7343 15.1302C14.7285 15.2009 14.7237 15.211 14.7298 15.1849C14.7333 15.17 14.7402 15.1441 14.7523 15.1104C14.7647 15.0755 14.7805 15.0385 14.7996 15.001L16.1365 15.6813L17.4734 16.3615C17.6373 16.0393 17.6973 15.7056 17.7244 15.3739L16.2293 15.2521ZM17.2503 16.2488L18.5869 16.9295C18.8555 16.4021 18.9367 15.8859 18.9703 15.4763L17.4753 15.3539L15.9803 15.2315C15.9619 15.4551 15.9313 15.5332 15.9136 15.568L17.2503 16.2488ZM17.4753 15.3539L18.9703 15.476C19.0017 15.0916 19 14.6406 19 14.2083H17.5H16C16 14.6889 15.9993 14.9976 15.9802 15.2319L17.4753 15.3539ZM16.2488 17.2503L16.9299 18.5867C17.6432 18.2231 18.2231 17.6432 18.5867 16.9299L17.2503 16.2488L15.9138 15.5676C15.8379 15.7167 15.7167 15.8379 15.5676 15.9138L16.2488 17.2503ZM16.1365 15.6813L14.8001 15C14.844 14.914 14.914 14.844 15 14.8001L15.6813 16.1365L16.3625 17.4729C16.8405 17.2292 17.2292 16.8405 17.4729 16.3625L16.1365 15.6813ZM3.75 5.79167H5.25C5.25 5.28911 5.25167 5.04119 5.26565 4.87008L3.77063 4.7479L2.27562 4.62572C2.2493 4.94774 2.25 5.34017 2.25 5.79167H3.75ZM3.77063 4.7479L5.26565 4.87005C5.27143 4.7993 5.27632 4.78908 5.27018 4.81523C5.26667 4.83012 5.25978 4.85608 5.24765 4.88994C5.23512 4.92489 5.21925 4.96204 5.20006 4.99971L3.86353 4.31876L2.52701 3.6378C2.36263 3.96044 2.30267 4.29458 2.27562 4.62575L3.77063 4.7479ZM2.74978 3.75128L1.41326 3.0703C1.14447 3.59783 1.06324 4.11425 1.02977 4.52395L2.52478 4.64611L4.0198 4.76827C4.03806 4.54484 4.06868 4.46682 4.08629 4.43225L2.74978 3.75128ZM2.52478 4.64611L1.02976 4.52397C0.998365 4.90832 1 5.35933 1 5.79167H2.5H4C4 5.31121 4.00067 5.00244 4.0198 4.76825L2.52478 4.64611ZM5.79167 2.5V1C5.35933 1 4.90832 0.998365 4.52397 1.02976L4.64611 2.52478L4.76825 4.0198C5.00244 4.00067 5.31121 4 5.79167 4V2.5ZM4.64611 2.52478L4.52395 1.02977C4.11425 1.06324 3.59783 1.14447 3.0703 1.41326L3.75128 2.74978L4.43225 4.08629C4.46682 4.06868 4.54484 4.03806 4.76827 4.0198L4.64611 2.52478ZM4.31876 3.86353L4.99971 5.20006C4.96204 5.21925 4.92489 5.23512 4.88994 5.24765C4.85608 5.25978 4.83012 5.26667 4.81523 5.27018C4.78908 5.27632 4.7993 5.27143 4.87005 5.26565L4.7479 3.77063L4.62575 2.27562C4.29458 2.30267 3.96044 2.36263 3.6378 2.52701L4.31876 3.86353ZM4.7479 3.77063L4.87008 5.26565C5.04119 5.25167 5.28911 5.25 5.79167 5.25V3.75V2.25C5.34017 2.25 4.94774 2.2493 4.62572 2.27562L4.7479 3.77063ZM3.86353 4.31876L5.20004 4.99974C5.1561 5.08599 5.08599 5.1561 4.99974 5.20004L4.31876 3.86353L3.63777 2.52702C3.15953 2.7707 2.7707 3.15953 2.52702 3.63777L3.86353 4.31876ZM3.75128 2.74978L3.0703 1.41326C2.35684 1.77678 1.77678 2.35684 1.41326 3.0703L2.74978 3.75128L4.08629 4.43225C4.16219 4.28329 4.28329 4.16219 4.43225 4.08629L3.75128 2.74978Z'
       mask='url(#path-1-inside-1_6150_123)'
+      {...rest}
     />
     <Path
       d='M7.29163 12.7082V10.5535C7.29163 10.3324 7.37943 10.1205 7.5357 9.96412L14.6548 2.84509C15.3056 2.19421 16.361 2.19421 17.0118 2.84509L17.1548 2.98806C17.8056 3.63894 17.8056 4.69421 17.1548 5.34509L10.0357 12.4642C9.87946 12.6205 9.66746 12.7082 9.44646 12.7082H7.29163Z'
       strokeWidth={1.5}
       strokeLinecap='square'
       strokeLinejoin='round'
+      {...rest}
     />
   </Svg>
 );
diff --git a/package/src/icons/MessageBubbleEmpty.tsx b/package/src/icons/MessageBubbleEmpty.tsx
index 622509792a..bef08edf75 100644
--- a/package/src/icons/MessageBubbleEmpty.tsx
+++ b/package/src/icons/MessageBubbleEmpty.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 
-import { IconProps, RootPath, RootSvg } from './utils/base';
+import Svg, { Path } from 'react-native-svg';
 
-export const MessageBubbleEmpty = (props: IconProps) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M4 4H20V16H5.17L4 17.17V4ZM4 2C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2H4ZM6 12H14V14H6V12ZM6 9H18V11H6V9ZM6 6H18V8H6V6Z'
+import { IconProps } from './utils/base';
+
+export const MessageBubbleEmpty = ({ height, width, ...props }: IconProps) => (
+  <Svg height={height} width={width} fill={'none'} viewBox='0 0 27 25' {...props}>
+    <Path
+      d='M20.0805 14.75H22.7501C24.2227 14.75 25.4167 13.5561 25.4167 12.0833V3.41667C25.4167 1.94391 24.2227 0.75 22.7501 0.75H9.08333C7.61057 0.75 6.41667 1.94391 6.41667 3.41667V6.08333M3.41667 6.08333H17.4167C18.8894 6.08333 20.0834 7.27724 20.0834 8.75V17.4167C20.0834 18.8895 18.8894 20.0833 17.4167 20.0833H11.0834L5.08333 23.4167V20.0833H3.41667C1.94391 20.0833 0.75 18.8895 0.75 17.4167V8.75C0.75 7.27724 1.94391 6.08333 3.41667 6.08333Z'
+      strokeLinejoin='round'
+      strokeLinecap='round'
+      strokeWidth={1.5}
       {...props}
     />
-  </RootSvg>
+  </Svg>
 );
diff --git a/package/src/icons/Reload.tsx b/package/src/icons/Reload.tsx
index a1500c68e2..b1d0c62b20 100644
--- a/package/src/icons/Reload.tsx
+++ b/package/src/icons/Reload.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 
-import { IconProps, RootPath, RootSvg } from './utils/base';
+import { Path, Svg } from 'react-native-svg';
 
-export const Reload = (props: IconProps) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M12 4V1L8 5L12 9V6C15.31 6 18 8.69 18 12C18 13.01 17.75 13.97 17.3 14.8L18.76 16.26C19.54 15.03 20 13.57 20 12C20 7.58 16.42 4 12 4ZM12 18C8.69 18 6 15.31 6 12C6 10.99 6.25 10.03 6.7 9.2L5.24 7.74C4.46 8.97 4 10.43 4 12C4 16.42 7.58 20 12 20V23L16 19L12 15V18Z'
-      {...props}
+import { IconProps } from './utils/base';
+
+export const Reload = ({ height, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height} viewBox={'0 0 20 20'} width={width} {...rest}>
+    <Path
+      d='M16.0515 3.125V5.83333C16.0515 6.17851 15.7718 6.45833 15.4265 6.45833H12.7182M3.95833 16.875V14.1667C3.95833 13.8215 4.23816 13.5417 4.58333 13.5417H7.29167M3.17819 10.8593C3.14308 10.5778 3.125 10.291 3.125 10C3.125 6.20304 6.20304 3.125 10 3.125C12.2305 3.125 14.2592 4.18719 15.5268 5.83333M16.8218 9.14067C16.8569 9.42217 16.875 9.709 16.875 10C16.875 13.7969 13.7969 16.875 10 16.875C7.76952 16.875 5.74072 15.8128 4.4732 14.1667'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      {...rest}
     />
-  </RootSvg>
+  </Svg>
 );