diff --git a/requirements.txt b/requirements.txt
index 92e78ed..2650190 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,8 @@
-Flask>=3.1.2
-Flask-SQLAlchemy>=3.0.5
-Flask-Cache>=0.13.1
-cryptography>=45.0.6
\ No newline at end of file
+Flask==3.0.0
+Flask-SocketIO==5.3.6
+Flask-Limiter==3.5.0
+redis==5.0.1
+cryptography==41.0.7
+bcrypt==4.1.2
+python-dotenv==1.0.0
+gunicorn==21.2.0
\ No newline at end of file
diff --git a/src/app.py b/src/app.py
index ec5ff68..62a0209 100644
--- a/src/app.py
+++ b/src/app.py
@@ -1,11 +1,554 @@
-from flask import Flask
-from todo import todo
+import eventlet
+eventlet.monkey_patch()
+from flask import Flask, make_response, render_template, request, jsonify
+from flask_socketio import SocketIO, emit, join_room, leave_room, disconnect
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
+import collections
+import threading
+import time
+import uuid
+import json
+import secrets
+import hashlib
+import hmac
+import re
+from datetime import datetime, timedelta
+import logging
+from functools import wraps
+import os
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
 
 app = Flask(__name__)
+socketio = SocketIO(app)
+
+# Security constants
+MAX_MESSAGES = 256
+MAX_ROOM_ID_LENGTH = 32
+MAX_MESSAGE_SIZE = 8192  # 8KB max encrypted message
+MAX_ROOMS_PER_IP = 5
+MAX_USERS_PER_ROOM = 50
+ROOM_CLEANUP_INTERVAL = 3600  # 1 hour
+USER_SESSION_TIMEOUT = 3600  # 1 hour
+RATE_LIMIT_MESSAGE = "10 per minute"
+RATE_LIMIT_ROOM_JOIN = "5 per minute"
+
+# In-memory storage with enhanced security
+chat_rooms = {}
+room_keys = {}
+user_sessions = {}
+room_passwords = {}  # Separate password storage with hashing
+room_creation_times = {}
+ip_room_count = {}  # Track rooms created per IP
+failed_password_attempts = {}  # Track failed password attempts
+message_hashes = {}  # Store message hashes for duplicate detection
+room_session_keys = {}  # Store session keys for each room
+
+class CircularMessageBuffer:
+    def __init__(self, max_size=MAX_MESSAGES):
+        self.buffer = collections.deque(maxlen=max_size)
+        self.lock = threading.Lock()
+        self.creation_time = time.time()
+        self.last_activity = time.time()
+    
+    def add_message(self, message_data):
+        with self.lock:
+            # Generate unique message ID and validate
+            message_id = str(uuid.uuid4())
+            
+            # Create message hash for duplicate detection
+            message_hash = hashlib.sha256(
+                f"{message_data['encrypted_content']}{message_data['sender_id']}{message_data.get('iv', '')}".encode()
+            ).hexdigest()
+            
+            self.buffer.append({
+                'id': message_id,
+                'encrypted_content': message_data['encrypted_content'],
+                'sender_id': message_data['sender_id'],
+                'timestamp': time.time(),
+                'iv': message_data.get('iv'),
+                'hash': message_hash
+            })
+            
+            self.last_activity = time.time()
+    
+    def get_messages(self):
+        with self.lock:
+            return list(self.buffer)
+    
+    def get_message_count(self):
+        with self.lock:
+            return len(self.buffer)
+    
+    def is_expired(self, timeout_seconds=USER_SESSION_TIMEOUT):
+        return time.time() - self.last_activity > timeout_seconds
+
+# Security validation functions
+def is_valid_room_id(room_id):
+    """Validate room ID format and length"""
+    if not room_id or len(room_id) > MAX_ROOM_ID_LENGTH:
+        return False
+    # Allow only alphanumeric characters and hyphens
+    return re.match(r'^[a-zA-Z0-9\-_]+$', room_id) is not None
+
+def is_valid_message(encrypted_content, iv=None):
+    """Validate message format and size"""
+    if not encrypted_content or len(encrypted_content) > MAX_MESSAGE_SIZE:
+        return False
+    if iv and len(iv) > 256:  # IV should be reasonable size
+        return False
+    return True
+
+def is_valid_public_key(public_key):
+    """Validate public key format"""
+    if not public_key or len(public_key) > 2048:  # RSA-2048 base64 encoded
+        return False
+    try:
+        # Basic base64 validation
+        import base64
+        base64.b64decode(public_key)
+        return True
+    except Exception:
+        return False
+
+def hash_password(password, salt=None):
+    """Hash password with salt using PBKDF2"""
+    if salt is None:
+        salt = secrets.token_bytes(32)
+    else:
+        salt = bytes.fromhex(salt)
+    
+    hashed = hashlib.pbkdf2_hmac('sha256', password.encode(), salt, 100000)
+    return salt.hex() + hashed.hex()
+
+def verify_password(password, hashed):
+    """Verify password against hash"""
+    try:
+        salt = bytes.fromhex(hashed[:64])
+        stored_hash = hashed[64:]
+        new_hash = hashlib.pbkdf2_hmac('sha256', password.encode(), salt, 100000).hex()
+        return hmac.compare_digest(stored_hash, new_hash)
+    except Exception:
+        return False
+
+def cleanup_expired_rooms():
+    """Clean up expired rooms and sessions"""
+    current_time = time.time()
+    expired_rooms = []
+    
+    for room_id, room_buffer in chat_rooms.items():
+        if room_buffer.is_expired():
+            expired_rooms.append(room_id)
+    
+    for room_id in expired_rooms:
+        logger.info(f"Cleaning up expired room: {room_id}")
+        cleanup_room(room_id)
+
+def cleanup_room(room_id):
+    """Completely clean up a room"""
+    chat_rooms.pop(room_id, None)
+    room_keys.pop(room_id, None)
+    room_passwords.pop(room_id, None)
+    room_creation_times.pop(room_id, None)
+    message_hashes.pop(room_id, None)
+    room_session_keys.pop(room_id, None)  # Clean up session keys
+
+def get_client_ip():
+    """Get real client IP address"""
+    if request.headers.get('X-Forwarded-For'):
+        return request.headers.get('X-Forwarded-For').split(',')[0].strip()
+    elif request.headers.get('X-Real-IP'):
+        return request.headers.get('X-Real-IP')
+    return request.remote_addr
+
+# Authentication decorator
+def require_valid_session(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if request.sid not in user_sessions:
+            logger.warning(f"Invalid session attempt from {get_client_ip()}")
+            disconnect()
+            return
+        return f(*args, **kwargs)
+    return decorated_function
+
+# CSP header as requested
+@app.after_request
+def apply_csp(response):
+    csp = (
+        "default-src 'self'; "
+        "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; "
+        "style-src 'self' 'unsafe-inline'; "
+        "img-src 'self' data:; "
+        "connect-src 'self' ws://localhost:5000 wss://localhost:5000;"
+    )
+    response.headers["Content-Security-Policy"] = csp
+    return response
 
 @app.route('/')
-def hello():
-    htmlbasic= """
-    <body style="background-color: #121212; color: #FFFFFF; font-family: Arial, sans-serif;">
-    """
-    return htmlbasic + "<p>" + str(todo) + "</p>" + "</body>"
\ No newline at end of file
+def index():
+    return render_template('chat.html')
+
+@app.route('/room/<room_id>')
+def room(room_id):
+    if not is_valid_room_id(room_id):
+        return "Invalid room ID", 400
+    return render_template('chat.html', room_id=room_id)
+
+@app.route('/api/room/<room_id>/info')
+def get_room_info(room_id):
+    if not is_valid_room_id(room_id):
+        return jsonify({'error': 'Invalid room ID'}), 400
+        
+    if room_id in chat_rooms:
+        return jsonify({
+            'exists': True,
+            'message_count': chat_rooms[room_id].get_message_count(),
+            'max_messages': MAX_MESSAGES,
+            'user_count': len(room_keys.get(room_id, {})),
+            'max_users': MAX_USERS_PER_ROOM
+        })
+    return jsonify({'exists': False})
+
+# Socket event handlers
+@socketio.on('connect')
+def handle_connect():
+    client_ip = get_client_ip()
+    user_id = str(uuid.uuid4())
+    
+    # Check connection limits
+    active_connections = sum(1 for session in user_sessions.values() 
+                           if session.get('ip') == client_ip)
+    
+    if active_connections > 10:  # Max 10 connections per IP
+        logger.warning(f"Too many connections from IP: {client_ip}")
+        disconnect()
+        return
+    
+    user_sessions[request.sid] = {
+        'user_id': user_id,
+        'room': None,
+        'display_name': f"User-{user_id[:8]}",
+        'ip': client_ip,
+        'connected_at': time.time(),
+        'last_activity': time.time()
+    }
+    
+    emit('user_connected', {'user_id': user_id})
+    logger.info(f"User {user_id} connected from {client_ip}")
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    if request.sid in user_sessions:
+        user_data = user_sessions[request.sid]
+        room_id = user_data.get('room')
+        user_id = user_data.get('user_id')
+        
+        if room_id:
+            leave_room(room_id)
+            # Remove user's public key
+            if room_id in room_keys and user_id in room_keys[room_id]:
+                del room_keys[room_id][user_id]
+            
+            emit('user_left', {'user_id': user_id}, room=room_id)
+            
+            # Clean up empty rooms
+            if room_id in room_keys and len(room_keys[room_id]) == 0:
+                cleanup_room(room_id)
+        
+        del user_sessions[request.sid]
+        logger.info(f"User {user_id} disconnected")
+
+@socketio.on('join_room')
+@require_valid_session
+def handle_join_room(data):
+    try:
+        room_id = data.get('room_id', '').strip()
+        public_key = data.get('public_key', '')
+        password = data.get('password', '')
+        
+        # Validation
+        if not is_valid_room_id(room_id):
+            emit('room_joined', {'error': 'Invalid room ID format'})
+            return
+            
+        if not is_valid_public_key(public_key):
+            emit('room_joined', {'error': 'Invalid public key format'})
+            return
+        
+        client_ip = get_client_ip()
+        user_id = user_sessions[request.sid]['user_id']
+        
+        is_first_user = False
+        
+        # Check if room exists
+        if room_id not in chat_rooms:
+            # Check room creation limits per IP
+            rooms_by_ip = ip_room_count.get(client_ip, 0)
+            if rooms_by_ip >= MAX_ROOMS_PER_IP:
+                emit('room_joined', {'error': 'Too many rooms created from this IP'})
+                return
+            
+            # Create new room
+            chat_rooms[room_id] = CircularMessageBuffer()
+            room_keys[room_id] = {}
+            room_creation_times[room_id] = time.time()
+            message_hashes[room_id] = set()
+            room_session_keys[room_id] = None  # Initialize session key storage
+            
+            # Store hashed password if provided
+            if password:
+                room_passwords[room_id] = hash_password(password)
+            
+            # Update IP room count
+            ip_room_count[client_ip] = rooms_by_ip + 1
+            is_first_user = True
+            
+            logger.info(f"Room {room_id} created by {user_id}")
+        else:
+            # Check room capacity
+            if len(room_keys[room_id]) >= MAX_USERS_PER_ROOM:
+                emit('room_joined', {'error': 'Room is full'})
+                return
+            
+            # Verify password if room is password protected
+            if room_id in room_passwords:
+                if not password:
+                    emit('room_joined', {'error': 'Password required'})
+                    return
+                    
+                # Check failed attempts
+                attempt_key = f"{client_ip}_{room_id}"
+                failed_attempts = failed_password_attempts.get(attempt_key, 0)
+                
+                if failed_attempts >= 5:  # Max 5 failed attempts
+                    emit('room_joined', {'error': 'Too many failed password attempts'})
+                    return
+                
+                if not verify_password(password, room_passwords[room_id]):
+                    failed_password_attempts[attempt_key] = failed_attempts + 1
+                    emit('room_joined', {'error': 'Incorrect password'})
+                    return
+                else:
+                    # Clear failed attempts on success
+                    failed_password_attempts.pop(attempt_key, None)
+        
+        # Generate new UUID for this room session
+        new_user_id = str(uuid.uuid4())
+        user_sessions[request.sid]['user_id'] = new_user_id
+        user_sessions[request.sid]['display_name'] = f"User-{new_user_id[:8]}"
+        user_sessions[request.sid]['last_activity'] = time.time()
+        
+        # Store user's public key
+        room_keys[room_id][new_user_id] = public_key
+        
+        # Join the room
+        join_room(room_id)
+        user_sessions[request.sid]['room'] = room_id
+        
+        # Get room data
+        messages = chat_rooms[room_id].get_messages()
+        user_keys = room_keys[room_id]
+        
+        # Send room joined confirmation
+        emit('room_joined', {
+            'room_id': room_id,
+            'user_id': new_user_id,
+            'display_name': user_sessions[request.sid]['display_name'],
+            'messages': messages,
+            'users': list(user_keys.keys()),
+            'user_keys': user_keys,
+            'message_count': chat_rooms[room_id].get_message_count(),
+            'is_first_user': is_first_user
+        })
+        
+        # Notify others about new user
+        emit('user_joined', {
+            'user_id': new_user_id,
+            'display_name': user_sessions[request.sid]['display_name'],
+            'public_key': public_key
+        }, room=room_id, include_self=False)
+        
+        # Handle session key distribution
+        if is_first_user:
+            # First user - they will generate the session key on client side
+            logger.info(f"First user {new_user_id} joined room {room_id} - will generate session key")
+        else:
+            # Not first user - request session key from existing users
+            logger.info(f"User {new_user_id} joined room {room_id} - requesting session key")
+            emit('request_session_key', {
+                'new_user_id': new_user_id,
+                'public_key': public_key
+            }, room=room_id, include_self=False)
+        
+        logger.info(f"User {new_user_id} joined room {room_id}")
+        
+    except Exception as e:
+        logger.error(f"Error in join_room: {str(e)}")
+        emit('room_joined', {'error': 'Internal server error'})
+
+@socketio.on('send_message')
+@require_valid_session
+def handle_send_message(data):
+    try:
+        user_data = user_sessions[request.sid]
+        room_id = user_data['room']
+        
+        if not room_id or room_id not in chat_rooms:
+            return
+        
+        encrypted_content = data.get('encrypted_content', '')
+        iv = data.get('iv', '')
+        
+        # Validate message
+        if not is_valid_message(encrypted_content, iv):
+            logger.warning(f"Invalid message from user {user_data['user_id']}")
+            return
+        
+        # Check for duplicate messages
+        message_hash = hashlib.sha256(
+            f"{encrypted_content}{user_data['user_id']}{iv}".encode()
+        ).hexdigest()
+        
+        if room_id not in message_hashes:
+            message_hashes[room_id] = set()
+        
+        if message_hash in message_hashes[room_id]:
+            logger.warning(f"Duplicate message detected from user {user_data['user_id']}")
+            return
+        
+        message_hashes[room_id].add(message_hash)
+        
+        # Limit message hash storage
+        if len(message_hashes[room_id]) > MAX_MESSAGES * 2:
+            message_hashes[room_id] = set(list(message_hashes[room_id])[-MAX_MESSAGES:])
+        
+        message_data = {
+            'encrypted_content': encrypted_content,
+            'sender_id': user_data['user_id'],
+            'display_name': user_data['display_name'],
+            'iv': iv
+        }
+        
+        # Add to room buffer
+        chat_rooms[room_id].add_message(message_data)
+        
+        # Update user activity
+        user_sessions[request.sid]['last_activity'] = time.time()
+        
+        # Broadcast to room
+        emit('new_message', {
+            'id': str(uuid.uuid4()),
+            'encrypted_content': encrypted_content,
+            'sender_id': user_data['user_id'],
+            'display_name': user_data['display_name'],
+            'timestamp': time.time(),
+            'iv': iv,
+            'message_count': chat_rooms[room_id].get_message_count()
+        }, room=room_id)
+        
+    except Exception as e:
+        logger.error(f"Error in send_message: {str(e)}")
+
+@socketio.on('share_session_key')
+@require_valid_session
+def handle_share_session_key(data):
+    """Handle sharing of session key with a specific user"""
+    try:
+        room_id = data.get('room_id', '')
+        target_user_id = data.get('target_user_id', '')
+        encrypted_key = data.get('encrypted_key', '')
+        
+        # Validation
+        if not room_id or not target_user_id or not encrypted_key:
+            logger.warning("Invalid share_session_key request")
+            return
+            
+        if len(encrypted_key) > 2048:  # Reasonable limit for encrypted session key
+            logger.warning("Encrypted key too large")
+            return
+        
+        sender_id = user_sessions[request.sid]['user_id']
+        sender_room = user_sessions[request.sid].get('room')
+        
+        # Verify sender is in the correct room
+        if room_id != sender_room:
+            logger.warning(f"User {sender_id} tried to share key for room {room_id} but is in {sender_room}")
+            return
+        
+        # Find target user's socket session
+        target_sid = None
+        for sid, session in user_sessions.items():
+            if session.get('user_id') == target_user_id and session.get('room') == room_id:
+                target_sid = sid
+                break
+        
+        if target_sid:
+            # Send the encrypted session key directly to the target user
+            emit('session_key_received', {
+                'from_user_id': sender_id,
+                'encrypted_key': encrypted_key
+            }, room=target_sid)
+            logger.info(f"Session key shared from {sender_id} to {target_user_id} in room {room_id}")
+        else:
+            logger.warning(f"Target user {target_user_id} not found in room {room_id}")
+        
+    except Exception as e:
+        logger.error(f"Error in share_session_key: {str(e)}")
+
+@socketio.on('key_exchange')
+@require_valid_session
+def handle_key_exchange(data):
+    """Legacy key exchange handler - redirects to share_session_key"""
+    try:
+        # Map old format to new format
+        room_id = data.get('room_id', '')
+        target_user = data.get('target_user', '')
+        encrypted_key = data.get('encrypted_key', '')
+        
+        if room_id and target_user and encrypted_key:
+            handle_share_session_key({
+                'room_id': room_id,
+                'target_user_id': target_user,
+                'encrypted_key': encrypted_key
+            })
+    except Exception as e:
+        logger.error(f"Error in legacy key_exchange: {str(e)}")
+
+# Background cleanup task
+def start_cleanup_task():
+    def cleanup_worker():
+        while True:
+            try:
+                cleanup_expired_rooms()
+                time.sleep(ROOM_CLEANUP_INTERVAL)
+            except Exception as e:
+                logger.error(f"Error in cleanup task: {str(e)}")
+    
+    cleanup_thread = threading.Thread(target=cleanup_worker, daemon=True)
+    cleanup_thread.start()
+
+# Error handlers
+@app.errorhandler(429)
+def ratelimit_handler(e):
+    return jsonify({'error': 'Rate limit exceeded'}), 429
+
+@app.errorhandler(404)
+def not_found(e):
+    return jsonify({'error': 'Not found'}), 404
+
+@app.errorhandler(500)
+def internal_error(e):
+    logger.error(f"Internal server error: {str(e)}")
+    return jsonify({'error': 'Internal server error'}), 500
+
+if __name__ == "__main__":
+    try:
+        socketio.run(app, debug=True, allow_unsafe_werkzeug=True)
+    except BrokenPipeError:
+        # Suppress noisy broken pipe errors (client disconnects)
+        import sys
+        print("Broken pipe error suppressed.", file=sys.stderr)
\ No newline at end of file
diff --git a/src/static/script.js b/src/static/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/static/styles.css b/src/static/styles.css
new file mode 100644
index 0000000..2450522
--- /dev/null
+++ b/src/static/styles.css
@@ -0,0 +1,437 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    background: #0f0f0f;
+    color: #ececec;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-container {
+    background: #212121;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.chat-header {
+    background: #0f0f0f;
+    border-bottom: 1px solid #333;
+    padding: 16px 20px;
+    position: relative;
+    z-index: 100;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.logo {
+    font-size: 18px;
+    font-weight: 600;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.encryption-badge {
+    background: #10a37f;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.room-section {
+    background: #2d2d2d;
+    padding: 20px;
+    margin: 20px;
+    border-radius: 12px;
+    border: 1px solid #404040;
+}
+
+.room-input-container {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-top: 16px;
+}
+
+.room-input {
+    flex: 1;
+    background: #0f0f0f;
+    border: 1px solid #404040;
+    color: #ececec;
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.room-input:focus {
+    border-color: #10a37f;
+    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
+}
+
+.btn {
+    background: #10a37f;
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.btn:hover {
+    background: #0d8c6a;
+}
+
+.btn-secondary {
+    background: #2d2d2d;
+    border: 1px solid #404040;
+}
+
+.btn-secondary:hover {
+    background: #3d3d3d;
+}
+
+.status-text {
+    color: #b4b4b4;
+    font-size: 14px;
+    margin-top: 12px;
+}
+
+.room-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: #2d2d2d;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #b4b4b4;
+    margin-bottom: 16px;
+}
+
+.room-details {
+    display: flex;
+    gap: 20px;
+}
+
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background: #212121;
+    max-width: 1000px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.messages-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.messages-container::-webkit-scrollbar-track {
+    background: #2d2d2d;
+}
+
+.messages-container::-webkit-scrollbar-thumb {
+    background: #404040;
+    border-radius: 4px;
+}
+
+
+.message-group {
+    margin-bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.message-group.sent {
+    align-items: flex-end;
+}
+
+.message-group.received {
+    align-items: flex-start;
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 8px;
+}
+
+.user-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #10a37f, #0d8c6a);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    color: white;
+}
+
+.user-avatar.own {
+    background: linear-gradient(45deg, #6366f1, #8b5cf6);
+}
+
+.user-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #ececec;
+}
+
+.message-time {
+    color: #888;
+    font-size: 12px;
+    margin-left: auto;
+}
+
+
+.message-content {
+    background: #2d2d2d;
+    padding: 12px 16px;
+    border-radius: 12px;
+    margin-left: 36px;
+    border: 1px solid #404040;
+    line-height: 1.5;
+    word-wrap: break-word;
+    max-width: 70%;
+    text-align: left;
+}
+
+.message-group.sent .message-content {
+    background: #0f0f0f;
+    border-color: #333;
+    margin-left: 0;
+    margin-right: 36px;
+    text-align: right;
+    align-self: flex-end;
+}
+
+.message-group.received .message-content {
+    align-self: flex-start;
+}
+
+.input-section {
+    background: #0f0f0f;
+    padding: 20px;
+    border-top: 1px solid #333;
+}
+
+.input-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.message-input {
+    width: 100%;
+    background: #2d2d2d;
+    border: 1px solid #404040;
+    color: #ececec;
+    padding: 16px 60px 16px 20px;
+    border-radius: 12px;
+    font-size: 16px;
+    outline: none;
+    resize: none;
+    min-height: 24px;
+    max-height: 200px;
+    font-family: inherit;
+    line-height: 1.5;
+    transition: border-color 0.2s;
+}
+
+.message-input:focus {
+    border-color: #10a37f;
+    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
+}
+
+.message-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.send-button {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #10a37f;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    color: white;
+}
+
+.send-button:hover:not(:disabled) {
+    background: #0d8c6a;
+}
+
+.send-button:disabled {
+    background: #404040;
+    cursor: not-allowed;
+}
+
+.welcome-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    text-align: center;
+    padding: 40px 20px;
+}
+
+.welcome-title {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    background: linear-gradient(45deg, #10a37f, #6366f1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.welcome-subtitle {
+    font-size: 18px;
+    color: #b4b4b4;
+    margin-bottom: 32px;
+    max-width: 600px;
+}
+
+.feature-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 32px;
+    max-width: 800px;
+}
+
+.feature-item {
+    background: #2d2d2d;
+    padding: 20px;
+    border-radius: 12px;
+    border: 1px solid #404040;
+}
+
+.feature-icon {
+    font-size: 24px;
+    margin-bottom: 12px;
+}
+
+.feature-title {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #ececec;
+}
+
+.feature-desc {
+    color: #b4b4b4;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.loading-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #b4b4b4;
+    font-size: 14px;
+}
+
+.loading-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #404040;
+    border-top: 2px solid #10a37f;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.error-message {
+    background: #dc2626;
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin: 16px 0;
+    font-size: 14px;
+}
+
+.typing-indicator {
+    color: #888;
+    font-style: italic;
+    font-size: 13px;
+    padding: 8px 20px;
+}
+
+@media (max-width: 768px) {
+    .chat-container {
+        height: 100vh;
+    }
+    
+    .header-content {
+        padding: 0 4px;
+    }
+    
+    .room-input-container {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .room-input, .btn {
+        width: 100%;
+    }
+    
+    .room-details {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .message-content {
+        margin-left: 0;
+        margin-top: 8px;
+    }
+
+    .feature-list {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/src/templates/chat.html b/src/templates/chat.html
new file mode 100644
index 0000000..abb7701
--- /dev/null
+++ b/src/templates/chat.html
@@ -0,0 +1,1560 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Secure Chat Platform</title>
+    <meta http-equiv="X-Content-Type-Options" content="nosniff">
+    <meta http-equiv="X-Frame-Options" content="DENY">
+    <script src="https://cdn.jsdelivr.net/npm/socket.io-client@3.1.3/dist/socket.io.js"></script>
+    <style>
+        /* Enhanced CSS with security considerations */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+            color: #ffffff;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .chat-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            max-width: 100vw;
+        }
+
+        .chat-header {
+            background: rgba(20, 20, 20, 0.95);
+            border-bottom: 1px solid #333;
+            padding: 1rem 1.5rem;
+            backdrop-filter: blur(10px);
+        }
+
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #00ff88;
+        }
+
+        .encryption-badge {
+            background: linear-gradient(45deg, #00ff88, #00cc6a);
+            color: #000;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+
+        .welcome-screen {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+            text-align: center;
+        }
+
+        .welcome-title {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #00ff88, #ffffff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .welcome-subtitle {
+            font-size: 1.1rem;
+            color: #aaa;
+            margin-bottom: 3rem;
+            max-width: 600px;
+            line-height: 1.6;
+        }
+
+        .room-section {
+            margin-bottom: 3rem;
+        }
+
+        .room-input-container {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .room-input {
+            padding: 0.75rem 1rem;
+            border: 2px solid #333;
+            border-radius: 8px;
+            background: #1a1a1a;
+            color: #fff;
+            font-size: 1rem;
+            min-width: 200px;
+        }
+
+        .room-input:focus {
+            outline: none;
+            border-color: #00ff88;
+            box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
+        }
+
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(45deg, #00ff88, #00cc6a);
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 1rem;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, #333, #555);
+            color: #fff;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        .status-text {
+            color: #aaa;
+            margin-top: 1rem;
+            min-height: 24px;
+        }
+
+        .loading-message {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .loading-spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid #333;
+            border-top: 2px solid #00ff88;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        .error-message {
+            color: #ff4444;
+            font-weight: 600;
+        }
+
+        .success-message {
+            color: #00ff88;
+            font-weight: 600;
+        }
+
+        .feature-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            max-width: 1000px;
+            margin-top: 2rem;
+        }
+
+        .feature-item {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid #333;
+            border-radius: 12px;
+            padding: 1.5rem;
+            text-align: center;
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .feature-title {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #fff;
+        }
+
+        .feature-desc {
+            color: #aaa;
+            font-size: 0.9rem;
+            line-height: 1.4;
+        }
+
+        .room-info {
+            background: rgba(20, 20, 20, 0.95);
+            border-bottom: 1px solid #333;
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .room-details {
+            display: flex;
+            gap: 1.5rem;
+            align-items: center;
+        }
+
+        .room-details span {
+            color: #aaa;
+            font-size: 0.9rem;
+        }
+
+        .room-details strong {
+            color: #00ff88;
+        }
+
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .message-group {
+            display: flex;
+            flex-direction: column;
+            max-width: 70%;
+            margin-bottom: 0.5rem;
+        }
+
+        .message-group.sent {
+            align-self: flex-end;
+            align-items: flex-end;
+        }
+
+        .message-group.received {
+            align-self: flex-start;
+            align-items: flex-start;
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.25rem;
+            font-size: 0.8rem;
+            color: #888;
+        }
+
+        .message-group.sent .message-header {
+            flex-direction: row-reverse;
+        }
+
+        .user-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #00ff88, #00cc6a);
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.7rem;
+            font-weight: 700;
+        }
+
+        .user-avatar.own {
+            background: linear-gradient(45deg, #0088ff, #0066cc);
+            color: #fff;
+        }
+
+        .user-name {
+            font-weight: 600;
+        }
+
+        .message-time {
+            font-size: 0.75rem;
+            opacity: 0.7;
+        }
+
+        .message-content {
+            background: #2d2d2d;
+            border: 1px solid #404040;
+            border-radius: 12px;
+            padding: 0.75rem 1rem;
+            word-wrap: break-word;
+            max-width: 100%;
+            position: relative;
+        }
+
+        .message-content.own {
+            background: #1a4d3a;
+            border-color: #00ff88;
+        }
+
+        .input-section {
+            padding: 1rem 1.5rem;
+            background: rgba(20, 20, 20, 0.95);
+            border-top: 1px solid #333;
+        }
+
+        .input-container {
+            display: flex;
+            gap: 0.5rem;
+            align-items: flex-end;
+        }
+
+        .message-input {
+            flex: 1;
+            border: 2px solid #333;
+            border-radius: 12px;
+            background: #1a1a1a;
+            color: #fff;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            font-family: inherit;
+            resize: none;
+            max-height: 120px;
+            min-height: 44px;
+        }
+
+        .message-input:focus {
+            outline: none;
+            border-color: #00ff88;
+            box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
+        }
+
+        .message-input:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .send-button {
+            width: 44px;
+            height: 44px;
+            border: none;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #00ff88, #00cc6a);
+            color: #000;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            flex-shrink: 0;
+        }
+
+        .send-button:hover:not(:disabled) {
+            transform: scale(1.1);
+            box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
+        }
+
+        .send-button:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        .security-indicator {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            color: #00ff88;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            border: 1px solid #00ff88;
+            z-index: 1000;
+        }
+
+        /* Animations */
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .message-group {
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .welcome-title {
+                font-size: 2rem;
+            }
+
+            .room-input-container {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .room-input {
+                min-width: 100%;
+            }
+
+            .feature-list {
+                grid-template-columns: 1fr;
+            }
+
+            .room-details {
+                flex-direction: column;
+                gap: 0.5rem;
+                align-items: flex-start;
+            }
+
+            .message-group {
+                max-width: 85%;
+            }
+        }
+
+        /* Accessibility improvements */
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        /* Focus indicators */
+        .btn:focus,
+        .room-input:focus,
+        .message-input:focus,
+        .send-button:focus {
+            outline: 2px solid #00ff88;
+            outline-offset: 2px;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <div class="header-content">
+                <div class="logo">
+                    🔒 SecureChat
+                </div>
+                <div class="encryption-badge" id="encryptionBadge">
+                    E2E Encrypted
+                </div>
+            </div>
+        </div>
+
+        <!-- Welcome Screen -->
+        <div id="welcomeScreen" class="welcome-screen">
+            <h1 class="welcome-title">End-to-End Encrypted Chat</h1>
+            <p class="welcome-subtitle">
+                Your messages are encrypted in your browser before being sent. 
+                Messages are stored temporarily in memory and automatically deleted after 256 messages.
+            </p>
+            
+            <div class="room-section">
+                <div class="room-input-container">
+                    <input type="text" 
+                           class="room-input" 
+                           id="roomInput" 
+                           placeholder="Enter room ID (leave blank for new room)"
+                           maxlength="32"
+                           pattern="[a-zA-Z0-9\-_]+"
+                           title="Only letters, numbers, hyphens and underscores allowed">
+                    <input type="password" 
+                           class="room-input" 
+                           id="roomPasswordInput" 
+                           placeholder="Optional: Channel Password" 
+                           style="max-width: 220px;"
+                           maxlength="128"
+                           autocomplete="new-password">
+                    <button class="btn" id="joinRoomBtn" aria-label="Join existing room">Join Room</button>
+                    <button class="btn btn-secondary" id="createRoomBtn" aria-label="Create new room">Create New Room</button>
+                </div>
+                <div class="status-text" id="statusText">
+                    <div class="loading-message">
+                        <div class="loading-spinner"></div>
+                        <span aria-live="polite">Initializing encryption keys...</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="feature-list">
+                <div class="feature-item">
+                    <div class="feature-icon" role="img" aria-label="Security">🔐</div>
+                    <div class="feature-title">End-to-End Encryption</div>
+                    <div class="feature-desc">Messages are encrypted with AES-256 in your browser. The server never sees your messages.</div>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon" role="img" aria-label="Ephemeral">⚡</div>
+                    <div class="feature-title">Ephemeral Messages</div>
+                    <div class="feature-desc">Only 256 messages stored in memory. Older messages are automatically deleted.</div>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon" role="img" aria-label="Real-time">🌐</div>
+                    <div class="feature-title">Real-time Chat</div>
+                    <div class="feature-desc">Instant messaging with WebSocket technology for immediate message delivery.</div>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon" role="img" aria-label="Anonymous">🎭</div>
+                    <div class="feature-title">Anonymous Users</div>
+                    <div class="feature-desc">Each session gets a new random UUID. No registration or personal info required.</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Chat Screen -->
+        <div id="chatScreen" style="display: none;">
+            <div class="room-info" id="roomInfo" style="display: none;">
+                <div class="room-details">
+                    <span>Room: <strong id="currentRoomId"></strong></span>
+                    <span id="messageCounter">Messages: 0/256</span>
+                </div>
+                <div class="room-details">
+                    <span id="userCounter">Users: 0</span>
+                    <span id="encryptionStatus">🔐 Encrypted</span>
+                </div>
+            </div>
+
+            <div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
+                <!-- Messages will be inserted here -->
+            </div>
+        </div>
+
+        <div class="input-section" id="inputSection" style="display: none;">
+            <div class="input-container">
+                <label for="messageInput" class="visually-hidden">Type your message</label>
+                <textarea 
+                    class="message-input" 
+                    id="messageInput" 
+                    placeholder="Message SecureChat..." 
+                    rows="1"
+                    disabled
+                    maxlength="4000"
+                    aria-label="Type your message"
+                ></textarea>
+                <button class="send-button" id="sendButton" disabled aria-label="Send message">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                        <path d="m22 2-7 20-4-9-9-4 20-7z"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="security-indicator" id="securityIndicator" style="display: none;">
+        🔒 End-to-End Encrypted
+    </div>
+
+    <script>
+        // Security-hardened JavaScript with improved key exchange
+        'use strict';
+
+        // Content Security Policy enforcement
+        if (!window.crypto || !window.crypto.subtle) {
+            alert('This browser does not support required cryptographic features. Please use a modern browser.');
+            throw new Error('WebCrypto API not available');
+        }
+
+        // Global variables
+        let socket = null;
+        let currentRoom = null;
+        let currentUserId = null;
+        let currentDisplayName = null;
+        let keyPair = null;
+        let sessionKey = null;
+        let roomUsers = {};
+        let keysReady = false;
+        let lastMessageTime = 0;
+        let messageQueue = [];
+        let isConnected = false;
+        let reconnectAttempts = 0;
+        const MAX_RECONNECT_ATTEMPTS = 5;
+        const MESSAGE_RATE_LIMIT = 1000;
+        const MAX_MESSAGE_LENGTH = 4000;
+        const MAX_ROOM_ID_LENGTH = 32;
+        const MAX_MESSAGES = 256;
+
+        // Security utilities
+        const SecurityUtils = {
+            sanitizeInput: function(input) {
+                if (typeof input !== 'string') return '';
+                return input.trim().substring(0, MAX_MESSAGE_LENGTH);
+            },
+            isValidRoomId: function(roomId) {
+                if (!roomId || typeof roomId !== 'string') return false;
+                if (roomId.length > MAX_ROOM_ID_LENGTH) return false;
+                return /^[a-zA-Z0-9\-_]+$/.test(roomId);
+            },
+            canSendMessage: function() {
+                const now = Date.now();
+                if (now - lastMessageTime < MESSAGE_RATE_LIMIT) {
+                    return false;
+                }
+                lastMessageTime = now;
+                return true;
+            },
+            generateSecureId: function(length = 8) {
+                const array = new Uint8Array(length);
+                crypto.getRandomValues(array);
+                return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('').toUpperCase().substring(0, length);
+            },
+            isValidBase64: function(str) {
+                try {
+                    return btoa(atob(str)) === str;
+                } catch (err) {
+                    return false;
+                }
+            }
+        };
+
+        class SecureChatError extends Error {
+            constructor(message, code = 'UNKNOWN') {
+                super(message);
+                this.name = 'SecureChatError';
+                this.code = code;
+            }
+        }
+
+        // Initialize the app
+        async function initializeApp() {
+            try {
+                console.log("Initializing secure chat application");
+                socket = io({
+                    timeout: 10000
+                });
+
+                await generateKeyPair();
+                setupSocketListeners();
+                setupSecurityFeatures();
+                
+            } catch (error) {
+                console.error('Failed to initialize app:', error);
+                updateStatus('Failed to initialize application', true);
+            }
+        }
+
+        function setupSecurityFeatures() {
+            document.addEventListener('visibilitychange', function() {
+                if (document.hidden) {
+                    const messageInput = document.getElementById('messageInput');
+                    if (messageInput) {
+                        messageInput.value = '';
+                    }
+                }
+            });
+
+            window.addEventListener('beforeunload', function() {
+                clearSensitiveData();
+            });
+
+            const securityIndicator = document.getElementById('securityIndicator');
+            securityIndicator.style.display = 'block';
+
+            setInterval(async function() {
+                if (currentRoom && sessionKey) {
+                    console.log('Rotating session key...');
+                    await rotateSessionKey();
+                }
+            }, 30 * 60 * 1000);
+        }
+
+        function clearSensitiveData() {
+            sessionKey = null;
+            keyPair = null;
+            roomUsers = {};
+            
+            const passwordInput = document.getElementById('roomPasswordInput');
+            if (passwordInput) {
+                passwordInput.value = '';
+            }
+        }
+
+        async function generateKeyPair() {
+            try {
+                updateStatus('Generating encryption keys...', false);
+                
+                keyPair = await window.crypto.subtle.generateKey(
+                    {
+                        name: "RSA-OAEP",
+                        modulusLength: 4096,
+                        publicExponent: new Uint8Array([1, 0, 1]),
+                        hash: "SHA-256"
+                    },
+                    false,
+                    ["encrypt", "decrypt"]
+                );
+                
+                keysReady = true;
+                updateStatus("Ready to join a room", false);
+                console.log("Key pair generated successfully");
+                
+            } catch (error) {
+                console.error("Failed to generate key pair:", error);
+                updateStatus("Error: Failed to generate encryption keys", true);
+                throw new SecureChatError("Key generation failed", "KEY_GEN_ERROR");
+            }
+        }
+
+        async function generateSessionKey() {
+            try {
+                sessionKey = await window.crypto.subtle.generateKey(
+                    { name: "AES-GCM", length: 256 },
+                    true,
+                    ["encrypt", "decrypt"]
+                );
+                console.log("Session key generated");
+                return sessionKey;
+            } catch (error) {
+                console.error("Failed to generate session key:", error);
+                throw new SecureChatError("Session key generation failed", "SESSION_KEY_ERROR");
+            }
+        }
+
+        async function rotateSessionKey() {
+            if (!currentRoom || !roomUsers || Object.keys(roomUsers).length <= 1) {
+                return;
+            }
+
+            try {
+                await generateSessionKey();
+                
+                for (const [userId, publicKeyString] of Object.entries(roomUsers)) {
+                    if (userId !== currentUserId) {
+                        try {
+                            const publicKey = await importPublicKey(publicKeyString);
+                            const encryptedKey = await encryptSessionKey(sessionKey, publicKey);
+                            
+                            socket.emit('share_session_key', {
+                                room_id: currentRoom,
+                                target_user_id: userId,
+                                encrypted_key: encryptedKey
+                            });
+                        } catch (error) {
+                            console.error(`Failed to share rotated key with user ${userId}:`, error);
+                        }
+                    }
+                }
+                
+                addSystemMessage("🔄 Session key rotated for enhanced security");
+                
+            } catch (error) {
+                console.error("Failed to rotate session key:", error);
+            }
+        }
+
+        async function exportPublicKey(key) {
+            try {
+                const exported = await window.crypto.subtle.exportKey("spki", key);
+                const base64Key = btoa(String.fromCharCode(...new Uint8Array(exported)));
+                
+                if (!SecurityUtils.isValidBase64(base64Key)) {
+                    throw new Error('Invalid key export');
+                }
+                
+                return base64Key;
+            } catch (error) {
+                console.error("Failed to export public key:", error);
+                throw new SecureChatError("Public key export failed", "KEY_EXPORT_ERROR");
+            }
+        }
+
+        async function importPublicKey(keyString) {
+            try {
+                if (!SecurityUtils.isValidBase64(keyString)) {
+                    throw new Error('Invalid base64 key format');
+                }
+                
+                const keyData = Uint8Array.from(atob(keyString), c => c.charCodeAt(0));
+                
+                return await window.crypto.subtle.importKey(
+                    "spki",
+                    keyData,
+                    { name: "RSA-OAEP", hash: "SHA-256" },
+                    false,
+                    ["encrypt"]
+                );
+            } catch (error) {
+                console.error("Failed to import public key:", error);
+                throw new SecureChatError("Public key import failed", "KEY_IMPORT_ERROR");
+            }
+        }
+
+        async function encryptSessionKey(sessionKey, publicKey) {
+            try {
+                const keyData = await window.crypto.subtle.exportKey("raw", sessionKey);
+                const encrypted = await window.crypto.subtle.encrypt(
+                    { name: "RSA-OAEP" },
+                    publicKey,
+                    keyData
+                );
+                return btoa(String.fromCharCode(...new Uint8Array(encrypted)));
+            } catch (error) {
+                console.error("Failed to encrypt session key:", error);
+                throw new SecureChatError("Session key encryption failed", "SESSION_KEY_ENCRYPT_ERROR");
+            }
+        }
+
+        async function decryptSessionKey(encryptedKey) {
+            try {
+                if (!SecurityUtils.isValidBase64(encryptedKey)) {
+                    throw new Error('Invalid encrypted key format');
+                }
+                
+                const keyData = Uint8Array.from(atob(encryptedKey), c => c.charCodeAt(0));
+                const decrypted = await window.crypto.subtle.decrypt(
+                    { name: "RSA-OAEP" },
+                    keyPair.privateKey,
+                    keyData
+                );
+                
+                return await window.crypto.subtle.importKey(
+                    "raw",
+                    decrypted,
+                    { name: "AES-GCM" },
+                    false,
+                    ["encrypt", "decrypt"]
+                );
+            } catch (error) {
+                console.error("Failed to decrypt session key:", error);
+                throw new SecureChatError("Session key decryption failed", "SESSION_KEY_DECRYPT_ERROR");
+            }
+        }
+
+        async function encryptMessage(message) {
+            if (!sessionKey) {
+                throw new SecureChatError("No session key available", "NO_SESSION_KEY");
+            }
+
+            try {
+                const sanitizedMessage = SecurityUtils.sanitizeInput(message);
+                const encoder = new TextEncoder();
+                const data = encoder.encode(sanitizedMessage);
+                const iv = window.crypto.getRandomValues(new Uint8Array(12));
+                
+                const encrypted = await window.crypto.subtle.encrypt(
+                    { name: "AES-GCM", iv: iv },
+                    sessionKey,
+                    data
+                );
+
+                return {
+                    encrypted: btoa(String.fromCharCode(...new Uint8Array(encrypted))),
+                    iv: btoa(String.fromCharCode(...iv))
+                };
+            } catch (error) {
+                console.error("Failed to encrypt message:", error);
+                throw new SecureChatError("Message encryption failed", "MESSAGE_ENCRYPT_ERROR");
+            }
+        }
+
+        async function decryptMessage(encryptedData, ivString) {
+            if (!sessionKey) {
+                return "[Encrypted message - no session key]";
+            }
+
+            try {
+                if (!SecurityUtils.isValidBase64(encryptedData) || !SecurityUtils.isValidBase64(ivString)) {
+                    return "[Invalid encrypted message format]";
+                }
+
+                const encrypted = Uint8Array.from(atob(encryptedData), c => c.charCodeAt(0));
+                const iv = Uint8Array.from(atob(ivString), c => c.charCodeAt(0));
+                
+                const decrypted = await window.crypto.subtle.decrypt(
+                    { name: "AES-GCM", iv: iv },
+                    sessionKey,
+                    encrypted
+                );
+
+                const decoder = new TextDecoder();
+                const decryptedMessage = decoder.decode(decrypted);
+                
+                return SecurityUtils.sanitizeInput(decryptedMessage);
+            } catch (error) {
+                console.error("Failed to decrypt message:", error);
+                return "[Failed to decrypt message]";
+            }
+        }
+
+        // Enhanced socket listeners with fixed key exchange
+        function setupSocketListeners() {
+            socket.on('connect', () => {
+                isConnected = true;
+                reconnectAttempts = 0;
+                console.log("Socket connected securely");
+                updateConnectionStatus(true);
+                updateInputState();
+                
+                // If user is already in a room, re-emit join_room after reconnect
+                if (currentRoom && keyPair && keysReady) {
+                    exportPublicKey(keyPair.publicKey).then((publicKeyString) => {
+                        socket.emit('join_room', {
+                            room_id: currentRoom,
+                            public_key: publicKeyString,
+                            password: ''
+                        });
+                    });
+                }
+            });
+
+            socket.on('disconnect', (reason) => {
+                isConnected = false;
+                updateStatus("Connection lost. Attempting to reconnect...", true);
+                updateConnectionStatus(false);
+                updateInputState();
+                console.log('Socket disconnected:', reason);
+                
+                if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                    reconnectAttempts++;
+                    setTimeout(() => {
+                        if (!isConnected && reconnectAttempts <= MAX_RECONNECT_ATTEMPTS) {
+                            socket.connect();
+                        }
+                    }, 2000 * Math.pow(2, reconnectAttempts));
+                } else {
+                    updateStatus("Connection failed. Please refresh the page.", true);
+                    updateInputState();
+                }
+            });
+
+            socket.on('connect_error', (error) => {
+                console.error('Connection error:', error);
+                updateStatus("Connection error. Please check your internet connection.", true);
+            });
+
+            socket.on('user_connected', (data) => {
+                if (data && data.user_id) {
+                    currentUserId = data.user_id;
+                    console.log("Connected as user:", currentUserId);
+                }
+            });
+
+            socket.on('room_joined', async (data) => {
+                try {
+                    if (data.error) {
+                        updateStatus(data.error, true);
+                        updateInputState();
+                        return;
+                    }
+
+                    if (!data.room_id || !data.user_id || !SecurityUtils.isValidRoomId(data.room_id)) {
+                        throw new SecureChatError("Invalid room data received", "INVALID_ROOM_DATA");
+                    }
+
+                    currentRoom = data.room_id;
+                    currentUserId = data.user_id;
+                    currentDisplayName = data.display_name;
+                    roomUsers = data.user_keys || {};
+
+                    // Switch to chat screen
+                    document.getElementById('welcomeScreen').style.display = 'none';
+                    document.getElementById('chatScreen').style.display = 'flex';
+                    document.getElementById('roomInfo').style.display = 'flex';
+                    document.getElementById('inputSection').style.display = 'block';
+
+                    // Update room info
+                    document.getElementById('currentRoomId').textContent = currentRoom;
+                    document.getElementById('userCounter').textContent = `Users: ${data.users?.length || 0}`;
+                    document.getElementById('messageCounter').textContent = `Messages: ${data.message_count || 0}/256`;
+
+                    // Handle session key based on user status
+                    if (data.is_first_user) {
+                        console.log("First user - generating session key");
+                        await generateSessionKey();
+                        updateStatus("You're the first user! Session key generated. Others will receive it when they join.", false);
+                        updateInputState();
+                    } else if (sessionKey) {
+                        console.log("Rejoining with existing session key");
+                        updateStatus("Session key present. You can chat.", false);
+                        updateInputState();
+                    } else {
+                        console.log("Waiting for session key from existing users");
+                        updateStatus("Waiting for session key from other users...", false);
+                        updateInputState();
+                    }
+
+                    // Load existing messages
+                    if (data.messages && Array.isArray(data.messages)) {
+                        for (const msg of data.messages) {
+                            if (msg && typeof msg === 'object') {
+                                await displayMessage(msg);
+                            }
+                        }
+                    }
+
+                    console.log("[room_joined] sessionKey:", !!sessionKey, "isFirstUser:", data.is_first_user);
+
+                } catch (error) {
+                    console.error("Error processing room_joined:", error);
+                    updateStatus("Error joining room", true);
+                    updateInputState();
+                }
+            });
+
+            socket.on('user_joined', async (data) => {
+                try {
+                    if (!data || !data.user_id || !data.public_key) return;
+                    
+                    roomUsers[data.user_id] = data.public_key;
+                    updateUsersCount();
+                    addSystemMessage(`${data.display_name || 'User'} joined the room`);
+
+                    // If we have a session key, share it with the new user
+                    if (sessionKey) {
+                        console.log("Sharing session key with new user:", data.user_id);
+                        try {
+                            const publicKey = await importPublicKey(data.public_key);
+                            const encryptedKey = await encryptSessionKey(sessionKey, publicKey);
+                            
+                            socket.emit('share_session_key', {
+                                room_id: currentRoom,
+                                target_user_id: data.user_id,
+                                encrypted_key: encryptedKey
+                            });
+                            
+                            console.log("Session key shared with new user successfully");
+                        } catch (error) {
+                            console.error("Failed to share session key with new user:", error);
+                        }
+                    }
+                } catch (error) {
+                    console.error("Error processing user_joined:", error);
+                }
+            });
+
+            socket.on('request_session_key', async (data) => {
+                try {
+                    console.log("Session key requested for new user:", data.new_user_id);
+                    
+                    if (!sessionKey || !data.new_user_id || !data.public_key) {
+                        console.log("Cannot fulfill session key request - missing data");
+                        return;
+                    }
+
+                    try {
+                        const publicKey = await importPublicKey(data.public_key);
+                        const encryptedKey = await encryptSessionKey(sessionKey, publicKey);
+                        
+                        socket.emit('share_session_key', {
+                            room_id: currentRoom,
+                            target_user_id: data.new_user_id,
+                            encrypted_key: encryptedKey
+                        });
+                        
+                        console.log("Session key shared in response to request");
+                    } catch (error) {
+                        console.error("Failed to share session key on request:", error);
+                    }
+                } catch (error) {
+                    console.error("Error processing request_session_key:", error);
+                }
+            });
+
+            socket.on('session_key_received', async (data) => {
+                try {
+                    console.log("Session key received from:", data.from_user_id);
+                    
+                    if (!data || !data.encrypted_key) {
+                        console.log("Invalid session key data received");
+                        return;
+                    }
+                    
+                    if (!sessionKey) {
+                        try {
+                            sessionKey = await decryptSessionKey(data.encrypted_key);
+                            console.log("Session key decrypted successfully");
+                            updateStatus("Session key received! You can now chat securely.", false);
+                            updateInputState();
+                            addSystemMessage("🔑 Session key received - you can now chat!");
+                        } catch (error) {
+                            console.error("Failed to decrypt received session key:", error);
+                            updateStatus("Failed to decrypt session key", true);
+                        }
+                    } else {
+                        console.log("Session key already exists, ignoring duplicate");
+                    }
+                } catch (error) {
+                    console.error("Failed to process session key:", error);
+                    updateStatus("Error: Failed to decrypt session key", true);
+                }
+            });
+
+            socket.on('new_message', async (data) => {
+                try {
+                    if (!data || typeof data !== 'object') return;
+                    
+                    await displayMessage(data);
+                    
+                    if (data.message_count) {
+                        document.getElementById('messageCounter').textContent = `Messages: ${data.message_count}/256`;
+                    }
+                } catch (error) {
+                    console.error("Error processing new message:", error);
+                }
+            });
+
+            socket.on('user_left', (data) => {
+                try {
+                    if (data && data.user_id) {
+                        delete roomUsers[data.user_id];
+                        updateUsersCount();
+                        addSystemMessage(`User left the room`);
+                    }
+                } catch (error) {
+                    console.error("Error processing user_left:", error);
+                }
+            });
+
+            socket.on('error', (error) => {
+                console.error('Socket error:', error);
+                updateStatus("Connection error occurred", true);
+            });
+
+            socket.on('ping', () => {
+                socket.emit('pong');
+            });
+        }
+
+        async function createRoom() {
+            try {
+                const roomId = SecurityUtils.generateSecureId(6);
+                const password = document.getElementById('roomPasswordInput').value;
+                await joinSpecificRoom(roomId, password);
+            } catch (error) {
+                console.error("Failed to create room:", error);
+                updateStatus("Error creating room", true);
+            }
+        }
+
+        async function joinRoom() {
+            try {
+                const roomInput = document.getElementById('roomInput');
+                const roomId = SecurityUtils.sanitizeInput(roomInput.value);
+                const password = document.getElementById('roomPasswordInput').value;
+                
+                if (!roomId) {
+                    await createRoom();
+                    return;
+                }
+                
+                if (!SecurityUtils.isValidRoomId(roomId)) {
+                    updateStatus("Invalid room ID format. Use only letters, numbers, hyphens and underscores.", true);
+                    return;
+                }
+                
+                await joinSpecificRoom(roomId, password);
+            } catch (error) {
+                console.error("Failed to join room:", error);
+                updateStatus("Error joining room", true);
+            }
+        }
+
+        async function joinSpecificRoom(roomId, password = "") {
+            if (!keysReady) {
+                updateStatus("Error: Encryption keys not ready", true);
+                return;
+            }
+
+            if (!SecurityUtils.isValidRoomId(roomId)) {
+                updateStatus("Invalid room ID format", true);
+                return;
+            }
+
+            try {
+                updateStatus("Joining room...", false);
+                
+                const publicKeyString = await exportPublicKey(keyPair.publicKey);
+                
+                socket.emit('join_room', {
+                    room_id: roomId,
+                    public_key: publicKeyString,
+                    password: password
+                });
+            } catch (error) {
+                console.error("Failed to join room:", error);
+                updateStatus("Error: Failed to join room", true);
+            }
+        }
+
+        async function sendMessage() {
+            try {
+                const input = document.getElementById('messageInput');
+                let message = SecurityUtils.sanitizeInput(input.value);
+                
+                if (!message || !sessionKey) return;
+
+                if (!SecurityUtils.canSendMessage()) {
+                    updateStatus("Please wait before sending another message", true);
+                    return;
+                }
+
+                if (message.length > MAX_MESSAGE_LENGTH) {
+                    updateStatus("Message too long", true);
+                    return;
+                }
+
+                const encryptedData = await encryptMessage(message);
+                
+                socket.emit('send_message', {
+                    encrypted_content: encryptedData.encrypted,
+                    iv: encryptedData.iv
+                });
+
+                input.value = '';
+                autoResize(input);
+                
+            } catch (error) {
+                console.error("Failed to send message:", error);
+                updateStatus("Error: Failed to send message", true);
+            }
+        }
+
+        async function displayMessage(messageData) {
+            try {
+                if (!messageData || typeof messageData !== 'object') return;
+                
+                const container = document.getElementById('messagesContainer');
+                const isOwnMessage = messageData.sender_id === currentUserId;
+
+                let displayText;
+                if (messageData.iv && sessionKey && messageData.encrypted_content) {
+                    displayText = await decryptMessage(messageData.encrypted_content, messageData.iv);
+                } else {
+                    displayText = "[Encrypted message]";
+                }
+
+                const escapeHtml = (text) => {
+                    const div = document.createElement('div');
+                    div.textContent = text;
+                    return div.innerHTML;
+                };
+
+                const timestamp = messageData.timestamp ? 
+                    new Date(messageData.timestamp * 1000).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    }) : 
+                    new Date().toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+
+                const displayName = messageData.display_name || `User-${messageData.sender_id?.substring(0, 8) || 'Unknown'}`;
+                const avatarText = displayName.substring(0, 2).toUpperCase();
+
+                const messageGroup = document.createElement('div');
+                messageGroup.className = 'message-group';
+                messageGroup.classList.add(isOwnMessage ? 'sent' : 'received');
+
+                messageGroup.innerHTML = `
+                    <div class="message-header">
+                        <div class="user-avatar ${isOwnMessage ? 'own' : ''}">${escapeHtml(avatarText)}</div>
+                        <span class="user-name">${escapeHtml(displayName)}</span>
+                        <span class="message-time">${escapeHtml(timestamp)}</span>
+                    </div>
+                    <div class="message-content ${isOwnMessage ? 'own' : ''}" data-message-id="${messageData.id || ''}"></div>
+                `;
+
+                const messageContentEl = messageGroup.querySelector('.message-content');
+                messageContentEl.textContent = displayText;
+
+                container.appendChild(messageGroup);
+                container.scrollTop = container.scrollHeight;
+
+                const messages = container.children;
+                if (messages.length > MAX_MESSAGES + 50) {
+                    for (let i = 0; i < 50; i++) {
+                        if (messages[0]) {
+                            container.removeChild(messages[0]);
+                        }
+                    }
+                }
+                
+            } catch (error) {
+                console.error("Error displaying message:", error);
+            }
+        }
+
+        function addSystemMessage(text) {
+            try {
+                const container = document.getElementById('messagesContainer');
+                const systemMessage = document.createElement('div');
+                systemMessage.className = 'message-group';
+                
+                const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+                
+                systemMessage.innerHTML = `
+                    <div class="message-header">
+                        <div class="user-avatar">ℹ️</div>
+                        <span class="user-name">System</span>
+                        <span class="message-time">${timestamp}</span>
+                    </div>
+                    <div class="message-content" style="background: #1a1a1a; border-color: #2d2d2d; color: #888;"></div>
+                `;
+
+                const messageContentEl = systemMessage.querySelector('.message-content');
+                messageContentEl.textContent = text;
+
+                container.appendChild(systemMessage);
+                container.scrollTop = container.scrollHeight;
+                
+            } catch (error) {
+                console.error("Error adding system message:", error);
+            }
+        }
+
+        function updateStatus(message, isError = false) {
+            try {
+                const statusEl = document.getElementById('statusText');
+                const statusDiv = document.createElement('div');
+                
+                if (isError) {
+                    statusDiv.className = 'error-message';
+                } else {
+                    statusDiv.className = 'success-message';
+                }
+                
+                statusDiv.textContent = message;
+                statusEl.innerHTML = '';
+                statusEl.appendChild(statusDiv);
+                
+            } catch (error) {
+                console.error("Error updating status:", error);
+            }
+        }
+
+        function updateUsersCount() {
+            try {
+                const count = Object.keys(roomUsers).length;
+                const counterEl = document.getElementById('userCounter');
+                if (counterEl) {
+                    counterEl.textContent = `Users: ${count}`;
+                }
+            } catch (error) {
+                console.error("Error updating users count:", error);
+            }
+        }
+
+        function updateInputState() {
+            try {
+                const input = document.getElementById('messageInput');
+                const btn = document.getElementById('sendButton');
+                
+                if (!input || !btn) return;
+                
+                if (sessionKey && isConnected) {
+                    input.disabled = false;
+                    btn.disabled = false;
+                    input.placeholder = "Message SecureChat...";
+                } else {
+                    input.disabled = true;
+                    btn.disabled = true;
+                    input.placeholder = isConnected ? "Waiting for encryption key..." : "Disconnected...";
+                }
+            } catch (error) {
+                console.error("Error updating input state:", error);
+            }
+        }
+
+        function autoResize(textarea) {
+            try {
+                if (!textarea) return;
+                
+                textarea.style.height = 'auto';
+                const newHeight = Math.min(Math.max(textarea.scrollHeight, 44), 200);
+                textarea.style.height = newHeight + 'px';
+            } catch (error) {
+                console.error("Error in autoResize:", error);
+            }
+        }
+
+        function updateConnectionStatus(connected) {
+            const encryptionBadge = document.getElementById('encryptionBadge');
+            const securityIndicator = document.getElementById('securityIndicator');
+            
+            if (connected) {
+                if (encryptionBadge) encryptionBadge.textContent = 'E2E Encrypted';
+                if (securityIndicator) securityIndicator.textContent = '🔒 End-to-End Encrypted';
+            } else {
+                if (encryptionBadge) encryptionBadge.textContent = 'Disconnected';
+                if (securityIndicator) securityIndicator.textContent = '⚠️ Disconnected';
+            }
+        }
+
+        // Event listeners setup
+        document.addEventListener('DOMContentLoaded', () => {
+            try {
+                const messageInput = document.getElementById('messageInput');
+                const roomInput = document.getElementById('roomInput');
+                const roomPasswordInput = document.getElementById('roomPasswordInput');
+
+                if (messageInput) {
+                    messageInput.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault();
+                            sendMessage();
+                        }
+                    });
+
+                    messageInput.addEventListener('input', (e) => {
+                        autoResize(e.target);
+                        
+                        if (e.target.value.length > MAX_MESSAGE_LENGTH) {
+                            e.target.value = e.target.value.substring(0, MAX_MESSAGE_LENGTH);
+                            updateStatus(`Message truncated to ${MAX_MESSAGE_LENGTH} characters`, true);
+                        }
+                    });
+
+                    messageInput.addEventListener('paste', (e) => {
+                        setTimeout(() => {
+                            if (messageInput.value.length > MAX_MESSAGE_LENGTH) {
+                                messageInput.value = messageInput.value.substring(0, MAX_MESSAGE_LENGTH);
+                                updateStatus(`Pasted content truncated to ${MAX_MESSAGE_LENGTH} characters`, true);
+                            }
+                            autoResize(messageInput);
+                        }, 0);
+                    });
+                }
+
+                if (roomInput) {
+                    roomInput.addEventListener('keypress', (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            joinRoom();
+                        }
+                    });
+
+                    roomInput.addEventListener('input', (e) => {
+                        const value = e.target.value;
+                        if (value && !SecurityUtils.isValidRoomId(value)) {
+                            e.target.setCustomValidity('Only letters, numbers, hyphens and underscores allowed');
+                        } else {
+                            e.target.setCustomValidity('');
+                        }
+                    });
+                }
+
+                if (roomPasswordInput) {
+                    roomPasswordInput.addEventListener('keypress', (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            joinRoom();
+                        }
+                    });
+                }
+
+                const joinRoomBtn = document.getElementById('joinRoomBtn');
+                if (joinRoomBtn) joinRoomBtn.addEventListener('click', joinRoom);
+                
+                const createRoomBtn = document.getElementById('createRoomBtn');
+                if (createRoomBtn) createRoomBtn.addEventListener('click', createRoom);
+                
+                const sendButton = document.getElementById('sendButton');
+                if (sendButton) sendButton.addEventListener('click', sendMessage);
+
+                document.addEventListener('keydown', (e) => {
+                    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && messageInput && !messageInput.disabled) {
+                        e.preventDefault();
+                        sendMessage();
+                    }
+                    
+                    if (e.key === 'Escape' && messageInput) {
+                        messageInput.value = '';
+                        autoResize(messageInput);
+                    }
+                });
+
+                initializeApp();
+                
+            } catch (error) {
+                console.error("Error setting up event listeners:", error);
+                updateStatus("Error initializing interface", true);
+            }
+        });
+
+        // Periodic connection health check
+        setInterval(() => {
+            if (socket && isConnected) {
+                socket.volatile.emit('ping');
+            }
+        }, 30000);
+
+        // Memory cleanup
+        setInterval(() => {
+            if (typeof gc === 'function') {
+                gc();
+            }
+        }, 300000);
+
+        let windowHasFocus = true;
+        
+        window.addEventListener('focus', () => {
+            windowHasFocus = true;
+            if (!isConnected && socket) {
+                socket.connect();
+            }
+        });
+        
+        window.addEventListener('blur', () => {
+            windowHasFocus = false;
+        });
+
+        // Prevent clickjacking
+        if (top !== self) {
+            top.location = self.location;
+        }
+
+        // CSP violation reporting
+        document.addEventListener('securitypolicyviolation', (e) => {
+            console.error('CSP Violation:', {
+                violatedDirective: e.violatedDirective,
+                blockedURI: e.blockedURI,
+                lineNumber: e.lineNumber,
+                columnNumber: e.columnNumber
+            });
+        });
+
+        // Expose necessary functions
+        window.SecureChat = {
+            joinRoom,
+            createRoom,
+            sendMessage
+        };
+
+        // Prevent console access in production
+        if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
+            console.log = console.warn = console.error = () => {};
+        }
+
+    </script>
+</body>
+</html>
\ No newline at end of file