diff --git a/.gitignore b/.gitignore
index d2de73a..661d80b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,8 +13,9 @@ helpers/__pycache__/*
 *.session
 results.txt
 downloads/*
+web_viewer_static/*.log
 *.json
 .env
 .DS_Store
 .bot-history
-.venv
\ No newline at end of file
+.venv
diff --git a/README.md b/README.md
index 1163592..e3ab478 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@ This repository contains Python scripts, `TeleTexter.py`, `TeleGatherer.py` and
   - **MONITOR:** Read new messages.
   - **DISRUPT:** Delete messages from malicious channels.
   - **DISRUPT:** Spam channels at a high rate with the message of your choice.
+  - **VIEW:** Launch web viewer to browse downloaded messages in a Telegram-style interface.
 
 > [!NOTE]
 > This script is intended for threat intelligence analysts or researchers who want to monitor, collect, and track adversaries using Telegram for C2 communication.
@@ -82,11 +83,35 @@ To gather intelligence from a Telegram channel:
 
 `python TeleGatherer.py -t YOUR_BOT_TOKEN -c YOUR_CHAT_ID`
 
+### Web Viewer
+
+The web viewer provides a modern, Telegram-style interface for browsing downloaded messages. Features include:
+
+- 📱 **Telegram-style UI** - Beautiful, modern interface that mimics Telegram's design
+- 🔄 **Dynamic Loading** - Automatically detects and displays all chats from the Downloads folder
+- 📝 **Message Display** - Shows message text, metadata, entities, and forwarded messages
+- 🔍 **Search Functionality** - Search through messages by text, sender, or forwarded content
+- ⚡ **Infinite Scroll** - Automatically loads more messages as you scroll
+- 🎨 **Responsive Design** - Works on desktop and mobile devices
+
+To launch the web viewer:
+
+1. Run `TeleGatherer.py` and select option **8** from the menu, or
+2. Manually start the server:
+   ```bash
+   python web_viewer.py
+   ```
+3. Open your browser to `http://localhost:5000`
+
+The viewer automatically detects all chats in your `Downloads/` folder and displays them in the sidebar. Click any chat to view its messages. Messages are grouped by their actual chat ID, so messages from different chats stored in the same folder are displayed separately.
+
 ## Recent Updates
 
+- **Web Viewer** - New Telegram-style web interface for browsing downloaded messages with search functionality
 - Ability to view and download all types of media from channels.
 - Option to select the number of messages for downloading.
 - Dual format text saving: pretty text and full JSON dumps.
+- UTF-8 encoding support for proper handling of emojis and special characters on Windows.
 - Numerous improvements and bug fixes to enhance existing features.
 
 ## Disclaimer
diff --git a/TeleGatherer.py b/TeleGatherer.py
index a52eac4..6b4d1b1 100644
--- a/TeleGatherer.py
+++ b/TeleGatherer.py
@@ -4,10 +4,23 @@
 import argparse
 import multiprocessing
 import mimetypes
+import sys
+import subprocess
+import webbrowser
 from helpers.TeleTexter import send_telegram_message
 from helpers.TeleViewer import process_messages
 
 
+try:
+  # Ensure Windows console can handle UTF-8 output (emojis, non-ASCII)
+  if hasattr(sys.stdout, "reconfigure"):
+    sys.stdout.reconfigure(encoding="utf-8")
+  if hasattr(sys.stderr, "reconfigure"):
+    sys.stderr.reconfigure(encoding="utf-8")
+except Exception:
+  # Best-effort; continue if not supported
+  pass
+
 def parse_dict(title, dictionary):
   result = f"{title}:\n"
   for key, value in dictionary.items():
@@ -165,8 +178,9 @@ def main(bot_token, chat_id):
     print("4. Delete all messages from the malicious telegram channel that are sent within 24 hours\n")
     print("5. Get approximate number of messages on the malicious telegram channel")
     print("6. Download ALL messages from the malicious telegram channel")
-    print("7. Send a file to the malicious telegram channel\n")
-    print("8. EXIT")
+    print("7. Send a file to the malicious telegram channel")
+    print("8. Launch web viewer to browse downloaded messages\n")
+    print("9. EXIT")
     choice = input("\nEnter your choice: ")
     if choice == '1':
       offset = None  # Variable to keep track of the last update ID
@@ -262,6 +276,37 @@ def main(bot_token, chat_id):
       else:
         print("Error: Unable to send file: ", response.get("description"))
     elif choice == '8':
+      try:
+        print("\n[*] Starting web viewer server...")
+        print("[*] The web viewer will open in your default browser.")
+        print("[*] Server will run on http://localhost:5000")
+        print("[*] Press Ctrl+C in the web viewer terminal to stop the server.\n")
+        
+        # Launch web viewer in a separate process
+        if sys.platform == 'win32':
+          # On Windows, create a new console window to show Flask output
+          viewer_process = subprocess.Popen(
+              [sys.executable, 'web_viewer.py'],
+              creationflags=subprocess.CREATE_NEW_CONSOLE
+          )
+        else:
+          # On Unix-like systems, run in background
+          viewer_process = subprocess.Popen(
+              [sys.executable, 'web_viewer.py'],
+              stdout=subprocess.DEVNULL,
+              stderr=subprocess.DEVNULL
+          )
+        
+        # Wait a moment for server to start, then open browser
+        time.sleep(2)
+        webbrowser.open('http://localhost:5000')
+        
+        print("[*] Web viewer launched! Check the new window for the server.")
+        print("[*] Returning to main menu...\n")
+      except Exception as e:
+        print(f"Error launching web viewer: {e}")
+        print("You can manually start it by running: python web_viewer.py")
+    elif choice == '9':
       print("Exiting...")
       break
     else:
@@ -269,14 +314,14 @@ def main(bot_token, chat_id):
 
 # Check a file for the bot token and chat id pair it is stored in the file in the form of bot_token:chat_id, then print a message asking if you are sure you want to continue. Otherwise continue and add the bot token and chat id to the file in the form of bot_token:chat_id and continue.
 def check_file_for_token_and_chat_id(file_path, bot_token, chat_id):
-  with open(file_path, 'r') as file:
+  with open(file_path, 'r', encoding='utf-8') as file:
     for line in file:
       if line.strip() == f"{bot_token}:{chat_id}":
         return True
   return False
 
 def add_token_and_chat_id_to_file(file_path, bot_token, chat_id):
-  with open(file_path, 'a') as file:
+  with open(file_path, 'a', encoding='utf-8') as file:
     file.write(f"{bot_token}:{chat_id}\n")
 
 if __name__ == "__main__":
diff --git a/helpers/TeleViewer.py b/helpers/TeleViewer.py
index 81bb314..0d62eb6 100644
--- a/helpers/TeleViewer.py
+++ b/helpers/TeleViewer.py
@@ -99,7 +99,7 @@ async def progress(current, total):
               directory = f'Downloads/{username}/logs'
               if not os.path.exists(directory):
                 os.makedirs(directory)
-              with open(f'{directory}/{username}_bot.txt', 'a') as file:
+              with open(f'{directory}/{username}_bot.txt', 'a', encoding='utf-8') as file:
                 file.write(f"Message ID: {messages.id}\n")
                 file.write(
                     f"From User ID: {messages.from_user.id} - Username: {messages.from_user.username}\n"
@@ -109,17 +109,19 @@ async def progress(current, total):
                 file.write(f"Reply_markup: {messages.reply_markup}\n\n")
               # Save the whole message to a file
               with open(f'{directory}/{username}_bot.json',
-                        'a') as file:
+                        'a', encoding='utf-8') as file:
                 file.write(str(messages))
             else:
               directory = f'Downloads/{chat_id}/logs'
-              with open(f'{directory}/{chat_id}_bot.txt', 'a') as file:
+              if not os.path.exists(directory):
+                os.makedirs(directory)
+              with open(f'{directory}/{chat_id}_bot.txt', 'a', encoding='utf-8') as file:
                 file.write(f"Message ID: {messages.id}\n")
                 file.write(f"Date: {messages.date}\n")
                 file.write(f"Text: {messages.text}\n")
                 file.write(f"Reply_markup: {messages.reply_markup}\n\n")
               # Save the whole message to a file
-              with open(f'{directory}/{chat_id}_bot.json', 'a') as file:
+              with open(f'{directory}/{chat_id}_bot.json', 'a', encoding='utf-8') as file:
                 file.write(str(messages))
     except AttributeError as e:
       print(f"Error: {e}")
diff --git a/requirements.txt b/requirements.txt
index 701f958..07f19aa 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,3 +2,5 @@ Pyrogram==2.0.106
 python-dotenv==1.0.0
 requests==2.31.0
 tgcrypto
+Flask==3.0.0
+flask-cors==4.0.0
diff --git a/web_viewer.py b/web_viewer.py
new file mode 100644
index 0000000..1415889
--- /dev/null
+++ b/web_viewer.py
@@ -0,0 +1,418 @@
+import os
+import json
+import re
+from flask import Flask, jsonify, send_from_directory, request
+from flask_cors import CORS
+from pathlib import Path
+from datetime import datetime
+
+app = Flask(__name__, static_folder='web_viewer_static', static_url_path='')
+CORS(app)
+
+DOWNLOADS_DIR = Path('Downloads')
+
+# Global caches
+_message_cache = {}  # {file_path: (mtime, messages)} or {chat_id_filtered: (timestamp, filtered_messages)}
+_chat_cache = {}  # {cache_key: chats_dict}
+_cache_timestamps = {}  # Track file modification times
+
+
+def parse_message_json(json_str):
+    """Parse a single message JSON string from the concatenated file."""
+    try:
+        # Find the first complete JSON object
+        brace_count = 0
+        start_idx = -1
+        in_string = False
+        escape_next = False
+        
+        for i, char in enumerate(json_str):
+            if escape_next:
+                escape_next = False
+                continue
+            
+            if char == '\\':
+                escape_next = True
+                continue
+            
+            if char == '"' and not escape_next:
+                in_string = not in_string
+                continue
+            
+            if not in_string:
+                if char == '{':
+                    if start_idx == -1:
+                        start_idx = i
+                    brace_count += 1
+                elif char == '}':
+                    brace_count -= 1
+                    if brace_count == 0 and start_idx != -1:
+                        # Found complete JSON object
+                        json_obj = json_str[start_idx:i+1]
+                        remaining = json_str[i+1:].lstrip()
+                        try:
+                            message = json.loads(json_obj)
+                            return message, remaining
+                        except json.JSONDecodeError as e:
+                            # Try to find next object
+                            start_idx = -1
+                            continue
+        
+        if start_idx != -1:
+            # Last object might be incomplete, try anyway
+            try:
+                message = json.loads(json_str[start_idx:])
+                return message, ""
+            except json.JSONDecodeError:
+                pass
+        
+        return None, json_str
+    except Exception as e:
+        print(f"Error parsing message: {e}")
+        return None, json_str
+
+
+def load_messages_from_json(file_path, use_cache=True):
+    """Load all messages from a JSON file (which contains concatenated JSON objects)."""
+    file_path = Path(file_path)
+    
+    # Check cache
+    if use_cache:
+        mtime = file_path.stat().st_mtime if file_path.exists() else 0
+        if str(file_path) in _message_cache:
+            cached_mtime, cached_messages = _message_cache[str(file_path)]
+            if cached_mtime == mtime:
+                return cached_messages
+    
+    messages = []
+    try:
+        # Use buffered reading for better performance
+        with open(file_path, 'r', encoding='utf-8', buffering=8192) as f:
+            content = f.read()
+            
+        remaining = content
+        while remaining.strip():
+            message, remaining = parse_message_json(remaining)
+            if message:
+                messages.append(message)
+            else:
+                break
+        
+        # Cache the results
+        if use_cache and file_path.exists():
+            mtime = file_path.stat().st_mtime
+            _message_cache[str(file_path)] = (mtime, messages)
+    except Exception as e:
+        print(f"Error loading messages from {file_path}: {e}")
+    
+    return messages
+
+
+def load_messages_from_txt(file_path):
+    """Load messages from TXT file and convert to structured format."""
+    messages = []
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        
+        # Split by double newlines (message separator)
+        message_blocks = content.split('\n\n')
+        
+        for block in message_blocks:
+            if not block.strip():
+                continue
+            
+            message = {}
+            lines = block.strip().split('\n')
+            
+            for line in lines:
+                if line.startswith('Message ID:'):
+                    message['id'] = int(line.split(':', 1)[1].strip())
+                elif line.startswith('From User ID:'):
+                    parts = line.split(' - Username:')
+                    if len(parts) == 2:
+                        user_id = parts[0].split(':', 1)[1].strip()
+                        username = parts[1].strip()
+                        message['from_user'] = {
+                            'id': int(user_id),
+                            'username': username
+                        }
+                elif line.startswith('Date:'):
+                    message['date'] = line.split(':', 1)[1].strip()
+                elif line.startswith('Text:'):
+                    message['text'] = line.split(':', 1)[1].strip() if ':' in line else ''
+                elif line.startswith('Reply_markup:'):
+                    message['reply_markup'] = line.split(':', 1)[1].strip() if ':' in line else None
+            
+            if message:
+                messages.append(message)
+    except Exception as e:
+        print(f"Error loading messages from {file_path}: {e}")
+    
+    return messages
+
+
+@app.route('/')
+def index():
+    """Serve the main HTML page."""
+    return send_from_directory('web_viewer_static', 'index.html')
+
+
+def get_chat_key(chat_data):
+    """Generate a unique key for a chat based on its ID and username."""
+    if not chat_data:
+        return None
+    chat_id = chat_data.get('id')
+    username = chat_data.get('username', '')
+    # Use chat ID as primary key, username as secondary
+    return f"{chat_id}_{username}" if username else str(chat_id)
+
+
+def discover_all_chats(use_cache=True):
+    """Scan all message files and discover unique chats."""
+    cache_key = 'all_chats'
+    
+    # Check if we need to refresh cache
+    if use_cache and cache_key in _chat_cache:
+        # Check if any files have been modified
+        needs_refresh = False
+        if not DOWNLOADS_DIR.exists():
+            return _chat_cache[cache_key]
+        
+        for chat_dir in DOWNLOADS_DIR.iterdir():
+            if not chat_dir.is_dir():
+                continue
+            logs_dir = chat_dir / 'logs'
+            if not logs_dir.exists():
+                continue
+            
+            json_file = logs_dir / f'{chat_dir.name}_bot.json'
+            if json_file.exists():
+                mtime = json_file.stat().st_mtime
+                if str(json_file) not in _cache_timestamps or _cache_timestamps[str(json_file)] != mtime:
+                    needs_refresh = True
+                    break
+        
+        if not needs_refresh:
+            return _chat_cache[cache_key]
+    
+    chats_dict = {}
+    
+    if not DOWNLOADS_DIR.exists():
+        _chat_cache[cache_key] = chats_dict
+        return chats_dict
+    
+    # Scan all folders in Downloads
+    for chat_dir in DOWNLOADS_DIR.iterdir():
+        if not chat_dir.is_dir():
+            continue
+            
+        logs_dir = chat_dir / 'logs'
+        if not logs_dir.exists():
+            continue
+        
+        # Try JSON files first
+        json_file = logs_dir / f'{chat_dir.name}_bot.json'
+        if json_file.exists():
+            # Only scan first few messages to discover chats (much faster)
+            messages = load_messages_from_json(json_file, use_cache=use_cache)
+            
+            # Track seen chat keys to avoid duplicates
+            seen_chats = set()
+            
+            # Sample messages to discover chats (check first 100 and last 100)
+            sample_size = min(200, len(messages))
+            if sample_size > 0:
+                sample_indices = list(range(min(100, len(messages)))) + list(range(max(0, len(messages) - 100), len(messages)))
+                for idx in sample_indices:
+                    if idx < len(messages):
+                        msg = messages[idx]
+                        if 'chat' in msg and msg['chat']:
+                            chat_data = msg['chat']
+                            chat_key = get_chat_key(chat_data)
+                            if chat_key and chat_key not in seen_chats:
+                                seen_chats.add(chat_key)
+                                # Create chat info
+                                chat_name = chat_data.get('username') or chat_data.get('first_name') or chat_data.get('title') or str(chat_data.get('id', 'Unknown'))
+                                chats_dict[chat_key] = {
+                                    'id': chat_key,
+                                    'chat_id': chat_data.get('id'),
+                                    'username': chat_data.get('username'),
+                                    'name': chat_name,
+                                    'type': chat_data.get('type', ''),
+                                    'message_count': 0,  # Will be calculated on demand
+                                    'source_folder': chat_dir.name
+                                }
+            
+            # Count messages per chat (do this efficiently)
+            chat_counts = {}
+            for msg in messages:
+                if 'chat' in msg and msg['chat']:
+                    chat_data = msg['chat']
+                    chat_key = get_chat_key(chat_data)
+                    if chat_key:
+                        chat_counts[chat_key] = chat_counts.get(chat_key, 0) + 1
+            
+            # Update message counts
+            for chat_key, count in chat_counts.items():
+                if chat_key in chats_dict:
+                    chats_dict[chat_key]['message_count'] = count
+                elif chat_key not in seen_chats:
+                    # Chat discovered during counting
+                    chat_data = None
+                    for msg in messages:
+                        if 'chat' in msg and msg['chat']:
+                            test_chat = msg['chat']
+                            if get_chat_key(test_chat) == chat_key:
+                                chat_data = test_chat
+                                break
+                    if chat_data:
+                        chat_name = chat_data.get('username') or chat_data.get('first_name') or chat_data.get('title') or str(chat_data.get('id', 'Unknown'))
+                        chats_dict[chat_key] = {
+                            'id': chat_key,
+                            'chat_id': chat_data.get('id'),
+                            'username': chat_data.get('username'),
+                            'name': chat_name,
+                            'type': chat_data.get('type', ''),
+                            'message_count': count,
+                            'source_folder': chat_dir.name
+                        }
+            
+            # Store file mtime for cache invalidation
+            if json_file.exists():
+                _cache_timestamps[str(json_file)] = json_file.stat().st_mtime
+        
+        # Also check TXT files as fallback (if no JSON file found)
+        txt_file = logs_dir / f'{chat_dir.name}_bot.txt'
+        if txt_file.exists():
+            # Check if we already have chats from JSON for this folder
+            has_json_chats = any(c.get('source_folder') == chat_dir.name for c in chats_dict.values())
+            if not has_json_chats:
+                # For TXT files, we can't determine chat info easily, so use folder name
+                txt_chat_key = f"txt_{chat_dir.name}"
+                if txt_chat_key not in chats_dict:
+                    chats_dict[txt_chat_key] = {
+                        'id': txt_chat_key,
+                        'chat_id': None,
+                        'username': None,
+                        'name': chat_dir.name,
+                        'type': 'unknown',
+                        'message_count': 0,
+                        'source_folder': chat_dir.name
+                    }
+    
+    # Cache the results
+    if use_cache:
+        _chat_cache[cache_key] = chats_dict
+    
+    return chats_dict
+
+
+@app.route('/api/chats')
+def get_chats():
+    """Get list of all available chats grouped by actual chat ID."""
+    chats_dict = discover_all_chats()
+    chats = list(chats_dict.values())
+    return jsonify(sorted(chats, key=lambda x: x['name'].lower()))
+
+
+@app.route('/api/chats/<chat_id>/messages')
+def get_messages(chat_id):
+    """Get messages for a specific chat with pagination."""
+    chats_dict = discover_all_chats()
+    
+    if chat_id not in chats_dict:
+        return jsonify({'error': 'Chat not found'}), 404
+    
+    chat_info = chats_dict[chat_id]
+    source_folder = chat_info.get('source_folder')
+    target_chat_id = chat_info.get('chat_id')
+    target_username = chat_info.get('username')
+    
+    # Get pagination parameters
+    page = int(request.args.get('page', 1))
+    per_page = int(request.args.get('per_page', 100))
+    
+    # Find the folder containing messages for this chat
+    chat_dir = DOWNLOADS_DIR / source_folder / 'logs'
+    
+    if not chat_dir.exists():
+        return jsonify({'error': 'Chat folder not found'}), 404
+    
+    json_file = chat_dir / f'{source_folder}_bot.json'
+    txt_file = chat_dir / f'{source_folder}_bot.txt'
+    
+    # Check cache key for filtered messages
+    cache_key = f"{chat_id}_filtered"
+    
+    # Load all messages from JSON file (uses cache)
+    all_messages = []
+    if json_file.exists():
+        all_messages = load_messages_from_json(json_file, use_cache=True)
+    elif txt_file.exists():
+        all_messages = load_messages_from_txt(txt_file)
+    
+    # Filter messages to only include those from the target chat
+    # Cache filtered results per chat
+    if cache_key not in _message_cache or not all_messages:
+        filtered_messages = []
+        for msg in all_messages:
+            if 'chat' in msg and msg['chat']:
+                msg_chat = msg['chat']
+                msg_chat_id = msg_chat.get('id')
+                msg_username = msg_chat.get('username', '')
+                
+                # Match by chat ID and username
+                if msg_chat_id == target_chat_id:
+                    if target_username:
+                        # If we have a username, match it too
+                        if msg_username == target_username:
+                            filtered_messages.append(msg)
+                    else:
+                        # No username, just match by ID
+                        filtered_messages.append(msg)
+            elif chat_id.startswith('txt_'):
+                # For TXT files, include all messages
+                filtered_messages.append(msg)
+        
+        # Sort by message ID (newest first)
+        filtered_messages.sort(key=lambda x: x.get('id', 0), reverse=True)
+        
+        # Cache filtered messages
+        _message_cache[cache_key] = (datetime.now().timestamp(), filtered_messages)
+    else:
+        _, filtered_messages = _message_cache[cache_key]
+    
+    # Apply pagination
+    total = len(filtered_messages)
+    start_idx = (page - 1) * per_page
+    end_idx = start_idx + per_page
+    paginated_messages = filtered_messages[start_idx:end_idx]
+    
+    return jsonify({
+        'messages': paginated_messages,
+        'pagination': {
+            'page': page,
+            'per_page': per_page,
+            'total': total,
+            'pages': (total + per_page - 1) // per_page
+        }
+    })
+
+
+@app.route('/api/chats/<chat_id>/info')
+def get_chat_info(chat_id):
+    """Get chat information."""
+    chats_dict = discover_all_chats()
+    
+    if chat_id not in chats_dict:
+        return jsonify({'error': 'Chat not found'}), 404
+    
+    return jsonify(chats_dict[chat_id])
+
+
+if __name__ == '__main__':
+    # Create static directory if it doesn't exist
+    os.makedirs('web_viewer_static', exist_ok=True)
+    app.run(debug=True, port=5000, host='0.0.0.0')
+
diff --git a/web_viewer_static/app.js b/web_viewer_static/app.js
new file mode 100644
index 0000000..6188237
--- /dev/null
+++ b/web_viewer_static/app.js
@@ -0,0 +1,520 @@
+const API_BASE = 'http://localhost:5000/api';
+
+let currentChatId = null;
+let messages = [];
+let allLoadedMessages = []; // Store all loaded messages for searching
+let currentPage = 1;
+let totalPages = 1;
+let isLoading = false;
+let allMessagesLoaded = false;
+let searchQuery = '';
+
+// Initialize app
+document.addEventListener('DOMContentLoaded', () => {
+    loadChats();
+    setupSearch();
+});
+
+// Load list of chats
+async function loadChats() {
+    const chatList = document.getElementById('chatList');
+    chatList.innerHTML = '<div class="loading">Loading chats...</div>';
+
+    try {
+        const response = await fetch(`${API_BASE}/chats`);
+        const chats = await response.json();
+
+        if (chats.length === 0) {
+            chatList.innerHTML = '<div class="loading">No chats found</div>';
+            return;
+        }
+
+        chatList.innerHTML = '';
+        chats.forEach(chat => {
+            const chatItem = document.createElement('div');
+            chatItem.className = 'chat-item';
+            chatItem.innerHTML = `
+                <div class="chat-item-name">${escapeHtml(chat.name)}</div>
+                <div class="chat-item-meta">${chat.message_count || 0} messages</div>
+            `;
+            chatItem.addEventListener('click', () => selectChat(chat.id));
+            chatList.appendChild(chatItem);
+        });
+    } catch (error) {
+        console.error('Error loading chats:', error);
+        chatList.innerHTML = '<div class="loading" style="color: #ff6b6b;">Error loading chats</div>';
+    }
+}
+
+// Select a chat and load its messages
+async function selectChat(chatId) {
+    currentChatId = chatId;
+    currentPage = 1;
+    allMessagesLoaded = false;
+    allLoadedMessages = []; // Reset loaded messages
+    searchQuery = ''; // Clear search
+
+    // Update active state
+    document.querySelectorAll('.chat-item').forEach(item => {
+        item.classList.remove('active');
+    });
+    event.target.closest('.chat-item')?.classList.add('active');
+
+    // Show search bar
+    document.getElementById('searchBar').style.display = 'flex';
+    document.getElementById('searchInput').value = '';
+    document.getElementById('searchClear').style.display = 'none';
+    document.getElementById('searchResultsInfo').textContent = '';
+
+    // Load chat info
+    try {
+        const response = await fetch(`${API_BASE}/chats/${chatId}/info`);
+        const chatInfo = await response.json();
+        updateChatHeader(chatInfo);
+    } catch (error) {
+        console.error('Error loading chat info:', error);
+    }
+
+    // Setup scroll listener
+    setupScrollListener();
+
+    // Load initial messages
+    await loadMessages(chatId, 1, true);
+}
+
+// Load messages for a chat
+async function loadMessages(chatId, page = 1, clearContainer = false) {
+    if (isLoading || allMessagesLoaded) return;
+    
+    isLoading = true;
+    const messagesContainer = document.getElementById('messagesContainer');
+    
+    // Show loading indicator only on first load or if clearing
+    if (clearContainer) {
+        messagesContainer.innerHTML = '<div class="loading">Loading messages...</div>';
+    } else {
+        // Show loading indicator at bottom
+        const loadingDiv = document.createElement('div');
+        loadingDiv.id = 'loading-more';
+        loadingDiv.className = 'loading';
+        loadingDiv.textContent = 'Loading more messages...';
+        loadingDiv.style.cssText = 'text-align: center; padding: 20px; color: var(--tg-text-secondary);';
+        messagesContainer.appendChild(loadingDiv);
+    }
+
+    try {
+        const response = await fetch(`${API_BASE}/chats/${chatId}/messages?page=${page}&per_page=100`);
+        const data = await response.json();
+
+        // Remove loading indicator
+        const loadingEl = document.getElementById('loading-more');
+        if (loadingEl) {
+            loadingEl.remove();
+        }
+
+        if (data.messages && data.messages.length === 0) {
+            if (clearContainer) {
+                messagesContainer.innerHTML = '<div class="empty-state"><div class="empty-icon">📭</div><p>No messages found</p></div>';
+            }
+            allMessagesLoaded = true;
+            isLoading = false;
+            return;
+        }
+
+        // Handle both old format (array) and new format (object with messages)
+        const messageList = data.messages || data;
+        const pagination = data.pagination;
+        
+        if (pagination) {
+            currentPage = pagination.page;
+            totalPages = pagination.pages;
+            allMessagesLoaded = currentPage >= totalPages;
+        }
+
+        // Store all loaded messages for searching
+        allLoadedMessages = allLoadedMessages.concat(messageList);
+
+        if (clearContainer) {
+            displayMessages(messageList);
+        } else {
+            appendMessages(messageList);
+        }
+        
+        // Apply search filter if active
+        if (searchQuery) {
+            performSearch(searchQuery);
+        }
+    } catch (error) {
+        console.error('Error loading messages:', error);
+        if (clearContainer) {
+            messagesContainer.innerHTML = '<div class="empty-state"><div class="empty-icon">❌</div><p>Error loading messages</p></div>';
+        }
+        const loadingEl = document.getElementById('loading-more');
+        if (loadingEl) {
+            loadingEl.remove();
+        }
+    } finally {
+        isLoading = false;
+    }
+}
+
+// Display messages (replaces all messages)
+function displayMessages(messageList) {
+    const messagesContainer = document.getElementById('messagesContainer');
+    messagesContainer.innerHTML = '';
+
+    messageList.forEach(message => {
+        const messageEl = createMessageElement(message, searchQuery);
+        messagesContainer.appendChild(messageEl);
+    });
+
+    // Scroll to top (newest messages)
+    messagesContainer.scrollTop = 0;
+}
+
+// Append messages (for infinite scroll)
+function appendMessages(messageList) {
+    const messagesContainer = document.getElementById('messagesContainer');
+    
+    messageList.forEach(message => {
+        const messageEl = createMessageElement(message, searchQuery);
+        messagesContainer.appendChild(messageEl);
+    });
+}
+
+// Create message element
+function createMessageElement(message, searchQuery = '') {
+    const messageDiv = document.createElement('div');
+    const isOutgoing = message.outgoing === true;
+    messageDiv.className = `message ${isOutgoing ? 'outgoing' : 'incoming'}`;
+    
+    // Check if message matches search
+    const matchesSearch = searchQuery && messageMatchesSearch(message, searchQuery);
+    if (matchesSearch) {
+        messageDiv.classList.add('highlighted');
+    }
+
+    const bubble = document.createElement('div');
+    bubble.className = 'message-bubble';
+
+    // Forward info
+    if (message.forward_from) {
+        const forwardInfo = document.createElement('div');
+        forwardInfo.className = 'forward-info';
+        const forwardUser = message.forward_from;
+        const forwardName = forwardUser.username || forwardUser.first_name || 'Unknown';
+        forwardInfo.innerHTML = `<strong>Forwarded from:</strong> ${escapeHtml(forwardName)}`;
+        if (message.forward_date) {
+            forwardInfo.innerHTML += ` <span style="opacity: 0.7;">(${formatDate(message.forward_date)})</span>`;
+        }
+        bubble.appendChild(forwardInfo);
+    }
+
+    // Message text
+    if (message.text) {
+        const textDiv = document.createElement('div');
+        textDiv.className = 'message-text';
+        textDiv.innerHTML = formatMessageText(message.text, message.entities || [], searchQuery);
+        bubble.appendChild(textDiv);
+    }
+
+    // Message metadata
+    const metaDiv = document.createElement('div');
+    metaDiv.className = 'message-meta';
+
+    // Sender info
+    if (message.from_user && !isOutgoing) {
+        const sender = document.createElement('span');
+        sender.className = 'message-sender';
+        sender.textContent = message.from_user.username || message.from_user.first_name || 'Unknown';
+        metaDiv.appendChild(sender);
+    }
+
+    // Date
+    if (message.date) {
+        const date = document.createElement('span');
+        date.className = 'message-date';
+        date.textContent = formatDate(message.date);
+        metaDiv.appendChild(date);
+    }
+
+    // Message ID
+    if (message.id) {
+        const id = document.createElement('span');
+        id.className = 'message-id';
+        id.textContent = `ID: ${message.id}`;
+        metaDiv.appendChild(id);
+    }
+
+    bubble.appendChild(metaDiv);
+
+    // Entities info
+    if (message.entities && message.entities.length > 0) {
+        const entitiesDiv = document.createElement('div');
+        entitiesDiv.className = 'message-entities';
+        message.entities.forEach(entity => {
+            const entityItem = document.createElement('div');
+            entityItem.className = 'entity-item';
+            entityItem.textContent = `${entity.type}: offset ${entity.offset}, length ${entity.length}`;
+            entitiesDiv.appendChild(entityItem);
+        });
+        bubble.appendChild(entitiesDiv);
+    }
+
+    messageDiv.appendChild(bubble);
+    return messageDiv;
+}
+
+// Format message text with entities and search highlighting
+function formatMessageText(text, entities, searchQuery = '') {
+    if (!text) return '';
+    
+    let html = escapeHtml(text);
+    
+    // Sort entities by offset (reverse to apply from end to start)
+    const sortedEntities = [...entities].sort((a, b) => b.offset - a.offset);
+    
+    sortedEntities.forEach(entity => {
+        const start = entity.offset;
+        const end = start + entity.length;
+        const before = html.substring(0, start);
+        const entityText = html.substring(start, end);
+        const after = html.substring(end);
+        
+        let wrapped = entityText;
+        if (entity.type === 'MessageEntityType.EMAIL' || entity.type === 'EMAIL') {
+            wrapped = `<a href="mailto:${entityText}">${entityText}</a>`;
+        } else if (entity.type === 'MessageEntityType.URL' || entity.type === 'URL') {
+            wrapped = `<a href="${entityText}" target="_blank" rel="noopener">${entityText}</a>`;
+        } else if (entity.type === 'MessageEntityType.TEXT_LINK' || entity.type === 'TEXT_LINK') {
+            wrapped = `<a href="${entity.url || entityText}" target="_blank" rel="noopener">${entityText}</a>`;
+        } else if (entity.type === 'MessageEntityType.MENTION' || entity.type === 'MENTION') {
+            wrapped = `<strong>${entityText}</strong>`;
+        } else if (entity.type === 'MessageEntityType.BOLD' || entity.type === 'BOLD') {
+            wrapped = `<strong>${entityText}</strong>`;
+        } else if (entity.type === 'MessageEntityType.ITALIC' || entity.type === 'ITALIC') {
+            wrapped = `<em>${entityText}</em>`;
+        } else if (entity.type === 'MessageEntityType.CODE' || entity.type === 'CODE') {
+            wrapped = `<code>${entityText}</code>`;
+        }
+        
+        html = before + wrapped + after;
+    });
+    
+    // Apply search highlighting
+    if (searchQuery) {
+        html = highlightSearchText(html, searchQuery);
+    }
+    
+    return html;
+}
+
+// Highlight search text in HTML (preserving existing HTML tags)
+function highlightSearchText(html, searchQuery) {
+    if (!searchQuery) return html;
+    
+    const query = escapeHtml(searchQuery).toLowerCase();
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    
+    // Split by HTML tags to preserve them
+    const parts = html.split(/(<[^>]+>)/);
+    return parts.map(part => {
+        // Don't highlight inside HTML tags
+        if (part.startsWith('<')) {
+            return part;
+        }
+        // Highlight text content
+        return part.replace(regex, '<span class="search-highlight">$1</span>');
+    }).join('');
+}
+
+// Check if message matches search query
+function messageMatchesSearch(message, query) {
+    if (!query) return false;
+    const lowerQuery = query.toLowerCase();
+    
+    // Search in text
+    if (message.text && message.text.toLowerCase().includes(lowerQuery)) {
+        return true;
+    }
+    
+    // Search in sender name
+    if (message.from_user) {
+        const username = message.from_user.username || '';
+        const firstName = message.from_user.first_name || '';
+        if (username.toLowerCase().includes(lowerQuery) || firstName.toLowerCase().includes(lowerQuery)) {
+            return true;
+        }
+    }
+    
+    // Search in forwarded from
+    if (message.forward_from) {
+        const forwardUsername = message.forward_from.username || '';
+        const forwardFirstName = message.forward_from.first_name || '';
+        if (forwardUsername.toLowerCase().includes(lowerQuery) || forwardFirstName.toLowerCase().includes(lowerQuery)) {
+            return true;
+        }
+    }
+    
+    return false;
+}
+
+// Format date
+function formatDate(dateString) {
+    if (!dateString) return '';
+    
+    try {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diff = now - date;
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        
+        if (days === 0) {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        } else if (days === 1) {
+            return 'Yesterday ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        } else if (days < 7) {
+            return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+        } else {
+            return date.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+        }
+    } catch (e) {
+        return dateString;
+    }
+}
+
+// Update chat header
+function updateChatHeader(chatInfo) {
+    const chatHeader = document.getElementById('chatHeader');
+    const firstLetter = chatInfo.name.charAt(0).toUpperCase();
+    
+    chatHeader.innerHTML = `
+        <div class="chat-header-content">
+            <div class="chat-header-avatar">${firstLetter}</div>
+            <div class="chat-header-info">
+                <div class="chat-header-name">${escapeHtml(chatInfo.name)}</div>
+                <div class="chat-header-meta">${chatInfo.message_count || 0} messages</div>
+            </div>
+        </div>
+    `;
+}
+
+// Setup scroll listener for infinite scroll
+function setupScrollListener() {
+    const messagesContainer = document.getElementById('messagesContainer');
+    
+    // Remove existing listener if any
+    messagesContainer.onscroll = null;
+    
+    // Add scroll listener
+    messagesContainer.addEventListener('scroll', () => {
+        // Don't load more if searching
+        if (searchQuery) return;
+        
+        // Check if near bottom (within 200px)
+        const scrollTop = messagesContainer.scrollTop;
+        const scrollHeight = messagesContainer.scrollHeight;
+        const clientHeight = messagesContainer.clientHeight;
+        
+        // Load more when within 200px of bottom
+        if (scrollHeight - scrollTop - clientHeight < 200) {
+            if (!isLoading && !allMessagesLoaded && currentPage < totalPages) {
+                loadMessages(currentChatId, currentPage + 1, false);
+            }
+        }
+    });
+}
+
+// Setup search functionality
+function setupSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const searchClear = document.getElementById('searchClear');
+    const searchResultsInfo = document.getElementById('searchResultsInfo');
+    
+    let searchTimeout;
+    
+    searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.trim();
+        searchQuery = query;
+        
+        // Show/hide clear button
+        searchClear.style.display = query ? 'block' : 'none';
+        
+        // Debounce search
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            performSearch(query);
+        }, 300);
+    });
+    
+    searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            clearSearch();
+        }
+    });
+    
+    searchClear.addEventListener('click', () => {
+        clearSearch();
+    });
+}
+
+// Perform search
+function performSearch(query) {
+    if (!query) {
+        // Show all messages
+        const messagesContainer = document.getElementById('messagesContainer');
+        messagesContainer.innerHTML = '';
+        allLoadedMessages.forEach(message => {
+            const messageEl = createMessageElement(message, '');
+            messagesContainer.appendChild(messageEl);
+        });
+        document.getElementById('searchResultsInfo').textContent = '';
+        return;
+    }
+    
+    // Filter messages
+    const filteredMessages = allLoadedMessages.filter(msg => messageMatchesSearch(msg, query));
+    
+    // Update UI
+    const messagesContainer = document.getElementById('messagesContainer');
+    messagesContainer.innerHTML = '';
+    
+    if (filteredMessages.length === 0) {
+        messagesContainer.innerHTML = '<div class="empty-state"><div class="empty-icon">🔍</div><p>No messages found matching your search</p></div>';
+        document.getElementById('searchResultsInfo').textContent = 'No results';
+    } else {
+        filteredMessages.forEach(message => {
+            const messageEl = createMessageElement(message, query);
+            messagesContainer.appendChild(messageEl);
+        });
+        document.getElementById('searchResultsInfo').textContent = `${filteredMessages.length} result${filteredMessages.length !== 1 ? 's' : ''}`;
+    }
+}
+
+// Clear search
+function clearSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const searchClear = document.getElementById('searchClear');
+    const searchResultsInfo = document.getElementById('searchResultsInfo');
+    
+    searchInput.value = '';
+    searchQuery = '';
+    searchClear.style.display = 'none';
+    searchResultsInfo.textContent = '';
+    
+    // Show all messages
+    const messagesContainer = document.getElementById('messagesContainer');
+    messagesContainer.innerHTML = '';
+    allLoadedMessages.forEach(message => {
+        const messageEl = createMessageElement(message, '');
+        messagesContainer.appendChild(messageEl);
+    });
+}
+
+// Escape HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
diff --git a/web_viewer_static/index.html b/web_viewer_static/index.html
new file mode 100644
index 0000000..4159902
--- /dev/null
+++ b/web_viewer_static/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TeleTracker - Message Viewer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <h1>TeleTracker</h1>
+                <p class="subtitle">Message Viewer</p>
+            </div>
+            <div class="chat-list" id="chatList">
+                <div class="loading">Loading chats...</div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <div class="chat-header" id="chatHeader">
+                <div class="header-placeholder">
+                    <h2>Select a chat to view messages</h2>
+                </div>
+            </div>
+            <div class="search-bar" id="searchBar" style="display: none;">
+                <input type="text" id="searchInput" placeholder="Search messages..." autocomplete="off">
+                <button id="searchClear" class="search-clear-btn" style="display: none;">✕</button>
+                <div class="search-results-info" id="searchResultsInfo"></div>
+            </div>
+            <div class="messages-container" id="messagesContainer">
+                <div class="empty-state">
+                    <div class="empty-icon">💬</div>
+                    <p>Select a chat from the sidebar to view messages</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
+
diff --git a/web_viewer_static/styles.css b/web_viewer_static/styles.css
new file mode 100644
index 0000000..f82c731
--- /dev/null
+++ b/web_viewer_static/styles.css
@@ -0,0 +1,419 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --tg-bg-primary: #0e1621;
+    --tg-bg-secondary: #17212b;
+    --tg-bg-tertiary: #242f3d;
+    --tg-text-primary: #e4ecf0;
+    --tg-text-secondary: #8c98a4;
+    --tg-accent: #5288c1;
+    --tg-accent-hover: #6ba3e3;
+    --tg-border: #2b5278;
+    --tg-message-bg: #182533;
+    --tg-message-bg-outgoing: #2b5278;
+    --tg-message-text: #e4ecf0;
+    --tg-link: #6ab7ff;
+    --tg-scrollbar: #2b5278;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--tg-bg-primary);
+    color: var(--tg-text-primary);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 320px;
+    background: var(--tg-bg-secondary);
+    border-right: 1px solid var(--tg-border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--tg-border);
+    background: var(--tg-bg-tertiary);
+}
+
+.sidebar-header h1 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    color: var(--tg-text-primary);
+}
+
+.subtitle {
+    font-size: 14px;
+    color: var(--tg-text-secondary);
+}
+
+.chat-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.chat-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-list::-webkit-scrollbar-thumb {
+    background: var(--tg-scrollbar);
+    border-radius: 3px;
+}
+
+.chat-item {
+    padding: 12px 16px;
+    margin-bottom: 4px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-item:hover {
+    background: var(--tg-bg-tertiary);
+}
+
+.chat-item.active {
+    background: var(--tg-accent);
+}
+
+.chat-item-name {
+    font-weight: 500;
+    font-size: 15px;
+    color: var(--tg-text-primary);
+    margin-bottom: 4px;
+}
+
+.chat-item-meta {
+    font-size: 12px;
+    color: var(--tg-text-secondary);
+}
+
+.loading {
+    padding: 20px;
+    text-align: center;
+    color: var(--tg-text-secondary);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--tg-bg-primary);
+    overflow: hidden;
+}
+
+.chat-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--tg-border);
+    background: var(--tg-bg-secondary);
+    display: flex;
+    align-items: center;
+    min-height: 60px;
+}
+
+.header-placeholder {
+    width: 100%;
+    text-align: center;
+}
+
+.header-placeholder h2 {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--tg-text-secondary);
+}
+
+.chat-header-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.chat-header-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--tg-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 18px;
+    margin-right: 12px;
+    color: white;
+}
+
+.chat-header-info {
+    flex: 1;
+}
+
+.chat-header-name {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+.chat-header-meta {
+    font-size: 13px;
+    color: var(--tg-text-secondary);
+}
+
+/* Search Bar */
+.search-bar {
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--tg-border);
+    background: var(--tg-bg-secondary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: relative;
+}
+
+#searchInput {
+    flex: 1;
+    padding: 8px 12px;
+    background: var(--tg-bg-tertiary);
+    border: 1px solid var(--tg-border);
+    border-radius: 6px;
+    color: var(--tg-text-primary);
+    font-size: 14px;
+    outline: none;
+}
+
+#searchInput:focus {
+    border-color: var(--tg-accent);
+}
+
+#searchInput::placeholder {
+    color: var(--tg-text-secondary);
+}
+
+.search-clear-btn {
+    background: var(--tg-bg-tertiary);
+    border: 1px solid var(--tg-border);
+    border-radius: 4px;
+    color: var(--tg-text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.search-clear-btn:hover {
+    background: var(--tg-bg-primary);
+    color: var(--tg-text-primary);
+}
+
+.search-results-info {
+    font-size: 12px;
+    color: var(--tg-text-secondary);
+    white-space: nowrap;
+}
+
+.message.highlighted {
+    background: rgba(82, 136, 193, 0.1);
+    border-left: 3px solid var(--tg-accent);
+    padding-left: 5px;
+}
+
+.message-text .search-highlight {
+    background: rgba(255, 255, 0, 0.3);
+    padding: 2px 0;
+    border-radius: 2px;
+    font-weight: 500;
+}
+
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background: var(--tg-bg-primary);
+}
+
+.messages-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.messages-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.messages-container::-webkit-scrollbar-thumb {
+    background: var(--tg-scrollbar);
+    border-radius: 3px;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--tg-text-secondary);
+}
+
+.empty-icon {
+    font-size: 64px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+}
+
+/* Messages */
+.message {
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    max-width: 70%;
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message.outgoing {
+    align-self: flex-end;
+    align-items: flex-end;
+}
+
+.message.incoming {
+    align-self: flex-start;
+    align-items: flex-start;
+}
+
+.message-bubble {
+    background: var(--tg-message-bg);
+    padding: 10px 14px;
+    border-radius: 12px;
+    word-wrap: break-word;
+    position: relative;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.message.outgoing .message-bubble {
+    background: var(--tg-message-bg-outgoing);
+    border-bottom-right-radius: 4px;
+}
+
+.message.incoming .message-bubble {
+    border-bottom-left-radius: 4px;
+}
+
+.message-text {
+    font-size: 15px;
+    line-height: 1.5;
+    color: var(--tg-message-text);
+    white-space: pre-wrap;
+}
+
+.message-text a {
+    color: var(--tg-link);
+    text-decoration: none;
+}
+
+.message-text a:hover {
+    text-decoration: underline;
+}
+
+.message-meta {
+    display: flex;
+    align-items: center;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--tg-text-secondary);
+    gap: 8px;
+}
+
+.message-sender {
+    font-weight: 500;
+    color: var(--tg-text-secondary);
+}
+
+.message-date {
+    color: var(--tg-text-secondary);
+    opacity: 0.7;
+}
+
+.message-id {
+    color: var(--tg-text-secondary);
+    opacity: 0.5;
+    font-family: monospace;
+}
+
+.message-entities {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 12px;
+    color: var(--tg-text-secondary);
+}
+
+.entity-item {
+    margin: 4px 0;
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    font-family: monospace;
+}
+
+.forward-info {
+    margin-bottom: 6px;
+    padding: 6px 10px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    font-size: 12px;
+    color: var(--tg-text-secondary);
+}
+
+.forward-info strong {
+    color: var(--tg-link);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 100%;
+        position: absolute;
+        z-index: 10;
+        height: 100%;
+    }
+
+    .main-content {
+        width: 100%;
+    }
+
+    .message {
+        max-width: 85%;
+    }
+}
+