diff --git a/apps/llm/components/MarkdownComponent.tsx b/apps/llm/components/MarkdownComponent.tsx
index b4cb69b1e1..111019a363 100644
--- a/apps/llm/components/MarkdownComponent.tsx
+++ b/apps/llm/components/MarkdownComponent.tsx
@@ -16,7 +16,6 @@ export default function MarkdownComponent({ text }: MarkdownComponentProps) {
           fontFamily: 'regular',
           lineHeight: 19.6,
           fontSize: fontSize,
-          alignSelf: 'flex-start',
         },
         paragraph: {
           marginTop: 0,
diff --git a/apps/llm/components/MessageItem.tsx b/apps/llm/components/MessageItem.tsx
index 58da5074c1..2c44714ac0 100644
--- a/apps/llm/components/MessageItem.tsx
+++ b/apps/llm/components/MessageItem.tsx
@@ -24,7 +24,9 @@ const MessageItem = memo(({ message, deleteMessage }: MessageItemProps) => {
         <View style={styles.aiMessageIconContainer}>
           <LlamaIcon width={24} height={24} />
         </View>
-        <MarkdownComponent text={message.content} />
+        <View style={styles.aiMessageContent}>
+          <MarkdownComponent text={message.content} />
+        </View>
         <CloseButton deleteMessage={deleteMessage} role={message.role} />
       </View>
     );
@@ -77,6 +79,9 @@ const styles = StyleSheet.create({
     marginVertical: 8,
     alignItems: 'center',
   },
+  aiMessageContent: {
+    flex: 1,
+  },
   userMessageWrapper: {
     flexDirection: 'row-reverse',
     marginRight: 8,