diff --git a/Jinja-Template-Variables-for-WhatsApp-Chat-Renderer.md b/Jinja-Template-Variables-for-WhatsApp-Chat-Renderer.md
new file mode 100644
index 0000000..0fbd815
--- /dev/null
+++ b/Jinja-Template-Variables-for-WhatsApp-Chat-Renderer.md
@@ -0,0 +1,88 @@
+# 🛠️ WhatsApp Chat HTML Template Customization
+
+You can design your own WhatsApp conversation page using a custom **Jinja** template. This gives you full control over layout and styling.
+
+---
+
+## 📦 Available Template Variables
+
+When rendering your Jinja template, the following variables are available:
+
+| Variable            | Type     | Description                                                                 |
+|---------------------|----------|-----------------------------------------------------------------------------|
+| `name`              | `str`    | Name of the peer (individual or group).                                     |
+| `msgs`              | `list`   | List of message dictionaries. See **Message Dictionary Structure** below.   |
+| `my_avatar`         | `str`    | Path to the user’s avatar image.                                            |
+| `their_avatar`      | `str`    | Path to the peer or group's avatar image.                                   |
+| `their_avatar_thumb`| `str`    | Thumbnail version of the peer's avatar (optional, smaller image).           |
+| `w3css`             | `str`    | Optional path or content of W3.CSS stylesheet if used for styling.          |
+| `next`              | `str`    | Link to the next chat (for pagination or navigation).                       |
+| `previous`          | `str`    | Link to the previous chat.                                                  |
+| `status`            | `str`    | Status message for the chat                                                 |
+| `media_base`        | `str`    | Base path or URL to media files used in chat (images, videos, etc.).        |
+| `headline`          | `str`    | Optional custom headline or title for the chat page.                        |
+
+---
+
+## 💬 Message Dictionary Structure
+
+Each item in the `msgs` list is a dictionary representing a message. These fields come from the `Message` class:
+
+| Key                  | Type               | Description                                                               |
+|----------------------|--------------------|---------------------------------------------------------------------------|
+| `sender`             | `str` \| `None`    | The sender's name or phone number.                                        |
+| `time`               | `str`              | Time of message in `%H:%M` format.                                        |
+| `key_id`             | `str`              | Unique ID of the message.                                                 |
+| `timestamp`          | `int`              | UNIX timestamp in seconds.                                                |
+| `from_me`            | `bool`             | `True` if the message was sent by the user.                               |
+| `reply`              | `str` \| `None`    | Message ID that this message is replying to.                              |
+| `quoted_data`        | `str` \| `None`    | Content of the replied-to message.                                        |
+| `media`              | `bool`             | `True` if the message includes media (image, video, etc.).                |
+| `mime`               | `str` \| `None`    | MIME type of the media (e.g., `image/jpeg`, `video/mp4`).                 |
+| `caption`            | `str` \| `None`    | Caption associated with the media.                                        |
+| `meta`               | `bool`             | `True` if this is a metadata message (e.g., group join/leave).            |
+| `data`               | `str` \| `None`    | Message text or metadata description.                                     |
+| `received_timestamp` | `str`              | When the message was received (format: `%Y/%m/%d %H:%M`).                 |
+| `read_timestamp`     | `str`              | When the message was read (format: `%Y/%m/%d %H:%M`).                     |
+| `message_type`       | `int` \| `None`    | Optional message type identifier.                                         |
+| `safe`               | `bool`             | Whether the message is safe for direct rendering (without sanitization).  |
+| `thumb`              | `str` \| `None`    | Android-specific thumbnail (for stickers/media).                          |
+| `sticker`            | `bool`             | Whether this message is a sticker.                                        |
+
+---
+
+## 🧪 Example Usage in Jinja Template
+
+```jinja
+{% if headline %}
+  <h1>{{ headline }}</h1>
+{% endif %}
+
+<div class="chat-container">
+  {% for msg in msgs %}
+    <div class="message {{ 'from-me' if msg.from_me else 'from-them' }}">
+      {% if msg.meta %}
+        <div class="meta">{{ msg.data }}</div>
+      {% else %}
+        {% if msg.reply %}
+          <div class="quoted">{{ msg.quoted_data }}</div>
+        {% endif %}
+        {% if msg.media %}
+          <img src="{{ media_base }}/{{ msg.key_id }}" alt="{{ msg.caption or 'Media' }}">
+        {% endif %}
+        <div class="text">{{ msg.data or msg.caption }}</div>
+        <span class="time">{{ msg.time }}</span>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>
+
+{% if previous %}
+  <a href="{{ previous }}">Previous</a>
+{% endif %}
+{% if next %}
+  <a href="{{ next }}">Next</a>
+{% endif %}
+```
+
+Detailed examples can be found in the default templates of this project.
diff --git a/Result-HTML-Customization-(Docs-In-Progress).md b/Result-HTML-Customization-(Docs-In-Progress).md
deleted file mode 100644
index 0c502fd..0000000
--- a/Result-HTML-Customization-(Docs-In-Progress).md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Customization
-You can design your own WhatsApp conversation page by creating a Jinja template.
-
-# Available variables to access in the template
-* name (str): The peer or group of the conversation.
-* msgs (list): A list containing messages-related data including the message itself.
-* my_avatar (str): Path to the user's avatar.
-* their_avatar (str): Path to the avatar of the peer or the group of the conversation.
-
-# The `msgs` variable
-As stated, msgs is a list. Inside the msgs variable, each item in the list is a dict containing the following keys
-* sender (str|None): The name or the phone number of the message sender.
-* time (str): The time of the message being sent. In format "%H:%M".
-* key_id (str): The message ID in the WhatsApp database.
-* timestamp (int): The timestamp of the message in second.
-* from_me (bool): Whether the message is sent by you or the peer(s)
-* reply (str|None): If the message is replying to some message, this will be the ID of the message being replied.
-* media (bool): Whether the message is a media.
-* meta (bool): Whether the message is a metadata. For example, someone join the group.
-* data (str|None): The actually message or metadata.
-* quoted_data (str|None): The actually message that being replied.
-* mime (str|None): The MIME type of the media.
-* caption (str|None): The caption along with media.