diff --git a/README.md b/README.md
index b2b8780..fa5e0ba 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,14 @@ automatically preparing the codebase to support them without requiring any manua
 Imagine you've developed (or planning to develop) an e-commerce app and need to sell it to countless customers. To achieve this, your **e-commerce** codebase must be dynamic enough to accommodate essential changes, such as the app name, identifier, icon, theme, version, base URL, and custom configurations—like whether to enable or disable specific features—and more. This is
 illustrated in the diagram below:
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/e-commerce-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
+
 ```
       +----------------------------------------------------------------+
       |                       E-commerce Codebase                      |
@@ -89,9 +97,17 @@ illustrated in the diagram below:
       |  Customer 1     |     |  Customer 2     |     |  Customer...   |
       +-----------------+     +-----------------+     +----------------+
 ```
+-->
 
 Solara addresses this challenge by introducing a centralized brand management system, enabling you to generate an infinite number of apps efficiently, as illustrated below:
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-e-commerce-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
 ```
       +----------------------------------------------------------------+
       |                             Solara                             |
@@ -112,6 +128,7 @@ Solara addresses this challenge by introducing a centralized brand management sy
       |      App 1      |     |      App 2      |     |      App...    |
       +-----------------+     +-----------------+     +----------------+
 ```
+-->
 
 This centralized approach not only simplifies brand management but also enhances the flexibility of your codebase, allowing you to serve a diverse customer base with ease.
 
@@ -187,7 +204,13 @@ Solara offers powerful tools for managing your brands.
 The Solara Management Tools Diagram below illustrates these tools:
 
 #### Solara Management Tools Diagram
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-management-tools-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
 
+<!--
 ```
       +-----------------------------------------------------------------------+
       |                          Solara Management Tools                      |
@@ -209,6 +232,7 @@ The Solara Management Tools Diagram below illustrates these tools:
       +------------------------+     +-----------------+     +----------------+
 
 ```
+-->
 
 > For the detailed guidance, please refer to [Brand Management](https://github.com/Solara-Toolkit/Solara/wiki/Brand-Management).
 
@@ -241,6 +265,13 @@ Refer to the image below for a visual guide:
 
 The `solara` directory contains all the essential files required for Solara. Below is its structure:
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-dir-structure-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
 ```
 your_project/
      └── solara/
@@ -265,6 +296,7 @@ your_project/
                          ├── brand_config.json
                          └── theme.json
 ```
+-->
 
 > For comprehensive details, check
 > the [Brand Configuration](https://github.com/Solara-Kit/Solara/wiki/Brand-Configuration).
@@ -288,6 +320,13 @@ See the diagram below
 
 #### Brand Structure Diagram
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-brand-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
 ```
       +----------------------------------------------------------------------+
       |                                Brand                                 |
@@ -304,6 +343,7 @@ See the diagram below
  +---------------------------------+        +-------------------------------------+
 
 ```
+-->
 
 ---
 
@@ -317,6 +357,13 @@ illustrating this process:
 
 #### Brand Switching Diagram
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-switch-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
 ```
                     +-----------------------+
                     |     Solara Library    |
@@ -332,6 +379,7 @@ illustrating this process:
       |    App 1    |    |    App 2    |    |    App...   |
       +-------------+    +-------------+    +-------------+
 ```
+-->
 
 ## The Flow of Brand Switching Operation
 
@@ -340,6 +388,13 @@ by the diagram below:
 
 #### Brand Switching Flow Diagram
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/switch-flow-diagram.png?raw=true" alt="Diagram" width="300"/>
+</p>
+<br>
+
+<!--
 ```
 +-----------------------+
 |  Codebase Preparation |
@@ -355,6 +410,7 @@ by the diagram below:
 |  Resource Deployment  |
 +-----------------------+
 ```
+-->
 
 This diagram illustrates the sequential flow from preparing the codebase to generating code and finally deploying
 resources. Each phase builds upon the previous one, leading to a smooth transition for managing brand configurations.
@@ -395,7 +451,7 @@ Solara deploys resources and generated code into specific directories within the
 
 <br>
 <p align="center">
-  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/solara-artifacts-diagram.png?raw=true" alt="Solara Artifacts Diagram" width="1000"/>
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/solara-artifacts-diagram.png?raw=true" alt="Solara Artifacts Diagram" width="1000"/>
 </p>
 <br>
 
@@ -460,6 +516,13 @@ brand-specific settings.
 The diagram below illustrates how the `brand_config.json` is generated for each platform, ensuring that all necessary
 configurations are appropriately formatted and accessible.
 
+<br>
+<p align="center">
+  <img src="https://github.com/Solara-Kit/Solara/blob/main/etc/screenshots/diagram/brand-config-diagram.png?raw=true" alt="Diagram" width="1000"/>
+</p>
+<br>
+
+<!--
 ```
       +-----------------------------------------------------------------------+
       |                   BRAND_KEY/shared/brand_config.json                  |
@@ -475,6 +538,7 @@ configurations are appropriately formatted and accessible.
       | brand_config.dart  |   |   BrandConfig.kt   |   | BrandConfig.swift   |
       +--------------------+   +--------------------+   +---------------------+
 ```
+-->
 
 1. **Central Configuration File**
     - **`BRAND_KEY/shared/brand_config.json`**: This is the main configuration file that includes all customizable