diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..70bf05f
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo List</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Todo List</h1>
+    <input type="text" id="todoInput" placeholder="Add a new task">
+    <button id="addTodoButton">Add</button>
+    <ul id="todoList"></ul>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const todoInput = document.getElementById('todoInput');
+      const addTodoButton = document.getElementById('addTodoButton');
+      const todoList = document.getElementById('todoList');
+
+      const fetchTodos = async () => {
+        const response = await fetch('/api/todos');
+        const todos = await response.json();
+        todoList.innerHTML = '';
+        todos.forEach(todo => {
+          const li = document.createElement('li');
+          li.textContent = todo.text;
+          li.style.backgroundColor = todo.completed ? 'lightgreen' : 'lightcoral';
+          li.addEventListener('click', async () => {
+            await fetch(`/api/todos/${todo.id}`, { method: 'DELETE' });
+            fetchTodos();
+          });
+          todoList.appendChild(li);
+        });
+      };
+
+      addTodoButton.addEventListener('click', async () => {
+        const text = todoInput.value.trim();
+        if (text) {
+          await fetch('/api/todos', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text })
+          });
+          todoInput.value = '';
+          fetchTodos();
+        }
+      });
+
+      fetchTodos();
+    });
+  </script>
+</body>
+</html>
+
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..485f7ae
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,59 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+}
+
+h1 {
+  color: #333;
+}
+
+input[type="text"] {
+  width: calc(100% - 60px);
+  padding: 10px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  padding: 10px;
+  margin: 5px 0;
+  background-color: lightcoral;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+li:hover {
+  background-color: #ff6666;
+}
