diff --git a/config.json b/config.json
new file mode 100644
index 0000000..c43bd73
--- /dev/null
+++ b/config.json
@@ -0,0 +1,4 @@
+{
+	"admin_api_key": "admin_key_change_me",
+	"report_api_key": "report_key_change_me"
+}
diff --git a/main.py b/main.py
index 6718e18..34ca6d1 100644
--- a/main.py
+++ b/main.py
@@ -1,6 +1,276 @@
-def main():
-    print("Hello from acmchat-dashboard!")
+from fastapi import FastAPI, Request, HTTPException, Depends, Form
+from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials, HTTPBasic, HTTPBasicCredentials
+import os
+from loguru import logger
+import sys
+import uvicorn
+import json
+import aiosqlite
+import time
+from datetime import datetime, timedelta
+from typing import Optional, List, Dict, Any
+from contextlib import asynccontextmanager
+from pydantic import BaseModel
+import secrets
 
+listen_port = os.getenv("LISTEN_PORT", "8000")
+listen_host = os.getenv("LISTEN_HOST", "0.0.0.0")
+config_path = os.getenv("CONFIG_PATH", "./config.json")
+database_path = os.getenv("DATABASE_PATH", "./data.sqlite3")
+logging_level = os.getenv("LOGGING_LEVEL", "TRACE")
+
+# Configure loguru properly - remove default handler and add new one with correct level
+logger.remove()  # Remove the default handler
+logger.add(sys.stderr, level=logging_level)  # Add new handler with specified level
+
+security_bearer = HTTPBearer()
+security_basic = HTTPBasic()
+
+class APICallRecord(BaseModel):
+    timestamp: int
+    model_id: str
+    user_email: str
+    input_tokens: int
+    output_tokens: int
+    cost_usd: float
+
+def normalize_path(path: str) -> str:
+    """
+    处理路径，支持绝对路径、用户目录和相对路径
+
+    Args:
+        path: 输入路径
+
+    Returns:
+        处理后的路径
+    """
+    if path.startswith("/") or path.startswith("~"):
+        # 绝对路径，如果是~开头则展开为用户目录
+        return os.path.expanduser(path)
+    elif path.startswith("./"):
+        # 相对于脚本本身的相对路径
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        return os.path.join(script_dir, path[2:])  # 去掉'./'前缀
+    else:
+        # 其他情况保持原样（相对于pwd的相对路径）
+        return path
+
+# 处理config_path和database_path路径
+config_path = normalize_path(config_path)
+database_path = normalize_path(database_path)
+
+with open(config_path, "r") as f:
+    config = json.load(f)
+
+admin_api_key = config.get("admin_api_key", "")
+report_api_key = config.get("report_api_key", "")
+
+async def init_database():
+    """Initialize the database and create tables if they don't exist"""
+    async with aiosqlite.connect(database_path) as db:
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS api_calls (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                timestamp INTEGER NOT NULL,
+                model_id TEXT NOT NULL,
+                user_email TEXT NOT NULL,
+                input_tokens INTEGER NOT NULL,
+                output_tokens INTEGER NOT NULL,
+                cost_usd REAL NOT NULL,
+                created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        await db.commit()
+        logger.info("Database initialized successfully")
+
+async def verify_admin_basic_auth(credentials: HTTPBasicCredentials = Depends(security_basic)):
+    """Verify admin credentials for dashboard access using Basic HTTP authentication"""
+    # Check username and password
+    is_correct_username = secrets.compare_digest(credentials.username, "admin")
+    is_correct_password = secrets.compare_digest(credentials.password, admin_api_key)
+    
+    if not (is_correct_username and is_correct_password):
+        raise HTTPException(
+            status_code=401,
+            detail="Invalid credentials",
+            headers={"WWW-Authenticate": "Basic"},
+        )
+    return credentials.username
+
+async def verify_report_key(credentials: HTTPAuthorizationCredentials = Depends(security_bearer)):
+    """Verify report API key for API access using Bearer authentication"""
+    if credentials.credentials != report_api_key:
+        raise HTTPException(status_code=403, detail="Invalid report API key")
+    return credentials.credentials
+
+async def get_24h_stats():
+    """Get statistics for the past 24 hours"""
+    twenty_four_hours_ago = int(time.time()) - (24 * 60 * 60)
+    
+    async with aiosqlite.connect(database_path) as db:
+        # Total chats (assuming each API call is a chat)
+        cursor = await db.execute(
+            "SELECT COUNT(*) FROM api_calls WHERE timestamp >= ?",
+            (twenty_four_hours_ago,)
+        )
+        total_chats = (await cursor.fetchone())[0]
+        
+        # Total tokens
+        cursor = await db.execute(
+            "SELECT SUM(input_tokens + output_tokens) FROM api_calls WHERE timestamp >= ?",
+            (twenty_four_hours_ago,)
+        )
+        result = await cursor.fetchone()
+        total_tokens = result[0] if result[0] is not None else 0
+        
+        # Total cost
+        cursor = await db.execute(
+            "SELECT SUM(cost_usd) FROM api_calls WHERE timestamp >= ?",
+            (twenty_four_hours_ago,)
+        )
+        result = await cursor.fetchone()
+        total_cost = result[0] if result[0] is not None else 0.0
+        
+        return {
+            "total_chats": total_chats,
+            "total_tokens": total_tokens,
+            "total_cost": round(total_cost, 4)
+        }
+
+async def get_recent_logs(limit: int = 100):
+    """Get recent API call logs"""
+    async with aiosqlite.connect(database_path) as db:
+        cursor = await db.execute("""
+            SELECT timestamp, model_id, user_email, input_tokens, output_tokens, cost_usd
+            FROM api_calls
+            ORDER BY timestamp DESC
+            LIMIT ?
+        """, (limit,))
+        
+        logs = []
+        async for row in cursor:
+            logs.append({
+                "timestamp": row[0],
+                "datetime": datetime.fromtimestamp(row[0]).strftime("%Y-%m-%d %H:%M:%S"),
+                "model_id": row[1],
+                "user_email": row[2],
+                "input_tokens": row[3],
+                "output_tokens": row[4],
+                "total_tokens": row[3] + row[4],
+                "cost_usd": round(row[5], 4)
+            })
+        
+        return logs
+
+async def get_users_report():
+    """Get user consumption statistics"""
+    async with aiosqlite.connect(database_path) as db:
+        cursor = await db.execute("""
+            SELECT 
+                user_email,
+                COUNT(*) as total_calls,
+                SUM(input_tokens) as total_input_tokens,
+                SUM(output_tokens) as total_output_tokens,
+                SUM(input_tokens + output_tokens) as total_tokens,
+                SUM(cost_usd) as total_cost
+            FROM api_calls
+            GROUP BY user_email
+            ORDER BY total_cost DESC
+        """)
+        
+        users = []
+        async for row in cursor:
+            users.append({
+                "email": row[0],
+                "total_calls": row[1],
+                "total_input_tokens": row[2],
+                "total_output_tokens": row[3],
+                "total_tokens": row[4],
+                "total_cost": round(row[5], 4)
+            })
+        
+        return users
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Lifespan context manager for startup and shutdown events"""
+    # Startup
+    await init_database()
+    logger.info("Application started")
+    
+    yield
+    
+    # Shutdown
+    logger.info("Application shutting down")
+
+app = FastAPI(lifespan=lifespan)
+
+# Set up templates
+templates = Jinja2Templates(directory="templates")
+
+# Routes
+@app.get("/")
+async def root():
+    """Redirect to dashboard"""
+    return RedirectResponse(url="/dashboard", status_code=302)
+
+@app.get("/dashboard", response_class=HTMLResponse)
+async def dashboard(request: Request, _: str = Depends(verify_admin_basic_auth)):
+    """Main dashboard page"""
+    stats = await get_24h_stats()
+    return templates.TemplateResponse("dashboard.html", {
+        "request": request,
+        "stats": stats
+    })
+
+@app.get("/dashboard/logs", response_class=HTMLResponse)
+async def dashboard_logs(request: Request, _: str = Depends(verify_admin_basic_auth)):
+    """Dashboard logs page"""
+    logs = await get_recent_logs(200)  # Get more logs for the logs page
+    return templates.TemplateResponse("logs.html", {
+        "request": request,
+        "logs": logs
+    })
+
+@app.get("/dashboard/users_report", response_class=HTMLResponse)
+async def dashboard_users_report(request: Request, _: str = Depends(verify_admin_basic_auth)):
+    """Dashboard users report page"""
+    users = await get_users_report()
+    return templates.TemplateResponse("users_report.html", {
+        "request": request,
+        "users": users
+    })
+
+@app.post("/api/record_api_call")
+async def record_api_call(
+    record: APICallRecord,
+    _: str = Depends(verify_report_key)
+):
+    """Record an API call"""
+    try:
+        async with aiosqlite.connect(database_path) as db:
+            await db.execute("""
+                INSERT INTO api_calls (timestamp, model_id, user_email, input_tokens, output_tokens, cost_usd)
+                VALUES (?, ?, ?, ?, ?, ?)
+            """, (
+                record.timestamp,
+                record.model_id,
+                record.user_email,
+                record.input_tokens,
+                record.output_tokens,
+                record.cost_usd
+            ))
+            await db.commit()
+        
+        logger.info(f"Recorded API call: {record.user_email} - {record.model_id} - ${record.cost_usd}")
+        return {"status": "success", "message": "API call recorded successfully"}
+    
+    except Exception as e:
+        logger.error(f"Error recording API call: {e}")
+        raise HTTPException(status_code=500, detail="Failed to record API call")
 
 if __name__ == "__main__":
-    main()
+    uvicorn.run(app, host=listen_host, port=int(listen_port))
diff --git a/pyproject.toml b/pyproject.toml
index 6f64c1e..4e4d076 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -5,8 +5,11 @@ description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.10.12"
 dependencies = [
+    "aiosqlite>=0.21.0",
     "fastapi>=0.115.13",
     "jinja2>=3.1.6",
     "loguru>=0.7.3",
+    "python-multipart>=0.0.20",
     "ruff>=0.12.0",
+    "uvicorn>=0.34.3",
 ]
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..e110a7c
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}OpenWebUI Monitoring Dashboard{% endblock %}</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
+    <style>
+        .navbar-brand {
+            font-weight: bold;
+        }
+        .stats-card {
+            transition: transform 0.2s;
+        }
+        .stats-card:hover {
+            transform: translateY(-2px);
+        }
+        .table-responsive {
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        .sidebar {
+            min-height: calc(100vh - 56px);
+            background-color: #f8f9fa;
+        }
+        .main-content {
+            padding: 2rem;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/dashboard">
+                <i class="bi bi-speedometer2"></i> OpenWebUI Monitor
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <span class="navbar-text">
+                            <i class="bi bi-clock"></i> Last Updated: <span id="last-updated">{{ "now" }}</span>
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Sidebar -->
+            <nav class="col-md-3 col-lg-2 d-md-block sidebar">
+                <div class="position-sticky pt-3">
+                    <ul class="nav flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link {% if request.url.path == '/dashboard' %}active{% endif %}" href="/dashboard">
+                                <i class="bi bi-house"></i> Dashboard
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link {% if '/logs' in request.url.path %}active{% endif %}" href="/dashboard/logs">
+                                <i class="bi bi-journal-text"></i> Logs
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link {% if '/users_report' in request.url.path %}active{% endif %}" href="/dashboard/users_report">
+                                <i class="bi bi-people"></i> Users Report
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+
+            <!-- Main Content -->
+            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
+                {% block content %}{% endblock %}
+            </main>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Auto refresh functionality -->
+    <script>
+        function updateTimestamp() {
+            document.getElementById('last-updated').textContent = new Date().toLocaleString();
+        }
+        
+        // Update timestamp every 30 seconds
+        setInterval(updateTimestamp, 30000);
+        updateTimestamp();
+        
+        // Auto refresh page every 5 minutes for dashboard
+        if (window.location.pathname === '/dashboard') {
+            setInterval(() => {
+                window.location.reload();
+            }, 300000);
+        }
+    </script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html> 
\ No newline at end of file
diff --git a/templates/dashboard.html b/templates/dashboard.html
new file mode 100644
index 0000000..6249c0d
--- /dev/null
+++ b/templates/dashboard.html
@@ -0,0 +1,157 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - OpenWebUI Monitor{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Dashboard</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- 24 Hour Statistics -->
+<div class="row mb-4">
+    <div class="col-md-4 mb-3">
+        <div class="card stats-card h-100 border-primary">
+            <div class="card-body text-center">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h5 class="card-title text-primary">
+                            <i class="bi bi-chat-dots"></i> Total Chats
+                        </h5>
+                        <h2 class="card-text">{{ stats.total_chats }}</h2>
+                        <small class="text-muted">Last 24 hours</small>
+                    </div>
+                    <div class="text-primary">
+                        <i class="bi bi-chat-dots display-4"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4 mb-3">
+        <div class="card stats-card h-100 border-success">
+            <div class="card-body text-center">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h5 class="card-title text-success">
+                            <i class="bi bi-cpu"></i> Total Tokens
+                        </h5>
+                        <h2 class="card-text">{{ "{:,}".format(stats.total_tokens) }}</h2>
+                        <small class="text-muted">Last 24 hours</small>
+                    </div>
+                    <div class="text-success">
+                        <i class="bi bi-cpu display-4"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4 mb-3">
+        <div class="card stats-card h-100 border-warning">
+            <div class="card-body text-center">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h5 class="card-title text-warning">
+                            <i class="bi bi-currency-dollar"></i> Total Cost
+                        </h5>
+                        <h2 class="card-text">${{ stats.total_cost }}</h2>
+                        <small class="text-muted">Last 24 hours</small>
+                    </div>
+                    <div class="text-warning">
+                        <i class="bi bi-currency-dollar display-4"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Quick Actions -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">
+                    <i class="bi bi-lightning"></i> Quick Actions
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6 mb-3">
+                        <div class="d-grid">
+                            <a href="/dashboard/logs" class="btn btn-outline-primary btn-lg">
+                                <i class="bi bi-journal-text"></i> View Recent Logs
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <div class="d-grid">
+                            <a href="/dashboard/users_report" class="btn btn-outline-success btn-lg">
+                                <i class="bi bi-people"></i> View Users Report
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- System Information -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">
+                    <i class="bi bi-info-circle"></i> System Information
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <dl class="row">
+                            <dt class="col-sm-4">Status:</dt>
+                            <dd class="col-sm-8">
+                                <span class="badge bg-success">
+                                    <i class="bi bi-check-circle"></i> Online
+                                </span>
+                            </dd>
+                            <dt class="col-sm-4">Database:</dt>
+                            <dd class="col-sm-8">
+                                <span class="badge bg-info">SQLite</span>
+                            </dd>
+                        </dl>
+                    </div>
+                    <div class="col-md-6">
+                        <dl class="row">
+                            <dt class="col-sm-4">API Version:</dt>
+                            <dd class="col-sm-8">v1.0</dd>
+                            <dt class="col-sm-4">Last Sync:</dt>
+                            <dd class="col-sm-8" id="current-time"></dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function updateCurrentTime() {
+        document.getElementById('current-time').textContent = new Date().toLocaleString();
+    }
+    
+    updateCurrentTime();
+    setInterval(updateCurrentTime, 1000);
+</script>
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/logs.html b/templates/logs.html
new file mode 100644
index 0000000..ba12ca0
--- /dev/null
+++ b/templates/logs.html
@@ -0,0 +1,163 @@
+{% extends "base.html" %}
+
+{% block title %}Logs - OpenWebUI Monitor{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">API Call Logs</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+{% if logs %}
+<!-- Summary Info -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="alert alert-info">
+            <i class="bi bi-info-circle"></i>
+            Showing <strong>{{ logs|length }}</strong> most recent API calls. 
+            Logs are ordered by timestamp (newest first).
+        </div>
+    </div>
+</div>
+
+<!-- Logs Table -->
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title mb-0">
+            <i class="bi bi-journal-text"></i> Recent API Calls
+        </h5>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-striped table-hover mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th scope="col">
+                            <i class="bi bi-calendar"></i> Timestamp
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-envelope"></i> User Email
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-cpu"></i> Model
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-arrow-down"></i> Input Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-arrow-up"></i> Output Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-plus-circle"></i> Total Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-currency-dollar"></i> Cost (USD)
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for log in logs %}
+                    <tr>
+                        <td>
+                            <small class="text-muted">{{ log.datetime }}</small>
+                        </td>
+                        <td>
+                            <span class="badge bg-secondary">{{ log.user_email }}</span>
+                        </td>
+                        <td>
+                            <code>{{ log.model_id }}</code>
+                        </td>
+                        <td>
+                            <span class="badge bg-info">{{ "{:,}".format(log.input_tokens) }}</span>
+                        </td>
+                        <td>
+                            <span class="badge bg-success">{{ "{:,}".format(log.output_tokens) }}</span>
+                        </td>
+                        <td>
+                            <strong>{{ "{:,}".format(log.total_tokens) }}</strong>
+                        </td>
+                        <td>
+                            <span class="badge bg-warning text-dark">${{ log.cost_usd }}</span>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Statistics Summary -->
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">
+                    <i class="bi bi-bar-chart"></i> Current Page Statistics
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <h4 class="text-primary">{{ logs|length }}</h4>
+                            <small class="text-muted">Total Calls</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <h4 class="text-success">{{ "{:,}".format(logs|sum(attribute='input_tokens')) }}</h4>
+                            <small class="text-muted">Input Tokens</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <h4 class="text-info">{{ "{:,}".format(logs|sum(attribute='output_tokens')) }}</h4>
+                            <small class="text-muted">Output Tokens</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <h4 class="text-warning">${{ "%.4f"|format(logs|sum(attribute='cost_usd')) }}</h4>
+                            <small class="text-muted">Total Cost</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% else %}
+<!-- No Data -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body text-center py-5">
+                <i class="bi bi-journal-x display-1 text-muted"></i>
+                <h3 class="mt-3">No Logs Available</h3>
+                <p class="text-muted">No API calls have been recorded yet.</p>
+                <a href="/dashboard" class="btn btn-primary">
+                    <i class="bi bi-arrow-left"></i> Back to Dashboard
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // Auto-refresh every 30 seconds
+    setInterval(() => {
+        window.location.reload();
+    }, 30000);
+</script>
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/users_report.html b/templates/users_report.html
new file mode 100644
index 0000000..ad0bb7a
--- /dev/null
+++ b/templates/users_report.html
@@ -0,0 +1,219 @@
+{% extends "base.html" %}
+
+{% block title %}Users Report - OpenWebUI Monitor{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Users Report</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+{% if users %}
+<!-- Summary Info -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="alert alert-info">
+            <i class="bi bi-info-circle"></i>
+            Total of <strong>{{ users|length }}</strong> users found. 
+            Users are sorted by total cost (highest first).
+        </div>
+    </div>
+</div>
+
+<!-- Summary Statistics -->
+<div class="row mb-4">
+    <div class="col-md-3 mb-3">
+        <div class="card text-center border-primary">
+            <div class="card-body">
+                <h5 class="card-title text-primary">
+                    <i class="bi bi-people"></i> Total Users
+                </h5>
+                <h3 class="card-text">{{ users|length }}</h3>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3 mb-3">
+        <div class="card text-center border-success">
+            <div class="card-body">
+                <h5 class="card-title text-success">
+                    <i class="bi bi-chat-dots"></i> Total Calls
+                </h5>
+                <h3 class="card-text">{{ "{:,}".format(users|sum(attribute='total_calls')) }}</h3>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3 mb-3">
+        <div class="card text-center border-info">
+            <div class="card-body">
+                <h5 class="card-title text-info">
+                    <i class="bi bi-cpu"></i> Total Tokens
+                </h5>
+                <h3 class="card-text">{{ "{:,}".format(users|sum(attribute='total_tokens')) }}</h3>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3 mb-3">
+        <div class="card text-center border-warning">
+            <div class="card-body">
+                <h5 class="card-title text-warning">
+                    <i class="bi bi-currency-dollar"></i> Total Cost
+                </h5>
+                <h3 class="card-text">${{ "%.4f"|format(users|sum(attribute='total_cost')) }}</h3>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Users Table -->
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title mb-0">
+            <i class="bi bi-table"></i> User Consumption Details
+        </h5>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-striped table-hover mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th scope="col">
+                            <i class="bi bi-hash"></i> Rank
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-envelope"></i> User Email
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-chat-dots"></i> Total Calls
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-arrow-down"></i> Input Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-arrow-up"></i> Output Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-plus-circle"></i> Total Tokens
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-currency-dollar"></i> Total Cost (USD)
+                        </th>
+                        <th scope="col">
+                            <i class="bi bi-bar-chart"></i> Avg Cost/Call
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for user in users %}
+                    <tr>
+                        <td>
+                            {% if loop.index == 1 %}
+                                <span class="badge bg-warning text-dark">
+                                    <i class="bi bi-trophy"></i> {{ loop.index }}
+                                </span>
+                            {% elif loop.index <= 3 %}
+                                <span class="badge bg-secondary">
+                                    <i class="bi bi-award"></i> {{ loop.index }}
+                                </span>
+                            {% else %}
+                                <span class="badge bg-light text-dark">{{ loop.index }}</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center">
+                                <i class="bi bi-person-circle me-2"></i>
+                                <strong>{{ user.email }}</strong>
+                            </div>
+                        </td>
+                        <td>
+                            <span class="badge bg-info">{{ "{:,}".format(user.total_calls) }}</span>
+                        </td>
+                        <td>
+                            <span class="badge bg-primary">{{ "{:,}".format(user.total_input_tokens) }}</span>
+                        </td>
+                        <td>
+                            <span class="badge bg-success">{{ "{:,}".format(user.total_output_tokens) }}</span>
+                        </td>
+                        <td>
+                            <strong>{{ "{:,}".format(user.total_tokens) }}</strong>
+                        </td>
+                        <td>
+                            <span class="badge bg-warning text-dark">${{ user.total_cost }}</span>
+                        </td>
+                        <td>
+                            <small class="text-muted">${{ "%.4f"|format(user.total_cost / user.total_calls) }}</small>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Top Users Chart (Simple Visual) -->
+{% if users|length > 0 %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title mb-0">
+                    <i class="bi bi-bar-chart"></i> Top Users by Cost
+                </h5>
+            </div>
+            <div class="card-body">
+                {% set max_cost = users[0].total_cost %}
+                {% for user in users[:10] %}
+                <div class="mb-3">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                        <small class="fw-bold">{{ user.email }}</small>
+                        <small class="text-muted">${{ user.total_cost }}</small>
+                    </div>
+                    <div class="progress" style="height: 20px;">
+                        <div class="progress-bar bg-primary" role="progressbar" 
+                             style="width: {{ (user.total_cost / max_cost * 100) if max_cost > 0 else 0 }}%"
+                             aria-valuenow="{{ user.total_cost }}" 
+                             aria-valuemin="0" 
+                             aria-valuemax="{{ max_cost }}">
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+{% else %}
+<!-- No Data -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body text-center py-5">
+                <i class="bi bi-people-fill display-1 text-muted"></i>
+                <h3 class="mt-3">No Users Found</h3>
+                <p class="text-muted">No user data available yet. Users will appear here after API calls are recorded.</p>
+                <a href="/dashboard" class="btn btn-primary">
+                    <i class="bi bi-arrow-left"></i> Back to Dashboard
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // Auto-refresh every 60 seconds
+    setInterval(() => {
+        window.location.reload();
+    }, 60000);
+</script>
+{% endblock %} 
\ No newline at end of file
diff --git a/uv.lock b/uv.lock
index 66095fa..1833307 100644
--- a/uv.lock
+++ b/uv.lock
@@ -7,18 +7,36 @@ name = "acmchat-dashboard"
 version = "0.1.0"
 source = { virtual = "." }
 dependencies = [
+    { name = "aiosqlite" },
     { name = "fastapi" },
     { name = "jinja2" },
     { name = "loguru" },
+    { name = "python-multipart" },
     { name = "ruff" },
+    { name = "uvicorn" },
 ]
 
 [package.metadata]
 requires-dist = [
+    { name = "aiosqlite", specifier = ">=0.21.0" },
     { name = "fastapi", specifier = ">=0.115.13" },
     { name = "jinja2", specifier = ">=3.1.6" },
     { name = "loguru", specifier = ">=0.7.3" },
+    { name = "python-multipart", specifier = ">=0.0.20" },
     { name = "ruff", specifier = ">=0.12.0" },
+    { name = "uvicorn", specifier = ">=0.34.3" },
+]
+
+[[package]]
+name = "aiosqlite"
+version = "0.21.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/13/7d/8bca2bf9a247c2c5dfeec1d7a5f40db6518f88d314b8bca9da29670d2671/aiosqlite-0.21.0.tar.gz", hash = "sha256:131bb8056daa3bc875608c631c678cda73922a2d4ba8aec373b19f18c17e7aa3", size = 13454, upload-time = "2025-02-03T07:30:16.235Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/f5/10/6c25ed6de94c49f88a91fa5018cb4c0f3625f31d5be9f771ebe5cc7cd506/aiosqlite-0.21.0-py3-none-any.whl", hash = "sha256:2549cf4057f95f53dcba16f2b64e8e2791d7e1adedb13197dd8ed77bb226d7d0", size = 15792, upload-time = "2025-02-03T07:30:13.6Z" },
 ]
 
 [[package]]
@@ -45,6 +63,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/a1/ee/48ca1a7c89ffec8b6a0c5d02b89c305671d5ffd8d3c94acf8b8c408575bb/anyio-4.9.0-py3-none-any.whl", hash = "sha256:9f76d541cad6e36af7beb62e978876f3b41e3e04f2c1fbf0884604c0a9c4d93c", size = 100916, upload-time = "2025-03-17T00:02:52.713Z" },
 ]
 
+[[package]]
+name = "click"
+version = "8.2.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "colorama", marker = "sys_platform == 'win32'" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/60/6c/8ca2efa64cf75a977a0d7fac081354553ebe483345c734fb6b6515d96bbc/click-8.2.1.tar.gz", hash = "sha256:27c491cc05d968d271d5a1db13e3b5a184636d9d930f148c50b038f0d0646202", size = 286342, upload-time = "2025-05-20T23:19:49.832Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/85/32/10bb5764d90a8eee674e9dc6f4db6a0ab47c8c4d0d83c27f7c39ac415a4d/click-8.2.1-py3-none-any.whl", hash = "sha256:61a3265b914e850b85317d0b3109c7f8cd35a670f963866005d6ef1d5175a12b", size = 102215, upload-time = "2025-05-20T23:19:47.796Z" },
+]
+
 [[package]]
 name = "colorama"
 version = "0.4.6"
@@ -80,6 +110,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/59/4a/e17764385382062b0edbb35a26b7cf76d71e27e456546277a42ba6545c6e/fastapi-0.115.13-py3-none-any.whl", hash = "sha256:0a0cab59afa7bab22f5eb347f8c9864b681558c278395e94035a741fc10cd865", size = 95315, upload-time = "2025-06-17T11:49:44.106Z" },
 ]
 
+[[package]]
+name = "h11"
+version = "0.16.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/01/ee/02a2c011bdab74c6fb3c75474d40b3052059d95df7e73351460c8588d963/h11-0.16.0.tar.gz", hash = "sha256:4e35b956cf45792e4caa5885e69fba00bdbc6ffafbfa020300e549b208ee5ff1", size = 101250, upload-time = "2025-04-24T03:35:25.427Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/4b/29cac41a4d98d144bf5f6d33995617b185d14b22401f75ca86f384e87ff1/h11-0.16.0-py3-none-any.whl", hash = "sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86", size = 37515, upload-time = "2025-04-24T03:35:24.344Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.10"
@@ -274,6 +313,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/32/56/8a7ca5d2cd2cda1d245d34b1c9a942920a718082ae8e54e5f3e5a58b7add/pydantic_core-2.33.2-pp311-pypy311_pp73-win_amd64.whl", hash = "sha256:329467cecfb529c925cf2bbd4d60d2c509bc2fb52a20c1045bf09bb70971a9c1", size = 2066757, upload-time = "2025-04-23T18:33:30.645Z" },
 ]
 
+[[package]]
+name = "python-multipart"
+version = "0.0.20"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/f3/87/f44d7c9f274c7ee665a29b885ec97089ec5dc034c7f3fafa03da9e39a09e/python_multipart-0.0.20.tar.gz", hash = "sha256:8dd0cab45b8e23064ae09147625994d090fa46f5b0d1e13af944c331a7fa9d13", size = 37158, upload-time = "2024-12-16T19:45:46.972Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/45/58/38b5afbc1a800eeea951b9285d3912613f2603bdf897a4ab0f4bd7f405fc/python_multipart-0.0.20-py3-none-any.whl", hash = "sha256:8a62d3a8335e06589fe01f2a3e178cdcc632f3fbe0d492ad9ee0ec35aab1f104", size = 24546, upload-time = "2024-12-16T19:45:44.423Z" },
+]
+
 [[package]]
 name = "ruff"
 version = "0.12.0"
@@ -341,6 +389,20 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/17/69/cd203477f944c353c31bade965f880aa1061fd6bf05ded0726ca845b6ff7/typing_inspection-0.4.1-py3-none-any.whl", hash = "sha256:389055682238f53b04f7badcb49b989835495a96700ced5dab2d8feae4b26f51", size = 14552, upload-time = "2025-05-21T18:55:22.152Z" },
 ]
 
+[[package]]
+name = "uvicorn"
+version = "0.34.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "click" },
+    { name = "h11" },
+    { name = "typing-extensions", marker = "python_full_version < '3.11'" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/de/ad/713be230bcda622eaa35c28f0d328c3675c371238470abdea52417f17a8e/uvicorn-0.34.3.tar.gz", hash = "sha256:35919a9a979d7a59334b6b10e05d77c1d0d574c50e0fc98b8b1a0f165708b55a", size = 76631, upload-time = "2025-06-01T07:48:17.531Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/6d/0d/8adfeaa62945f90d19ddc461c55f4a50c258af7662d34b6a3d5d1f8646f6/uvicorn-0.34.3-py3-none-any.whl", hash = "sha256:16246631db62bdfbf069b0645177d6e8a77ba950cfedbfd093acef9444e4d885", size = 62431, upload-time = "2025-06-01T07:48:15.664Z" },
+]
+
 [[package]]
 name = "win32-setctime"
 version = "1.2.0"