diff --git a/docusaurus/docs/Flutter/assets/channel_header.png b/docusaurus/docs/Flutter/assets/channel_header.png
new file mode 100644
index 00000000..98f41c61
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_header.png differ
diff --git a/docusaurus/docs/Flutter/assets/channel_header_custom_title.png b/docusaurus/docs/Flutter/assets/channel_header_custom_title.png
new file mode 100644
index 00000000..65a9ee75
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_header_custom_title.png differ
diff --git a/docusaurus/docs/Flutter/assets/channel_list_header.png b/docusaurus/docs/Flutter/assets/channel_list_header.png
new file mode 100644
index 00000000..6f112db9
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_list_header.png differ
diff --git a/docusaurus/docs/Flutter/assets/channel_list_header_custom_subtitle.png b/docusaurus/docs/Flutter/assets/channel_list_header_custom_subtitle.png
new file mode 100644
index 00000000..3c779857
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_list_header_custom_subtitle.png differ
diff --git a/docusaurus/docs/Flutter/assets/channel_list_view.png b/docusaurus/docs/Flutter/assets/channel_list_view.png
new file mode 100644
index 00000000..a4390c2e
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_list_view.png differ
diff --git a/docusaurus/docs/Flutter/assets/message_list_view.png b/docusaurus/docs/Flutter/assets/message_list_view.png
new file mode 100644
index 00000000..4f9be344
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_list_view.png differ
diff --git a/docusaurus/docs/Flutter/assets/message_list_view_pin.png b/docusaurus/docs/Flutter/assets/message_list_view_pin.png
new file mode 100644
index 00000000..0b6f1c39
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_list_view_pin.png differ
diff --git a/docusaurus/docs/Flutter/assets/message_list_view_threads.png b/docusaurus/docs/Flutter/assets/message_list_view_threads.png
new file mode 100644
index 00000000..2c938766
Binary files /dev/null and b/docusaurus/docs/Flutter/assets/message_list_view_threads.png differ
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_header.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_header.mdx
index d179a9d8..0ced7f0b 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_header.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_header.mdx
@@ -6,6 +6,8 @@ title: ChannelHeader
 
 A Widget To Display Common Channel Details
 
+![](../assets/channel_header.png)
+
 ### Background
 
 When a user opens a channel, it is helpful to provide context of which channel they are in. This may
@@ -63,6 +65,8 @@ ChannelHeader(
 ),
 ```
 
+![](../assets/channel_header_custom_title.png)
+
 ### Showing Connection State
 
 The `ChannelHeader` can also display connection state below the tile which shows the user if they
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
index a3e3bd1d..aa072ea8 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
@@ -6,6 +6,8 @@ title: ChannelListHeader
 
 A Header Widget For A List Of Channels
 
+![](../assets/channel_list_header.png)
+
 ### Background
 
 A common pattern for most messaging apps is to show a list of Channels (chats) on the first screen
@@ -54,6 +56,8 @@ ChannelListHeader(
 ),
 ```
 
+![](../assets/channel_list_header_custom_subtitle.png)
+
 The `titleBuilder` param helps you build different titles depending on the connection state:
 
 ```dart
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
index 2faeb4c4..7eb16189 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
@@ -8,6 +8,8 @@ A Widget For Displaying A List Of Channels
 
 Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListView-class.html)
 
+![](../assets/channel_list_view.png)
+
 ### Background
 
 Channels are fundamental elements of Stream Chat and constitute shared spaces which allow users to
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/message_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/message_list_view.mdx
index 1b57cd97..74a3ae5f 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/message_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/message_list_view.mdx
@@ -8,6 +8,8 @@ A Widget For Displaying A List Of Messages
 
 Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageListView-class.html)
 
+![](../assets/message_list_view.png)
+
 ### Background
 
 Every channel can contain a list of messages sent by users inside it. The `MessageListView` widget
@@ -68,6 +70,8 @@ MessageListView(
 ),
 ```
 
+![](../assets/message_list_view_threads.png)
+
 The `MessageListView` itself can render the thread by supplying the `parentMessage` parameter.
 
 ```dart
@@ -86,7 +90,7 @@ Note: To customize the existing implementation, look at the `MessageWidget` docu
 MessageListView(
     messageBuilder: (context, details, messageList, defaultImpl) {
         // Your implementation of the message here
-        // E.g: return Text(details.message.text);
+        // E.g: return Text(details.message.text ?? '');
     },
 ),
 ```
@@ -104,4 +108,6 @@ MessageListView(
 ),
 ```
 
-This will allow these user types to pin messages through the message actions modal.
\ No newline at end of file
+This will allow these user types to pin messages through the message actions modal.
+
+![](../assets/message_list_view_pin.png)