diff --git a/python/templates/index.html b/python/templates/index.html
new file mode 100644
index 0000000..29dc600
--- /dev/null
+++ b/python/templates/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Hyper-V 虚拟机管理</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f9;
+            color: #333;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            text-align: center;
+            padding: 20px 0;
+            margin: 0;
+            background-color: #4CAF50;
+            color: white;
+            font-size: 24px;
+        }
+        table {
+            width: 80%;
+            margin: 40px auto;
+            border-collapse: collapse;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            background-color: white;
+        }
+        th, td {
+            padding: 15px;
+            text-align: center;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #4CAF50;
+            color: white;
+            font-weight: bold;
+        }
+        tr:hover {
+            background-color: #f1f1f1;
+        }
+        button {
+            padding: 10px 15px;
+            font-size: 14px;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button.start {
+            background-color: #28a745;
+        }
+        button.stop {
+            background-color: #dc3545;
+        }
+        button.restart {
+            background-color: #ffc107;
+        }
+        button:disabled {
+            background-color: #aaa;
+            cursor: not-allowed;
+        }
+        .container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #4CAF50;
+            color: white;
+            position: fixed;
+            width: 100%;
+            bottom: 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hyper-V 虚拟机管理</h1>
+    <div class="container">
+        <table>
+            <thead>
+                <tr>
+                    <th>虚拟机名称</th>
+                    <th>状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vm in vms %}
+                <tr>
+                    <td>{{ vm.Name }}</td>
+                    <td>
+                        {% if vm.State == 2 %}
+                            <span style="color: green;">运行中</span>
+                        {% elif vm.State == 3 %}
+                            <span style="color: red;">已关闭</span>
+                        {% else %}
+                            <span style="color: gray;">未知状态</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if vm.State == 2 %}
+                            <button class="stop" onclick="performAction('{{ vm.Name }}', 'stop')">关机</button>
+                            <button class="restart" onclick="performAction('{{ vm.Name }}', 'restart')">重启</button>
+                        {% elif vm.State == 3 %}
+                            <button class="start" onclick="performAction('{{ vm.Name }}', 'start')">启动</button>
+                        {% else %}
+                            <button disabled>无可用操作</button>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <footer>
+        Hyper-V 虚拟机管理系统
+    </footer>
+
+    <script>
+        function performAction(vmName, action) {
+            if (!confirm(`确定要对虚拟机 "${vmName}" 执行 "${action}" 操作吗？`)) {
+                return;
+            }
+            fetch('/control_vm', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ name: vmName, action: action })
+            })
+            .then(response => response.json())
+            .then(data => {
+                alert(data.message);
+                if (data.status="success") {
+                    // 刷新页面以更新状态
+                    location.reload();
+                }
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('操作失败');
+            });
+        }
+    </script>
+</body>
+</html>
