diff --git a/app/templates/deployment-detail.html b/app/templates/deployment-detail.html
new file mode 100644
index 0000000..614f324
--- /dev/null
+++ b/app/templates/deployment-detail.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Deployment {{ deployment.id }}</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 30px;
+            background: #f5f5f5;
+        }
+
+        pre {
+            background: #111;
+            color: #0f0;
+            padding: 20px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+
+        .section {
+            margin-bottom: 30px;
+        }
+
+        a {
+            text-decoration: none;
+        }
+    </style>
+</head>
+
+<body>
+    <p>
+        <a href="/portal/deployments">
+            ← Back to deployments
+        </a>
+    </p>
+
+    <h1>Deployment #{{ deployment.id }}</h1>
+
+    <div class="section">
+        <strong>App:</strong> {{ deployment.app_id }}<br>
+        <strong>Status:</strong> {{ deployment.status }}<br>
+        <strong>Kind:</strong> {{ deployment.kind }}<br>
+        <strong>Started:</strong> {{ deployment.started_at }}<br>
+        <strong>Finished:</strong> {{ deployment.finished_at }}<br>
+        <strong>Return code:</strong> {{ deployment.returncode }}
+    </div>
+
+    <div class="section">
+        <h2>STDOUT</h2>
+        <pre>{{ deployment.stdout }}</pre>
+    </div>
+
+    <div class="section">
+        <h2>STDERR</h2>
+        <pre>{{ deployment.stderr }}</pre>
+    </div>
+</body>
+</html>
diff --git a/app/templates/deployments.html b/app/templates/deployments.html
new file mode 100644
index 0000000..875e641
--- /dev/null
+++ b/app/templates/deployments.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Deployments</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 30px;
+            background: #f5f5f5;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+        }
+
+        th, td {
+            padding: 12px;
+            border-bottom: 1px solid #ddd;
+            text-align: left;
+        }
+
+        th {
+            background: #222;
+            color: white;
+        }
+
+        tr:hover {
+            background: #f0f0f0;
+        }
+
+        .success {
+            color: green;
+            font-weight: bold;
+        }
+
+        .failed {
+            color: red;
+            font-weight: bold;
+        }
+
+        .running {
+            color: orange;
+            font-weight: bold;
+        }
+
+        a {
+            text-decoration: none;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Deployments</h1>
+
+    <table>
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>App</th>
+                <th>Kind</th>
+                <th>Status</th>
+                <th>Started</th>
+                <th>Finished</th>
+                <th>Return Code</th>
+            </tr>
+        </thead>
+
+        <tbody>
+            {% for deploy in deployments %}
+            <tr>
+                <td>
+                    <a href="/portal/deployments/{{ deploy.id }}">
+                        #{{ deploy.id }}
+                    </a>
+                </td>
+
+                <td>{{ deploy.app_id }}</td>
+
+                <td>{{ deploy.kind }}</td>
+
+                <td class="{{ deploy.status }}">
+                    {{ deploy.status }}
+                </td>
+
+                <td>{{ deploy.started_at }}</td>
+
+                <td>{{ deploy.finished_at or '-' }}</td>
+
+                <td>{{ deploy.returncode or '-' }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</body>
+</html>
