diff --git a/vibeguard/templates/report.html b/vibeguard/templates/report.html
new file mode 100644
index 0000000..8dd1fa4
--- /dev/null
+++ b/vibeguard/templates/report.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
+        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+        header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px 8px 0 0; }
+        header h1 { font-size: 2.5em; margin-bottom: 10px; }
+        .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 25px; background: white; border-bottom: 1px solid #eee; }
+        .summary-card { text-align: center; padding: 20px; border-radius: 8px; background: #f8f9fa; }
+        .summary-card.critical { background: #ffebee; }
+        .summary-card.error { background: #fff3e0; }
+        .summary-card.warning { background: #fff8e1; }
+        .summary-card.info { background: #e8f5e9; }
+        .summary-card h3 { font-size: 2em; margin-bottom: 5px; }
+        .issues { padding: 25px; background: white; }
+        .issue { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
+        .issue-header { padding: 15px 20px; cursor: pointer; }
+        .issue-header.critical { background: #ffebee; border-left: 4px solid #d32f2f; }
+        .issue-header.error { background: #fff3e0; border-left: 4px solid #f57c00; }
+        .issue-header.warning { background: #fff8e1; border-left: 4px solid #fbc02d; }
+        .issue-header.info { background: #e8f5e9; border-left: 4px solid #388e3c; }
+        .issue-details { padding: 20px; display: none; border-top: 1px solid #e0e0e0; }
+        .issue-details.show { display: block; }
+        footer { text-align: center; padding: 20px; color: #666; font-size: 0.9em; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>{{ title }}</h1>
+            <p>Generated on {{ timestamp }}</p>
+        </header>
+        <div class="summary">
+            <div class="summary-card" style="background: #e3f2fd;"><h3>{{ total_issues }}</h3><p>Total Issues</p></div>
+            <div class="summary-card critical"><h3>{{ summary.critical }}</h3><p>Critical</p></div>
+            <div class="summary-card error"><h3>{{ summary.error }}</h3><p>Errors</p></div>
+            <div class="summary-card warning"><h3>{{ summary.warning }}</h3><p>Warnings</p></div>
+            <div class="summary-card info"><h3>{{ summary.info }}</h3><p>Info</p></div>
+        </div>
+        <div class="issues">
+            {% if issues %}
+                {% for issue in issues %}
+                <div class="issue">
+                    <div class="issue-header {{ issue.severity }}">
+                        <strong>{{ issue.pattern }}</strong> - {{ issue.file }}:{{ issue.line }}
+                    </div>
+                    <div class="issue-details">
+                        <p>{{ issue.message }}</p>
+                        <p style="margin-top: 10px;"><strong>Fix:</strong> {{ issue.suggestion }}</p>
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <p style="text-align: center; padding: 40px; color: #666;">No issues found! Your code is clean.</p>
+            {% endif %}
+        </div>
+        <footer><p>Generated by VibeGuard - AI Code Anti-Pattern Detector</p></footer>
+    </div>
+</body>
+</html>
