diff --git a/docusaurus/docs/Flutter/assets/message_input.png b/docusaurus/docs/Flutter/assets/message_input.png
new file mode 100644
index 00000000..d63cfbb3
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_input.png differ
diff --git a/docusaurus/docs/Flutter/assets/message_input_change_position.png b/docusaurus/docs/Flutter/assets/message_input_change_position.png
new file mode 100644
index 00000000..859107d2
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_input_change_position.png differ
diff --git a/docusaurus/docs/Flutter/assets/message_input_quoted_message.png b/docusaurus/docs/Flutter/assets/message_input_quoted_message.png
new file mode 100644
index 00000000..c1fda223
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_input_quoted_message.png differ
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx
index d5f1bfbd..2152a053 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx
@@ -6,6 +6,8 @@ title: MessageInput
 
 A Widget Dealing With Everything Related To Sending A Message
 
+![](../assets/message_input.png)
+
 ### Background
 
 In Stream Chat, we can send messages in a channel. However, sending a message isn't as simple as adding
@@ -111,6 +113,8 @@ class _ChannelPageState extends State<ChannelPage> {
 }
 ```
 
+![](../assets/message_input_quoted_message.png)
+
 ### Adding Custom Actions
 
 By default, the `MessageInput` has two actions: one for attachments and one for commands like giphy.
@@ -159,4 +163,6 @@ MessageInput(
     sendButtonLocation: SendButtonLocation.inside,
     actionsLocation: ActionsLocation.right,
 ),
-```
\ No newline at end of file
+```
+
+![](../assets/message_input_change_position.png)
\ No newline at end of file