diff --git a/staff/index.html b/staff/index.html
index c80fc83..104746f 100644
--- a/staff/index.html
+++ b/staff/index.html
@@ -59,8 +59,8 @@
             </div>
         </li>
         <li class="faq-item">
-            <div class="question">Why do we use it?</div>
-            <div class="answer">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
+            <div class="question">Where can I find the TODO list for staff?</div>
+            <div class="answer">You'll found it <a href="todo.html">here</a>.</div>
         </li>
         <li class="faq-item">
             <div class="question">Where does it come from?</div>
diff --git a/staff/load_tasks.php b/staff/load_tasks.php
new file mode 100644
index 0000000..0a78ead
--- /dev/null
+++ b/staff/load_tasks.php
@@ -0,0 +1,5 @@
+<?php
+// Load tasks from the flat-file database (tasks.txt)
+$tasks = file_exists("tasks.txt") ? explode("\n", file_get_contents("tasks.txt")) : [];
+echo json_encode($tasks);
+?>
diff --git a/staff/save_tasks.php b/staff/save_tasks.php
new file mode 100644
index 0000000..7aaa6d0
--- /dev/null
+++ b/staff/save_tasks.php
@@ -0,0 +1,8 @@
+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $data = json_decode(file_get_contents("php://input"), true);
+
+    // Store tasks in a flat-file database (tasks.txt)
+    file_put_contents("tasks.txt", implode("\n", $data["tasks"]));
+}
+?>
diff --git a/staff/todo.html b/staff/todo.html
new file mode 100644
index 0000000..2b66a62
--- /dev/null
+++ b/staff/todo.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo List Manager</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+
+        #taskInput, #assigneeInput {
+            width: 70%;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+
+        #addButton {
+            padding: 10px;
+            cursor: pointer;
+        }
+
+        #taskList {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .taskItem {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 5px;
+            border: 1px solid #ddd;
+            background-color: #f9f9f9;
+        }
+
+        .deleteButton {
+            cursor: pointer;
+            color: red;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+
+    <h2>Todo List Manager</h2>
+
+    <div>
+        <input type="text" id="taskInput" placeholder="Add a new task">
+        <input type="text" id="assigneeInput" placeholder="Assignee's name">
+        <button onclick="addTask()" id="addButton">Add Task</button>
+    </div>
+
+    <ul id="taskList"></ul>
+
+    <script>
+        function addTask() {
+            // Existing addTask function remains the same
+
+            saveTasks();  // Save tasks after adding one
+        }
+
+        function saveTasks() {
+            var taskList = document.getElementById("taskList");
+            var tasks = [];
+
+            // Iterate through the list items and store task text in the tasks array
+            for (var i = 0; i < taskList.children.length; i++) {
+                tasks.push(taskList.children[i].innerText.trim());
+            }
+
+            // Send tasks to the server for saving
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "save_tasks.php", true);
+            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+            xhr.send(JSON.stringify({ tasks: tasks }));
+
+            // Reload tasks after saving to update any changes
+            loadTasks();
+        }
+
+        // Load tasks from the server
+        function loadTasks() {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    var tasks = JSON.parse(xhr.responseText);
+                    displayTasks(tasks);
+                }
+            };
+            xhr.open("GET", "load_tasks.php", true);
+            xhr.send();
+        }
+
+        // Display tasks on the page
+        function displayTasks(tasks) {
+            var taskList = document.getElementById("taskList");
+
+            // Clear existing tasks
+            while (taskList.firstChild) {
+                taskList.removeChild(taskList.firstChild);
+            }
+
+            // Display tasks from the array
+            tasks.forEach(function(taskText) {
+                var listItem = document.createElement("li");
+                listItem.className = "taskItem";
+
+                var taskTextNode = document.createTextNode(taskText);
+                listItem.appendChild(taskTextNode);
+
+                var deleteButton = document.createElement("span");
+                deleteButton.className = "deleteButton";
+                deleteButton.innerHTML = "Delete";
+                deleteButton.onclick = function() {
+                    taskList.removeChild(listItem);
+                    saveTasks();  // Save tasks after deleting one
+                };
+
+                listItem.appendChild(deleteButton);
+
+                taskList.appendChild(listItem);
+            });
+        }
+
+        // Auto-refresh every 5 seconds (adjust as needed)
+        setInterval(loadTasks, 5000);
+        
+        // Initial load of tasks when the page is loaded
+        window.onload = function() {
+            loadTasks();
+        };
+    </script>
+
+</body>
+</html>
\ No newline at end of file
